@import url("../font/fonts.css");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  background-image: linear-gradient(90deg, #0A0A0A 1px, transparent 1px), linear-gradient(180deg, #0A0A0A 1px, #0F0F0F 1px); /* Lignes horizontales */
  background-size: 20% 20%;
  background-position: 0 0, 0 0;
  background-attachment: fixed;
  width: 100%;
  overflow-x: hidden;
}
body br {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body p, body h1, body h2, body a, body span {
  font-family: "Helvetica";
  color: #FBFBFB;
  line-height: 1.7;
}
body p ::-moz-selection, body h1 ::-moz-selection, body h2 ::-moz-selection, body a ::-moz-selection, body span ::-moz-selection {
  background-color: yellow;
  color: #0F0F0F;
}
body p ::selection, body h1 ::selection, body h2 ::selection, body a ::selection, body span ::selection {
  background-color: yellow;
  color: #0F0F0F;
}
body hr {
  width: 100%;
  border: none;
  border-top: 1px solid #FBFBFB;
}
body #presentation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 100vh;
  gap: 1%;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
body #presentation .global {
  display: flex;
}
body #presentation .global .small {
  font-weight: 200;
  font-size: clamp(14px, 1.5vw, 16px);
  margin-left: 0.5%;
}
body #presentation .global .designer {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10.3vw;
  line-height: 0.8;
  white-space: nowrap;
}
body #presentation .separate {
  width: 100%;
  justify-content: space-between;
}
body #presentation .trail-image {
  position: absolute;
  width: 6%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: fadeOut 0.3s forwards;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}
