@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700;800&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(60deg, #24533d 4%, #dafa89 52%);
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(28deg, #76bd9d 14%, #ebf8cb 64%);
}

::-webkit-scrollbar-track {
  background: #091f0ddf;
  border-radius: 15px;
}

:root {
  --color-black: #000;
  --color-gray: #f0f0f0;
  --color-white: #fff;
  --color-blue: #1b62b9;
  --color-dark-blue: #144c90;
  --color-red: #e63838;
  --color-dark-red: #a22929;
  --color-yellow: #ffea64;
  --color-dark-yellow: #fddd50;
  --color-peach: #fc9;
  --font-family: 'Rubik', sans-serif;
  --font-size-h1: 7.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.875rem;
  --font-size-h4: 1.375rem;
  --font-size-text: 1.125rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;


}





body {
  min-height: 100vh;
  font-size: 100%;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.ecrit {
  width: Auto;
  height: auto;
  margin-bottom: 3%;
}


.arriver {
  align-items: center;
  width: 100%;
  justify-content: center;
  width: auto;
  display: flex;
  flex-direction: column;
}

.presentation {
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: space-around;
}


.welcome {
  width: 70%;
  margin: 10%;
}


.logo {
  width: 30%;
}

.text {
  font-size: 0.7rem;
  border: 5px solid black;
  box-shadow: 0.5rem 0.5rem rgb(132 81 61 / 35%);
  margin: auto;
  padding: 2% 4%;
  width: auto;
  height: auto;

}

.skills-bar {
  border: 5px solid black;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
  box-shadow: 0.5rem 0.5rem rgb(132 81 61 / 35%);
  padding: 25px 30px;
}

.skills-bar .bar {
  margin: 20px 0;
}

.skills-bar :first-child {
  margin-top: 0px;
}

.skills-bar .bar .infos span {
  font-size: 1em;
}

.skills-bar .bar .progress-line {
  height: 10px;
  width: 100%;
  background-color: gainsboro;
  border: 2px solid black;
  box-shadow: 0.5rem 0.5rem rgb(132 81 61 / 35%);
  position:relative;
}

.bar .progress-line span {
  height: 100%;
  width: 80%;
  position: absolute;
  background-color: violet;
}



.progress-line.procreate span {
  width: 100%;
  height: 100%;
}

.progress-line.photoshop span {
  width: 80%;
  height: 100%;
}


.progress-line.illustrator span {
  width: 80%;
  height: 100%;
}


.progress-line.indesign span {
  width: 70%;
}


.progress-line.premiere span {
  width: 70%;
}

.progress-line.figma span {
  width: 70%;
}


.progress-line.css span {
  width: 60%;
}


.progress-line.javascript span {
  width: 40%;
}

.bar .progress-line span::before {
  position: absolute;
  right: 0;
  content: "";
  top: -10px;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-bottom-width: 0;
  border-right-width: 0;
  border-top-color: black;
}

.bar .progress-line span::after {
  position: absolute;
  content: "80%";
  right: 0;
  top: -30px;
  background-color: black;
  font-size: 0.8em;
  color: #FFFFFF;
  padding: 1px 8px;

}

.progress-line.procreate span::after {
  content: "100%";
}

.progress-line.photoshop span::after {
  content: "80%";
}


.progress-line.illustrator span::after {
  content: "80%";
}


.progress-line.indesign span::after {
  content: "70%";
}


.progress-line.premiere span::after {
  content: "70%";
}

.progress-line.figma span::after {
  content: "70%";
}


.progress-line.css span::after {
  content: "60%";
}


.progress-line.javascript span::after {
  content: "40%";
}




.statistique {
  width: 40%;
}


.texte1 {
  width: 45%;
  height: 1417px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 141.5px;
}

.exp {
  padding: 2%;
  font-size: 0.9em;
  border: 0.25rem solid var(--color-black);
  background-color: var(--color-white);
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}

.texte2 {
  width: 45%;
  height: 1417px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 211.5px;
}


.pink {
  background-color: pink;
}

.purple {
  background-color: plum;
}

.red {
  background-color: rgb(238, 112, 90);
}

.yellow {
  background-color: rgb(255, 251, 192);
}

.green {
  background-color: rgb(153, 238, 153);
}

.blue {
  background-color: powderblue;
}

.beige {
  background-color: rgb(255, 212, 147);
}

.blaune {
  background-color: rgb(133, 238, 220);
}


.circle {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background-color: purple;
  border: 4px solid white;
}

.barre {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  margin-bottom: 5%;
}

.graph {
  width: 100%;
  padding: 10px;
  border: 5px solid black;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}

.elements {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
}

.centrer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

}

.centrer2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  height: 100%
}

