.portfolio,
.portfolio * {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
.portfolio {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.frame-2676 {
  background: radial-gradient(
    closest-side,
    rgba(240, 239, 235, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  padding: 20px 50px 20px 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.clara-dran {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
}
.frame-1261153686 {
  display: flex;
  flex-direction: row;
  gap: 36px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316626 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 46px;
  position: relative;
}
.accueil {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.line-1 {
  margin-top: -1px;
  border-style: solid;
  border-color: #000000;
  border-width: 1px 0 0 0;
  align-self: stretch;
  flex-shrink: 0;
  height: 0px;
  position: relative;
}
.frame-1321316627 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 38px;
  position: relative;
}
.projet {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.line-12 {
  margin-top: -1px;
  border-style: solid;
  border-color: #000000;
  border-width: 1px 0 0 0;
  opacity: 0;
  flex-shrink: 0;
  width: 1px;
  height: 0px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}
.frame-1321316628 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 33px;
  position: relative;
}
.profil {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-1321316625 {
  background: #f0efeb;
  border-radius: 200px;
  padding: 18px 30px 18px 30px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.me-contacter {
  color: #000000;
  text-align: center;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.frame-1321316622 {
  padding: 50px 0px 50px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.frame-1321316585 {
  padding: 0px 50px 0px 50px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316583 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-1321316582 {
  background: #f0efeb;
  border-radius: 45px;
  padding: 45px 39px 45px 39px;
  display: flex;
  flex-direction: column;
  gap: 70px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 550px;
  position: relative;
}
.frame-1321316581 {
  padding: 0px 20px 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex: 1;
  position: relative;
}
.frame-13213166222 {
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316587 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.type-95 {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 95px;
  line-height: 120%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.type-952 {
  color: #000000;
  text-align: left;
  font-family: "Damion-Regular", sans-serif;
  font-size: 64px;
  line-height: 120%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.type-16 {
  text-align: left;
  font-family: "PlusJakartaSans-Regular", sans-serif;
  font-size: 24px;
  line-height: 165%;
  letter-spacing: 0.03em;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.type-16-span {
  color: #858585;
}
.type-16-span2 {
  color: #000000;
}
.frame-1321316629 {
  background: #ffffff;
  border-radius: 200px;
  padding: 16px 30px 16px 30px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.d-couvrir-mon-univers {
  color: #000000;
  text-align: center;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.arrow-2 {
  flex-shrink: 0;
  width: 25px;
  height: 12px;
  position: relative;
  overflow: visible;
}
.frame-1321316630 {
  background: #a793ac;
  border-radius: 200px;
  padding: 16px 30px 16px 30px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: -100%;
  top: 0px;
}
.d-couvrir-mon-univers2 {
  color: #ffffff;
  text-align: center;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.arrow-22 {
  flex-shrink: 0;
  width: 25px;
  height: 12px;
  position: relative;
  overflow: visible;
}
.frame-1321316580 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.rectangle-11 {
  border-radius: 45px;
  flex: 1;
  height: 240px;
  position: relative;
  object-fit: cover;
}
.lucide-arrow-down-left {
  border-radius: 45px;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}
.arrow-link {
  display: block;
  width: 240px;
  height: 240px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 45px;
}
.frame-1321316584 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.rectangle-13 {
  background: linear-gradient(
    180deg,
    rgba(117, 112, 105, 1) 0%,
    rgba(154, 147, 147, 1) 100%
  );
  border-radius: 45px;
  flex-shrink: 0;
  width: 513px;
  height: 822px;
  position: relative;
}
.frame-251 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: absolute;
  left: -189px;
  top: -220px;
}
.frame-1321316617 {
  flex-shrink: 0;
  width: 940px;
  height: 1316px;
  position: relative;
}
.front-view-hand-holding-smartphone-photoroom-1 {
  width: 940px;
  height: 1316px;
  position: absolute;
  left: 940px;
  top: 0px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(-1, 1);
  object-fit: cover;
  aspect-ratio: 940/1316;
}
.frame-1321316616-2-1 {
  width: 300.26px;
  height: 650.91px;
  position: absolute;
  left: 301.37px;
  top: 284.98px;
  transform-origin: 0 0;
  transform: rotate(0.407deg) scale(1, 1);
  object-fit: cover;
  aspect-ratio: 300.26/650.91;
}
.about {
  background: #fbfbfb;
  padding: 140px 0px 140px 0px;
  display: flex;
  flex-direction: column;
  gap: 29px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-9 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1050px;
  position: relative;
}
.frame-472 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-471 {
  border-radius: 300px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.a-propos-de-moi {
  color: #757069;
  text-align: center;
  font-family: "PlusJakartaSans-Regular", sans-serif;
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 400;
  position: relative;
}
.bonjour-je-m-appel-clara-dran-et-je-suis-web-designeur-depuis-6-mois-ayant-appris-en-auto-didact-tout-les-concepts-du-m-tier-j-ai-pour-projet-de-me-lancer-dans-le-grand-bain {
  text-align: center;
  font-family: "PlusJakartaSans-Light", sans-serif;
  font-size: 40px;
  letter-spacing: -0.02em;
  font-weight: 300;
  position: relative;
  align-self: stretch;
}
.bonjour-je-m-appel-clara-dran-et-je-suis-web-designeur-depuis-6-mois-ayant-appris-en-auto-didact-tout-les-concepts-du-m-tier-j-ai-pour-projet-de-me-lancer-dans-le-grand-bain-span {
  color: #858585;
}
.bonjour-je-m-appel-clara-dran-et-je-suis-web-designeur-depuis-6-mois-ayant-appris-en-auto-didact-tout-les-concepts-du-m-tier-j-ai-pour-projet-de-me-lancer-dans-le-grand-bain-span2 {
  color: #000000;
}
.frame-13213166292 {
  background: #f0efeb;
  border-radius: 200px;
  padding: 16px 30px 16px 30px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.arrow-23 {
  flex-shrink: 0;
  width: 25px;
  height: 12px;
  position: relative;
  overflow: visible;
}
.arrow-24 {
  flex-shrink: 0;
  width: 25px;
  height: 12px;
  position: relative;
  overflow: visible;
}
.section {
  background: #a793ac;
  padding: 40px 50px 40px 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316643 {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1339px;
  position: relative;
  overflow-x: auto;
}
.frame-1321316638 {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316633 {
  background: #ffffff;
  border-radius: 31px;
  padding: 40px 50px 40px 50px;
  display: flex;
  flex-direction: row;
  gap: 45px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1339px;
  position: relative;
}
.frame-1321316631 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  width: 431px;
  position: relative;
}
.title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316667 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.projet2 {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 100%;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  align-self: stretch;
}
.market-place {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 100px;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-weight: 500;
  position: relative;
  align-self: stretch;
}
.tags {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.tag {
  background: #a793ac;
  border-radius: 19.17px;
  padding: 5.9px 11.8px 5.9px 11.8px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.projet-personnel-ui-ux {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 600;
  position: relative;
}
.frame-1321316666 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.tag2 {
  border-radius: 19.17px;
  border-style: solid;
  border-color: #0b001a;
  border-width: 1px;
  padding: 5.9px 11.8px 5.9px 11.8px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.objectif-concevoir-une-interface-moderne-innovante {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
}
.tag3 {
  border-radius: 19.17px;
  border-style: solid;
  border-color: #0b001a;
  border-width: 1px;
  padding: 5.9px 11.8px 5.9px 11.8px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.r-le-recherche-utilisateur-wireframes-ui-design-prototype {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  flex: 1;
}
.content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.ce-projet-est-une-plateforme-de-mise-en-relation-d-di-e-aux-professionnels-de-l-audiovisuel-elle-permet-de-d-couvrir-des-talents-de-proposer-des-services-et-de-collaborer-facilement-sur-des-projets-cr-atifs-via-une-interface-claire-moderne-et-orient-e-exp-rience-utilisateur {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.image {
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 660px;
  height: 650.39px;
  position: relative;
}
.frame-1261153685 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 660px;
  height: 650px;
  position: relative;
}
.group-58 {
  flex-shrink: 0;
  width: 492.67px;
  height: 326px;
  position: static;
}
.frame-1261153684 {
  background: rgba(0, 0, 0, 0.19);
  border-radius: 11px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 492.67px;
  height: 326px;
  position: absolute;
  left: 83.67px;
  top: 162px;
}
.frame-1261153683 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  height: 306px;
  position: relative;
}
.frame-2525 {
  display: flex;
  flex-direction: row;
  gap: 11px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.ellipse-26 {
  background: #ff1e00;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}
.ellipse-27 {
  background: #f6f5f5;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}
.ellipse-28 {
  background: #1edf3f;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}
.rectangle-839 {
  border-radius: 10px;
  align-self: stretch;
  flex-shrink: 0;
  height: 272px;
  position: relative;
  object-fit: cover;
}
.lucide {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316634 {
  background: #ffffff;
  border-radius: 31px;
  padding: 40px 50px 40px 50px;
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1350px;
  height: 730.39px;
  position: relative;
}
.lucide2 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.r-seaux-social {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 100px;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-weight: 500;
  position: relative;
  align-self: stretch;
}
.frame-1321316668 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.objectif-cr-er-une-plateforme-sociale-intuitive-et-engageante {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  flex: 1;
}
.tag4 {
  border-radius: 19.17px;
  border-style: solid;
  border-color: #0b001a;
  border-width: 1px;
  padding: 5.9px 11.8px 5.9px 11.8px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 431px;
  position: relative;
}
.r-le-conception-des-interfaces-wireframes-et-prototypes-responsive {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  width: 407px;
}
.ce-projet-est-une-plateforme-sociale-d-di-e-aux-rencontres-permettant-de-connecter-des-personnes-partageant-les-m-mes-centres-d-int-r-t-gr-ce-une-interface-intuitive-et-moderne-l-exp-rience-est-pens-e-pour-tre-s-curis-e-engageante-et-ludique-favorisant-des-interactions-authentiques {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.image2 {
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 650.39px;
  position: relative;
}
.frame-1321316644 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316641 {
  border-radius: 28px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.18);
  border-width: 5px;
  padding: 11px 71px 11px 71px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 182px;
  height: 394px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.rectangle-4533 {
  background: #d9d9d9;
  border-radius: 15px;
  flex-shrink: 0;
  width: 39px;
  height: 10px;
  position: relative;
}
.frame-13213166432 {
  border-radius: 18px;
  border-style: solid;
  border-color: #d1d1d1;
  border-width: 3px;
  padding: 13px 41px 13px 41px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 122.24px;
  height: 265px;
  position: absolute;
  left: 127px;
  top: 162px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.lucide3 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316639 {
  background: #ffffff;
  border-radius: 31px;
  padding: 40px 50px 40px 50px;
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1350px;
  position: relative;
}
.lucide4 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-13213166312 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  width: 475px;
  position: relative;
}
.refonte-site-vitrine {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 100px;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-weight: 500;
  position: relative;
  align-self: stretch;
}
.tags2 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  row-gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.objectif-moderniser-le-site-le-rendre-plus-claire-ergonomique {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
}
.r-le-audit-ux-redesign-ui-cr-ation-de-maquettes-et-prototypes {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
}
.ce-projet-consiste-en-la-refonte-du-site-vitrine-d-une-salle-de-sport-avec-pour-objectif-de-le-moderniser-et-d-am-liorer-l-exp-rience-utilisateur-le-site-met-en-valeur-les-espaces-les-offres-et-les-abonnements-tout-en-facilitant-l-acc-s-aux-informations-essentielles {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.image3 {
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  height: 650.39px;
  position: relative;
  overflow: hidden;
}
.frame-12611536852 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 650px;
  position: relative;
}
.group-582 {
  flex-shrink: 0;
  width: 393px;
  height: 272px;
  position: static;
}
.frame-12611536842 {
  background: rgba(0, 0, 0, 0.19);
  border-radius: 11px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 393px;
  height: 272px;
  position: absolute;
  left: 32px;
  top: 189px;
}
.frame-12611536832 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  height: 252px;
  position: relative;
}
.rectangle-8392 {
  border-radius: 10px;
  align-self: stretch;
  flex-shrink: 0;
  height: 230px;
  position: relative;
  object-fit: cover;
}
.lucide5 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-13213166382 {
  background: #ffffff;
  border-radius: 31px;
  padding: 40px 50px 40px 50px;
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1350px;
  height: 730px;
  position: relative;
}
.lucide6 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.e-commerce {
  color: #0b001a;
  text-align: left;
  position: relative;
  align-self: stretch;
}
.e-commerce-span {
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 100px;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.e-commerce-span2 {
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.projet-personnel-e-commerce {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 600;
  position: relative;
}
.frame-1321316645 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.objectif-cr-er-une-boutique-en-ligne-intuitive-et-immersive {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
}
.r-le-ui-ux-designer-conception-des-interfaces-parcours-utilisateur-et-design-responsive {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  width: 417px;
}
.une-boutique-en-ligne-moderne-d-di-e-au-maquillage-et-aux-soins-beaut-offrant-une-exp-rience-intuitive-et-immersive-les-utilisateurs-peuvent-d-couvrir-comparer-et-acheter-facilement-des-produits-tendance-avec-un-design-l-gant-qui-refl-te-l-univers-de-la-marque {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-13213166433 {
  border-radius: 18px;
  border-style: solid;
  border-color: #d1d1d1;
  border-width: 3px;
  padding: 13px 0px 13px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 122.24px;
  height: 265px;
  position: absolute;
  left: 127px;
  top: 162px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.lucide7 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316640 {
  background: #ffffff;
  border-radius: 31px;
  padding: 40px 50px 40px 50px;
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1350px;
  height: 729px;
  position: relative;
}
.lucide8 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-13213166313 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  width: 460px;
  position: relative;
}
.agence-de-voyage {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 100px;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-weight: 500;
  position: relative;
  align-self: stretch;
}
.frame-1321316646 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.objectif-planifier-et-r-server-des-voyages-facilement-tout-en-offrant-une-exp-rience-immersive-et-engageante {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  flex: 1;
}
.r-le-ui-ux-designer-conception-des-interfaces-parcours-utilisateur-et-prototypes-responsive {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  flex: 1;
}
.un-site-vitrine-pens-pour-les-voyageurs-avec-une-interface-claire-et-moderne-qui-met-en-avant-destinations-offres-et-exp-riences-tout-en-rendant-la-navigation-simple-et-agr-able {
  color: #0b001a;
  text-align: left;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.image4 {
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  height: 650.39px;
  position: relative;
}
.frame-12611536843 {
  background: rgba(0, 0, 0, 0.19);
  border-radius: 11px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 492.67px;
  height: 326px;
  position: absolute;
  left: 54.17px;
  top: 162px;
}
.frame-13213166252 {
  background: #ffffff;
  border-radius: 200px;
  padding: 18px 30px 18px 30px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316623 {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  gap: 247px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 789px;
  position: relative;
}
.frame-2683 {
  display: flex;
  flex-direction: column;
  gap: 65px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 425px;
  height: 489px;
  position: relative;
}
.travaillons-ensemble {
  color: #000000;
  text-align: left;
  font-family: "Afacad-SemiBold", sans-serif;
  font-size: 48px;
  font-weight: 600;
  position: relative;
  width: 425px;
}
.frame-2682 {
  display: flex;
  flex-direction: column;
  gap: 45px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 218px;
  position: relative;
}
.frame-1321316624 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.clara-dran-gmail-com {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
}
._33-6-67-80-68-78 {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
}
.frame-13213166232 {
  background: #f0efeb;
  border-radius: 200px;
  padding: 12px 20px 12px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.t-l-charger-mon-cv {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
  position: relative;
}
.lucide-download {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-2684 {
  display: flex;
  flex-direction: column;
  gap: 55px;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 583px;
  position: relative;
}
.frame-2681 {
  display: flex;
  flex-direction: column;
  gap: 33px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-2680 {
  display: flex;
  flex-direction: row;
  gap: 21px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.nom {
  border-radius: 174px;
  border-style: solid;
  border-color: #b4b2b2;
  border-width: 1px;
  padding: 10px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 281px;
  height: 42px;
  position: relative;
}
.nom2 {
  color: #817e7e;
  text-align: left;
  font-family: "InriaSans-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.nom input {
  width: 100%;
  font-family: "InriaSans-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  outline: none;
}
.nom input::placeholder {
  color: #817e7e;
}
.pr-nom {
  border-radius: 174px;
  border-style: solid;
  border-color: #b4b2b2;
  border-width: 1px;
  padding: 10px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 281px;
  height: 42px;
  position: relative;
}
.pr-nom2 {
  color: #817e7e;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.pr-nom input {
  width: 100%;
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  outline: none;
}
.pr-nom input::placeholder {
  color: #817e7e;
}
.adresse-mall {
  border-radius: 174px;
  border-style: solid;
  border-color: #b4b2b2;
  border-width: 1px;
  padding: 10px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 42px;
  position: relative;
}
.adresse-mail {
  color: #817e7e;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.adresse-mall input {
  width: 100%;
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  outline: none;
}
.adresse-mall input::placeholder {
  color: #817e7e;
}
.t-l-phone {
  border-radius: 174px;
  border-style: solid;
  border-color: #b4b2b2;
  border-width: 1px;
  padding: 10px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 43px;
  position: relative;
}
.t-l-phone2 {
  color: #817e7e;
  text-align: left;
  position: relative;
}
.t-l-phone input {
  width: 100%;
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  outline: none;
}
.t-l-phone input::placeholder {
  color: #817e7e;
}
.t-l-phone-2-span {
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.t-l-phone-2-span2 {
  font-family: "Inter-Regular", sans-serif;
  font-size: 13px;
  font-weight: 400;
}
.message {
  border-radius: 17px;
  border-style: solid;
  border-color: #b4b2b2;
  border-width: 1px;
  padding: 15px 20px 15px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 147px;
  position: relative;
}
.laissez-moi-un-message {
  color: #817e7e;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.message textarea {
  width: 100%;
  height: 100%;
  font-family: "Inter-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  outline: none;
  resize: none;
}
.message textarea::placeholder {
  color: #817e7e;
}
.frame-26822 {
  background: #757069;
  border-radius: 200px;
  padding: 20px 40px 20px 40px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.me-contacter2 {
  color: #ffffff;
  text-align: center;
  font-family: "Afacad-SemiBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.frame-2674 {
  background: #757069;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 200px;
  height: 61px;
  position: absolute;
  left: -255px;
  top: 0px;
}
.me-contacter3 {
  color: #ffffff;
  text-align: center;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  width: 120px;
}
.frame-13213166242 {
  background: #f0efeb;
  padding: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.clara-dran-web-designeur {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
}
.frame-16 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1261153687 {
  display: flex;
  flex-direction: row;
  gap: 36px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-2647 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.accueil2 {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
}
.frame-2650 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-2648 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.projet3 {
  color: #000000;
  text-align: left;
  font-family: "Afacad-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
}
.frame-2651 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-1321316619 {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.copyright {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  position: relative;
  overflow: visible;
}
._2026-clara-dran-tous-droits-r-serv-s {
  color: #000000;
  text-align: left;
  font-family: "Baloo2-Medium", sans-serif;
  font-size: 13px;
  font-weight: 500;
  position: relative;
}