body #defil {
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  width: 100%;
  background-color: #FBFBFB;
}
body #defil .content {
  display: flex;
  gap: 3.5rem;
}
body #defil .content p {
  font-size: clamp(3rem, 10vw, 150px);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 0.9;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #0F0F0F;
}
body #about {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 3.5rem;
}
body #about .main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10% 10% 0 10%;
  gap: 3.5rem;
}
body #about .main .titleimg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
body #about .main .titleimg h1 {
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  text-align: left;
  line-height: 1.5;
  width: 73%;
}
body #about .main .titleimg img {
  width: 40%;
  height: auto;
  position: relative;
  margin-top: -1.8%;
}
body #about .main p {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 200;
  width: 73%;
}
body #about .main .socials {
  display: flex;
  width: 73%;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
  padding-bottom: 0;
}
body #about .main .socials a {
  text-decoration: none;
  font-weight: 200;
  font-size: 0.8rem;
  transition: color 0.3s;
}
body #about .main .socials a:hover {
  color: #A6A6A6;
  transition: color 0.3s;
}
body #about .parcours {
  position: relative;
  width: 100%;
  height: 17rem;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body #about .parcours .bgtxt {
  position: absolute;
  z-index: 0;
}
body #about .parcours .bgtxt h1 {
  font-size: clamp(4rem, 12vw, 14rem);
  font-weight: 600;
  color: #131313;
  white-space: nowrap;
}
body #about .parcours .txtlist {
  display: flex;
  width: 100%;
  overflow: hidden;
  justify-content: space-between;
  gap: 3.5rem;
  align-items: center;
  z-index: 999;
}
body #about .parcours .txtlist .scroll-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}
body #about .parcours .txtlist .scroll-container .scroll-content {
  display: inline-flex;
  gap: 3.5rem;
  white-space: nowrap;
  animation: scrollLoop 100s linear infinite;
}
body #about .parcours .txtlist .scroll-container .scroll-content p {
  font-weight: 200;
  text-transform: uppercase;
  font-size: clamp(14px, 1.5vw, 16px);
  white-space: nowrap;
}
body #about .parcours .txtlist .scroll-container .scroll-content::after {
  content: attr(data-text);
}
@keyframes scrollLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
body #steps {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body #steps #line {
  border-top: 1px solid #2C2C2C;
}
body #steps .step {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body #steps .step .visible {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.8rem 3.5rem;
}
body #steps .step .visible .txt {
  display: flex;
  gap: 6.25rem;
}
body #steps .step .visible .txt h1 {
  font-weight: 200;
  font-size: 1.8rem;
  text-transform: uppercase;
}
body #steps .step .visible svg {
  color: #FBFBFB;
  transition: 0.5s ease-in-out;
}
body #steps .step .content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  margin-left: 12.5%;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-bottom: 0;
}
body #steps .step .content p {
  font-weight: 200;
  font-size: clamp(12px, 1.2vw, 14px);
  width: 80%;
}
body #steps .step .content .imgs {
  width: 100%;
  display: flex;
  gap: 2rem;
  padding: 0 2rem 0 0;
}
body #steps .step .content .imgs .img {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
body #steps .step .content .imgs #mmiun {
  background-image: url(../image/psy/full1920.webp);
}
body #steps .step .content .imgs #mmideux {
  background-image: url(../image/print/full1920.webp);
}
body #steps .step .content .imgs #mmitrois {
  background-image: url(../image/travis/full1920.webp);
}
body #steps .step .content .imgs #mmiquatre {
  background-image: url(../image/nike/full1920.webp);
}
body #steps .step .content .imgs #bipun {
  background-image: url(../image/bi/1.webp);
}
body #steps .step .content .imgs #bipdeux {
  background-image: url(../image/bi/2.webp);
}
body #steps .step .content .imgs #biptrois {
  background-image: url(../image/bi/3.webp);
}
body #steps .step .content .imgs #bipquatre {
  background-image: url(../image/bi/4.webp);
}
body #steps .step .content .imgs #frun {
  background-image: url(../image/blooboy/full1920.webp);
}
body #steps .step .content .imgs #frdeux {
  background-image: url(../image/etoile/full1920.webp);
}
body #steps .step .content .imgs #frtrois {
  background-image: url(../image/penumbra/mockup1.webp);
}
body #steps .step .content .imgs #frquatre {
  background-image: url(../image/reveetc/full1920.webp);
}
body #steps .step .content .imgs #uniun {
  background-image: url(../image/universe/full1920.webp);
}
body #steps .step .content .imgs #unideux {
  background-image: url(../image/universe/1.webp);
}
body #steps .step .content .imgs #unitrois {
  background-image: url(../image/universe/2.webp);
}
body #steps .step .content .imgs #uniquatre {
  background-image: url(../image/universe/3.webp);
}
body #steps .step.open .content {
  opacity: 1;
  padding-bottom: 2rem;
}
body #steps .step.open .visible svg {
  transform: rotate(45deg);
}
body #projects {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  margin: 5vw;
}
body #projects .title {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 3.5rem;
}
body #projects .title h1 {
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(5.5rem, 12.6vw, 250px);
  line-height: 0.8;
  white-space: nowrap;
  text-align: center;
}
body #projects .title .tag-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1.2rem;
}
body #projects .title .tag-list .tags {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.8rem;
  border-radius: 999px;
  border: 1px solid #2C2C2C;
  transition: border 0.3s;
}
body #projects .title .tag-list .tags:hover {
  border: 1px solid #FBFBFB;
}
body #projects .title .tag-list .tags p {
  color: #2C2C2C;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 200;
  text-transform: uppercase;
  transition: color 0.3s;
}
body #projects .title .tag-list .tags:hover p {
  color: #FBFBFB;
}
body #projects .project-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body #projects .project-list a {
  text-decoration: none;
  color: none;
}
body #projects .project-list .project {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 2.8rem;
  padding: 2rem;
  transition: all 0.3s;
}
body #projects .project-list .project:hover .project-number span {
  color: #A6A6A6;
  transition: color 0.3s;
}
body #projects .project-list .project .project-number span {
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 50px);
  color: #FBFBFB;
  font-family: "Helvetica";
  transition: color 0.3s;
}
body #projects .project-list .project .content {
  display: flex;
  width: 100%;
  gap: 2rem;
}
body #projects .project-list .project .content .img {
  display: flex;
  width: 0;
  transition: 0.5s ease-in-out;
  aspect-ratio: 16/9;
  overflow: hidden;
}
body #projects .project-list .project .content .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: 0.5s ease-in-out;
}
body #projects .project-list .project .content .blabla {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6px;
}
body #projects .project-list .project .content .blabla h2 {
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.3s;
}
body #projects .project-list .project .content .blabla p {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 200;
  transition: color 0.3s;
}
body #projects .project-list .project svg {
  color: #FBFBFB;
  transition: color 0.3s;
}
body #projects .project-list .project:hover .content .img {
  width: 11%;
  transition: 0.5s ease-in-out;
}
body #projects .project-list .project:hover .content h2,
body #projects .project-list .project:hover .content p {
  color: #A6A6A6;
}
body #projects .project-list .project:hover svg {
  color: #A6A6A6;
}
body #projects .project-list .line {
  border: none;
  border-top: 1px solid #FBFBFB;
}
body #projects .project-list .all-projects {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
body #projects .project-list .all-projects a {
  text-decoration: none;
}
body #projects .project-list .all-projects .button-project {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem 2rem;
  border-radius: 999px;
  border: 1px solid #FBFBFB;
  width: 100%;
  transition: border 0.3s;
}
body #projects .project-list .all-projects .button-project p {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 200;
  text-transform: uppercase;
  transition: color 0.3s;
}
body #projects .project-list .all-projects .button-project:hover {
  border: 1px solid #FBFBFB;
}
body #projects .project-list .all-projects .button-project:hover p {
  color: #A6A6A6;
}/*# sourceMappingURL=index.css.map */