.centrer3 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: 100%;

}

.centrer4 {
  margin: auto;
  display: grid;
  grid-template-columns: 4, 1fr;
  grid-column-gap: 20px;
  grid-auto-flow: row dense;
}

.text {
  font-size: 1rem;
  margin: 0 0 1rem;
}




.download {
  font-size: 0.8em;
  width: 100%;
  text-align: center;
  color: black;
  padding: 2%;
  border: 5px solid black;
  background-color: white;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}

.surprise {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  justify-content: space;
  align-items: center;
}

.moi {
  width: 40%;
  padding: 5px;
  background-image: url("./img/moi.png");
  background-size: cover;
  border: 10px solid var(--color-black);
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
  transition: all 1000ms ease-out;
}

.effect {
  filter: brightness(60%);
  transition: all 1000ms ease-out;
}

.reseaux {
  transition: all 1000ms ease-out;
  height: 30px;
}

.lin-behance {
  display: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border: 5px solid black;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
  background-color: white;
  padding: 5px;
  width: 50%;
  height: 10%;
  transition: all 1000ms ease-out;
}

@media screen and (max-width: 600px) {
  .statistique {
    width: auto;
  }

  .graph {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

}


body {
  color: var(--color-black);
  font-family: var(--font-family);
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-regular);
  background-repeat: no-repeat;
  background-image: url(./img/fond1.svg);
  background-size: cover;
  background-attachment: fixed;
}

.graph {
  display: flex;
  flex-direction: row;
  width: 70%;
  padding: 3%;
  justify-content: space-around;

}

form {
  border: 5px solid black;
  padding: 3%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}

form h1 {
  font-size: 20px;
}

form .corps-formulaire {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}

