.portfolio,
.portfolio * {
  box-sizing: border-box;
}
.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;
  opacity: 0;
  flex-shrink: 0;
  width: 1px;
  height: 0px;
  position: relative;
}
.frame-1321316629 {
  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-1321316692 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow-x: auto;
}
.frame-1321316653 {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.frame-1321316652 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1440px;
  position: relative;
  overflow: hidden;
}
.frame-1321316651 {
  padding: 50px 50px 60px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 621px;
  position: relative;
}
.frame-1321316676 {
  display: flex;
  flex-direction: row;
  gap: 71px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.bouton-prendre-un-rendez-vous-orange {
  border-radius: 200px;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
  padding: 10px 20px 10px 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.arrow-10 {
  flex-shrink: 0;
  width: 23px;
  height: 0px;
  position: relative;
  overflow: visible;
}
.retour {
  color: #000000;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.frame-1321316648 {
  display: flex;
  flex-direction: row;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-1321316683 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-1321316654 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  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: "PlusJakartaSans-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 {
  color: #000000;
  text-align: left;
  font-family: "PlusJakartaSans-Regular", sans-serif;
  font-size: 20px;
  line-height: 130%;
  letter-spacing: 0.07em;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.lucide {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316677 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 12px;
  position: relative;
}
.ellipse-31 {
  background: #000000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
  aspect-ratio: 1;
}
.ellipse-29 {
  background: #dedede;
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: relative;
  aspect-ratio: 1;
}
.ellipse-30 {
  background: #dedede;
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: relative;
  aspect-ratio: 1;
}
.ellipse-32 {
  background: #dedede;
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: relative;
  aspect-ratio: 1;
}
.ellipse-33 {
  background: #dedede;
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: relative;
  aspect-ratio: 1;
}
.ellipse-34 {
  background: #dedede;
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: relative;
  aspect-ratio: 1;
}
.frame-13213166762 {
  background: #fbfbfb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1440px;
  position: relative;
  overflow: hidden;
}
.frame-13213166522 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  height: 621px;
  position: relative;
  overflow: hidden;
}
.frame-13213166512 {
  padding: 50px 50px 60px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  height: 621px;
  position: relative;
}
.frame-1321316685 {
  display: flex;
  flex-direction: column;
  gap: 71px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.lucide2 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316684 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.lucide3 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.ellipse-312 {
  background: #dedede;
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: relative;
  aspect-ratio: 1;
}
.ellipse-292 {
  background: #000000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
  aspect-ratio: 1;
}
.frame-13213166772 {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1440px;
  height: 621px;
  position: relative;
  overflow: hidden;
}
.frame-13213166523 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.frame-13213166482 {
  display: flex;
  flex-direction: row;
  gap: 71px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.lucide4 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316688 {
  display: flex;
  flex-direction: row;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-1321316686 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.lucide5 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.ellipse-302 {
  background: #000000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
  aspect-ratio: 1;
}
.frame-1321316678 {
  background: #fbfbfb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1440px;
  height: 621px;
  position: relative;
  overflow: hidden;
}
.frame-13213166524 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 621px;
  position: relative;
  overflow: hidden;
}
.lucide6 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316687 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.lucide7 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.ellipse-322 {
  background: #000000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
  aspect-ratio: 1;
}
.frame-1321316679 {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1440px;
  height: 621px;
  position: relative;
  overflow: hidden;
}
.lucide8 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1321316689 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.lucide9 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.ellipse-332 {
  background: #000000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
  aspect-ratio: 1;
}
.frame-1321316680 {
  background: #fbfbfb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1440px;
  position: relative;
  overflow: hidden;
}
.lucide10 {
  border-radius: 65px;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-13213166483 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.ellipse-342 {
  background: #000000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
  aspect-ratio: 1;
}
.frame-1321316691 {
  padding: 40px 10px 40px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 831px;
  position: relative;
}
.frame-1321316694 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.desktop-3-2-1 {
  border-radius: 47px;
  flex-shrink: 0;
  width: 674px;
  height: 744.73px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 674/744.73;
}
.desktop-4-3-1 {
  margin: 0 0 0 -420px;
  border-radius: 38px;
  flex-shrink: 0;
  width: 963px;
  height: 560px;
  position: relative;
  object-fit: cover;
}
.frame-1261153632 {
  padding: 70px 220px 70px 220px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1261153631 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 429px;
  position: relative;
}
.title {
  color: #000000;
  text-align: left;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 32px;
  line-height: 140.63%;
  font-weight: 700;
  position: relative;
  align-self: stretch;
}
.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-13213166292 {
  background: #9a9393;
  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: #ffffff;
  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: 0px;
  position: relative;
  overflow: visible;
}
.frame-1321316630 {
  background: #a793ac;
  border-radius: 200px;
  padding: 14px 30px 14px 30px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 53px;
  position: absolute;
  left: -260px;
  top: 0px;
}
.arrow-22 {
  flex-shrink: 0;
  width: 25px;
  height: 0px;
  position: relative;
  overflow: visible;
}
.frame-13213166252 {
  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;
}
.projet2 {
  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;
}