form .corps-formulaire .groupe {
  position: relative;
  /* Pour mettre positionner l’élément dans le flux normal de la page */
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

form .corps-formulaire .gauche .groupe input {
  margin-top: 5px;
  padding: 10px 5px 10px 30px;
  border: 5px solid black;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}


form .corps-formulaire .droite {
  margin-left: 60px;
  height: 275px;
  width: 50%;
}

form .corps-formulaire .droite .groupe {
  height: 100%;

}

form .corps-formulaire .droite .groupe textarea {
  margin-top: 5px;
  padding: 10px;
  background-color: #d1faab;
  border: 5px solid black;
  outline: none;
  resize: none;
  height: 100%;
  width: 100%;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}

form .pied-formulaire button {
  margin-top: 10px;
  width: 300px;
  background-color: #747cdf;
  color: white;
  font-size: 15px;
  margin-top: 30px;
  padding: 10px 20px;
  border: 5px solid black;
  outline: none;
  cursor: pointer;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
  font-family: var(--font-family);

}

.close{
  margin-top: 10px;
  width: 300px;
  background-color: #747cdf;
  color: white;
  font-size: 15px;
  margin-top: 30px;
  padding: 10px 20px;
  border: 5px solid black;
  outline: none;
  cursor: pointer;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
  font-family: var(--font-family);
}

@media screen and (max-width: 920px) {
  form .corps-formulaire .droite .groupe textarea {
    margin-left: auto;
    width: 100%;
    height: 200px;
  }

  form .corps-formulaire {
    display: flex;
    flex-direction: column;

  }

  .elements {
    flex-direction: column;
    align-items: center;
  }

  .presentation {
    width: 100%;
  }

  .moi {
    width: 70%;
  }

}

@media (min-width:0px) {
  .passion1 {
    width: 175px;
  }
}


@media screen and (max-width: 400px) {
  form .corps-formulaire .droite .groupe {
    margin: 0;
  }

  form .corps-formulaire .droite .groupe textarea {

    width: 150px;
    height: 200px;
  }

  form .corps-formulaire .droite .groupe {
    display: flex;
    align-items: left;
  }

  form .corps-formulaire {
    display: flex;
    flex-direction: column;
  }

  form .pied-formulaire button {
    width: 200px;
  }

}



.container3 {
  width: 100%;
  padding: 0;
  margin: auto;
}

.portfolio {

  width: 100%;
  /*counter-reset: portfolio;*/
}


.nom_projet {
  font-size: 1em;
  text-align: center;
}



h3 {
  font-size: 0.75em;
}

.titre {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  display: flex;
  font-size: 70%;
  justify-content: center;
  align-items: center;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}


/*.nom_projet::after{
content: counter(portfolio);
}*/


.description {

  font-size: 0.7em;
  grid-column: span 2;
}


.projet {
  cursor: pointer;
  margin-bottom: 20px;
}

div .cache {
  grid-column: span 4;
  width: 80%;
  margin: auto;
  text-align: center;
  margin-bottom: 5%;
  padding-bottom: 2%;
}

@media (min-width: 650px) {

  .description {
    font-size: 1em;
    grid-column: span 4;
  }

  h3 {
    font-size: 1.2em;
  }

  .portfolio {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 5%;
    grid-auto-flow: row dense;
    margin-left: 2.5%;
  }



  .titre {
    height: 150px;
    width: 150px;
    font-size: 1em;
    grid-row: 2 3;
  }
}

.snk {
  width: 80%;
}

.passion1 {
  border: 5px solid black;
  padding: 2%;
  margin: 2%;
  width: 200px;
  height: 300px;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

div.passion1 h3 {
  text-align: center;
  font-size: 1em;
}

@media (max-width:960px) {
  .centrer4 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .snk {
    width: 200Px;
  }

  .passion1 {
    width: auto;
  }
}

.slide {
  float: left;
}

.slides {
  width: calc(550px * 5);
  animation: glisse 15s infinite;
}

.slide img {
  width: 550px;

}

.disp {
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(./img/color_palette.png);
  background-size: cover;
}

.slider {
  width: 550px;
  height: auto;
  margin: auto;
  overflow: hidden;
  border: 5px solid black;
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
  height: 700px;

}

.marinamaaider{
  position: fixed;
  width: 100vw;
  height: 100vw;
  background-color: rgba(0, 0, 0, 0.377);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  z-index: 300;
}

.popup-overlay {
  border: 5px solid black;
  box-shadow: 0.5rem 0.5rem rgba(58, 36, 27, 0.35),0px 0px 0px 100vw rgba(0, 0, 0, 0.616);
  /*Hides pop-up when there is no "active" class*/
  position:fixed;
  background-color:white ;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  visibility: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.active {
  /*displays pop-up when "active" class is present*/
  visibility: visible;
  text-align: center;
}

.popup-content {
  /*Hides pop-up content when there is no "active" class */
  visibility:hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

.popup-content p{
  width: 75%;
}



@keyframes glisse {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-550px);
  }

  35% {
    transform: translateX(-550px);
  }

  50% {
    transform: translateX(-1100px);
  }

  60% {
    transform: translateX(-1100px);
  }

  75% {
    transform: translateX(-1650px);
  }

  85% {
    transform: translateX(-1650px);
  }

  100% {
    transform: translateX(0px);
  }
}


@media (max-width:620px) {
  .slide {
    float: left;
  }

  .slides {
    width: calc(200px * 5);
    animation: glisse 15s infinite;
  }

  .slide img {
    width: 200px;

  }


  .slider {
    width: 200px;
    height: 250px;
    overflow: hidden;
    border: 5px solid black;
    box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);

  }



  @keyframes glisse {
    0% {
      transform: translateX(0);
    }

    10% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-200px);
    }

    35% {
      transform: translateX(-200px);
    }

    50% {
      transform: translateX(-400px);
    }

    60% {
      transform: translateX(-400px);
    }

    75% {
      transform: translateX(-600px);
    }

    85% {
      transform: translateX(-600px);
    }

    100% {
      transform: translateX(0px);
    }
  }
}















h1,
h2,
h3,
h4 {
  margin-bottom: 0.65em;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  text-transform: uppercase;
}



p {
  margin: 0 0 1rem;
}






.container h2 {
  font-size: 3rem;
  align-self: center;
  margin-top: -3.75rem;
  padding: 0.25em 0.5em;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-black);
  transform: skewX(-10deg) rotate(-2deg);
  text-align: center;
}

@media (max-width:500px) {
  .container h2 {
    font-size: 1.6em;

  }

  .container {
    margin-bottom: 20px;
  }
}



/* nav ul {
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);

} */

article .container,
aside .container {
  padding: 1.625rem 1.5rem 2rem;
  border: 0.25rem solid var(--color-black);
  background-color: white;
  box-shadow: 1rem 1rem rgba(42, 30, 25, 0.486);
}





header,
nav,
article,
aside,
.page-footer {
  width: 100%;
  max-width: 65rem;
  margin: 0 auto;
  padding: 0.5rem;
}



main {
  padding-top: 3rem;
}

.container {

  width: 100%;
  /* height: 100vh; */
  z-index: 100;
}

.navbar {
  width: 300px;
  height: 100%;
  background-color: rgba(87, 87, 87, 0.3);
  position: fixed;
  top: 0;
  right: -300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20% 0 0 40%;
  transition: right .8s cubic-bezier(1, 0, 0, 1);
}

.change {
  right: 0;
}

a {
  text-decoration: none;
}

.hamburger-menu {
  width: 60px;
  height: 45px;
  position: fixed;
  z-index: 10000000000000;
  top: 3%;
  right: 4%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.line {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background-color: #000;
  box-shadow: 0.2rem 0.2rem rgb(255, 255, 255);
  transition: all 0.8s;
}

.change .line-1 {
  transform: rotateZ(-405deg) translate(-14px, 6px);
}

.change .line-2 {
  opacity: 0;
}

.change .line-3 {
  transform: rotateZ(405deg) translate(-14px, -6px);
}

.nav-list {
  text-align: right;
  color:white;
}

.nav-item {
  list-style: none;
  margin: 25px;
}

.nav-link {
  text-decoration: none;
  font-size: 22px;
  color: #000;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 3px 0;
}

.nav-link::before,
.nav-link::after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #FFFFFF;
  position: absolute;
  left: 0;
  transform: scaleX(0);
  transition: transform 1s;
}

.nav-link::after {
  bottom: 0;
  transform-origin: right;
}

.nav-link::before {
  top: 0;
  transform-origin: left;
}

.nav-link:hover::before,
.nav-link:hover::after {
  transform: scaleX(1);
}

.nope {
  display: none;
}

/* Section Accueil */

.Accueil {
  display: flex;
  justify-content: center;

}




/* nav ul {
  margin: 0;
  padding: 0.125rem;
  list-style: none;
  font-size: 1.25rem;
  border: 0.25rem solid var(--color-black);
  background-color: var(--color-red);
} */

/* @media (min-width: 540px) {
  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

  }
} */

/* nav ul li {
  margin: 0.375rem 0.375rem 0.5rem;
  text-align: center;
} */
/* 
@media (min-width: 540px) {
  nav ul li {
    flex: 1 0 45%;
    font-size: 0.9em;
  }
}

@media (min-width: 600px) {
  nav ul li {
    flex: 1 0 30%;
    font-size: 1em;
  }
}

@media (min-width: 940px) {
  nav ul li {
    flex: 1 0 auto;
  }
} */

/* nav ul a {
  position: relative;
  display: block;
  padding: 0.5em;
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  border: 0.1875rem solid var(--color-red);
  border-radius: 2em;
  text-decoration: none;
}

nav ul a:hover {
  background-color: var(--color-dark-red);
  border-color: var(--color-black);
}

nav ul a:focus {
  background-color: var(--color-dark-red);
}


.skip-link {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  color: var(--color-white);
  font-size: 1.125rem;
  background-color: var(--color-blue);
  text-decoration: none;
  overflow: hidden;
} */

/* .skip-link:focus {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0.5em;
  color: var(--color-gray);
}

.skip-link,
nav ul,
[class^="link"],
.profile .container>a {
  border-radius: 2em;
  box-shadow: inset 0.1875rem 0.1875rem var(--color-white), inset -0.1875rem -0.1875rem var(--color-black);
}

.skip-link,
nav ul a,
[class^="link"],
.profile .container>a {
  font-size: 1.25rem;
  text-shadow: var(--link-text-shadow);
} */

/* [class^="link"],
.profile .container>a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background-color: var(--color-blue);
} */

/* .skip-link:focus,
[class^="link"],
.profile .container>a {
  padding: 0.875em 1em;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border: 0.1875rem solid var(--color-black);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
} */

/* .skip-link:focus,
[class^="link"]:hover,
[class^="link"]:focus,
.profile .container>a:hover,
.profile .container>a:focus {
  background-color: var(--color-dark-blue);
} */

/* nav ul a:hover,
nav ul a:focus,
[class^="link"]:hover,
[class^="link"]:focus,
.profile .container>a:hover,
.profile .container>a:focus {
  color: var(--color-gray);
  transform: translate(0, 0.025em);
  box-shadow: inset 0.125em 0.125em var(--color-black);
} */

/* .skip-link:focus,
nav ul a:focus,
[class^="link"]:focus,
.profile .container>a:focus {
  border-color: var(--color-white);
  box-shadow: 0 0 0 0.1875rem var(--color-black);
  outline: 2px solid transparent;
  outline-offset: 4px;
} */