.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Brittany";
  src: url(./Fonts/Brittany/brittany_signature/BrittanySignatureScript.ttf);
}

@font-face {
  font-family: "Nunito";
  src: url(./Fonts/Nunito/static/Nunito-Black.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1rem;
  font-family: "Kanit", Tahoma, Geneva, Verdana, sans-serif;
  /* outline: 1px solid red; */
}

li {
  list-style: none;
}

h1 {
  font-style: none;
}

h2 {
  font-style: none;
}

body {
  height: 100vh;
  background-color: #eee9df;
  background-size: cover;
  background-position: center;
  margin: 0;
  /* overflow-y: hidden; */
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
}

/* -------------------- HEADER -------------------- */

header {
  width: 100vw;
  position: relative;
}

/* ----- NAVBAR ----- */

.navbar {
  width: 100%;
  display: flex;
  align-items: center;
  display: block;
  height: 10vh;
  margin-top: 3vh;
  background-color: #eee9df;
}

.navbar.open {
  display: none;
}

.navbar .links {
  width: 100%;
  display: flex;
  gap: 2rem;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 1.5% 20% 1.5% 20%;
  z-index: 20;
}

.navbar .links a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 1.8rem;
  transition: 0.3s;
  z-index: 20;
  font-family: "Anton";
}

.navbar .links .divider {
  height: 3px;
  background-color: black;
  width: 0;
  border-radius: 3px;
  transition: 0.3s;
}

.navbar .links a:hover + .divider {
  width: 100%;
}

/* -------------------- MAIN -------------------- */

/* ----- HOME ----- */

.home-page {
  height: 100vh;
  width: 100vw;
  top: 0vh;
  position: fixed;
  background-color: transparent;
  transition: 0.7s;
  opacity: 1;
  display: flex;
  justify-content: end;
  align-items: center;
  z-index: 100;
}

.home-page.open {
  opacity: 0;
  pointer-events: none;
}

[class*="rideau"] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50vw;
  transition: 0.5s;
  pointer-events: none;
  transform: translateX(0%);
}

.rideaudroite img {
  width: 102%;
  height: 105%;
}

.rideaugauche img {
  height: 105%;
  width: 102%;
}

.rideaudroite.open {
  transform: translateX(-100%);
}

.rideaugauche.open {
  transform: translateX(100%);
}

.hp-rd-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.hp-image {
  background-color: rgb(255, 255, 255);
  width: 60%;
  aspect-ratio: 12/16;
  border-radius: 70px;
  display: flex;
  justify-content: center;
  align-items: end;
  border: 8px solid white;
}

.hp-image img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 62px;
}

.hp-rg-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.hp-text {
  width: 60%;
  height: 15%;
  border-radius: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 8px solid white;
  background-color: rgb(255, 255, 255);
}

.hp-text span {
  font-family: "Anton";
  font-size: 3em;
  line-height: 1.3;
  margin-left: 3%;
}

.home-page .hp-button {
  background-color: rgb(192, 192, 192);
  border-radius: 50%;
  width: 8%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Le SVG dépasse légèrement pour faire un cercle autour */
.circle-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg); /* pour commencer en haut */
  pointer-events: none;
}

/* Le cercle */
.progress-ring {
  fill: none;
  stroke: white; /* couleur du cercle */
  stroke-width: 6;
  stroke-linecap: round; /* joli début */
  stroke-dasharray: 0 1000; /* on anime ça */
  transition: stroke-dasharray 2s linear;
  opacity: 0; /* invisible tant que pas hold */
}

/* Quand on tient le bouton */
.hp-button.holding .progress-ring {
  opacity: 1;
}

/* ----- PORTFOLIO ----- */

.portfolio-page {
  height: 100vh;
  width: 100vw;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee9df;
  transition: 0.8s;
  transform: translateX(0);
}

.portfolio-page.open {
  display: none;
}

[class*="-wall"] {
  display: contents;
}

[class*="-wall"] img {
  width: 100%;
  height: 100%;
  z-index: 0;
  position: absolute;
  pointer-events: none;
}

.pp-direction-arrow {
  display: contents;
}

.pp-direction-arrow [class*="ppda-"] {
  width: 6%;
  aspect-ratio: 1.5/1;
  /* border: #c2bdb6 6px solid; */
  position: absolute;
  border-radius: 30px;
  top: 56%;
  margin: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: pointer;
  background-color: rgba(255, 166, 0, 0.511);
}

.pp-direction-arrow [class*="ppda-"]:hover {
  background-color: rgb(255, 166, 0);
  box-shadow:
    3px -3px 2px 0px rgba(30, 30, 30, 0.5),
    inset 3px -3px 2px 0px rgba(255, 255, 255, 0.5);
}

.pp-direction-arrow [class*="ppda-"]:hover svg {
  color: black;
}

.pp-direction-arrow [class*="ppda-"] svg {
  position: relative;
  right: 0%;
  width: 50%;
  height: 100%;
  color: rgb(59, 59, 59);
}

.pp-direction-arrow .ppda-about {
  right: 0;
  transform: rotate(180deg);
}

.pp-direction-arrow .ppda-contact {
  left: 0;
  transform: rotate(180deg);
}

/* ----- CARDS ----- */

.portfolio-page .pp-cards {
  height: 75%;
  width: 75%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 50% 50%;
  grid-template-areas:
    "c1 c2 c3 c4"
    "c5 c5 c5 c5";
  position: relative;
  margin: 0 2% 0 2%;
}

.pp-cards li:nth-child(1) {
  grid-area: c1;
}
.pp-cards li:nth-child(2) {
  grid-area: c2;
}
.pp-cards li:nth-child(3) {
  grid-area: c3;
}
.pp-cards li:nth-child(4) {
  grid-area: c4;
}
.ppcpc-domaine-carousel {
  grid-area: c5;
}

.portfolio-page .pp-cards ul {
  display: contents;
}

.portfolio-page .pp-cards ul li {
  background-color: rgb(255, 255, 255);
  width: 65%;
  height: 79%;
  border-radius: 15px;
  margin: 14% 5%;
  position: relative;
  top: 0%;
  left: 15%;
  /* transform: translate(-50%, -50%); */
  border: solid 3px black;
  box-shadow: -7px 7px 5px 0 #757171bd;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.portfolio-page .pp-cards ul .ppcpc-domaine-carousel li {
  width: 100%;
  height: 95%;
  left: 0;
  margin: 0% 5%;
}

.portfolio-page .pp-cards [class*="ppc-frame-"] {
  display: contents;
}

.portfolio-page .pp-cards li [class^="ppc-frame-"] [class^="ppcf-inner-"] {
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

[class^="ppcf-front-"],
[class^="ppcf-back-"] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s;
}

.portfolio-page .pp-cards li [class*="ppcf-f-image-"] {
  width: 92%;
  aspect-ratio: 1/1;
  background-color: rgb(255, 255, 255);
  position: relative;
  left: 4%;
  top: 2%;
  border-radius: 8px;
}

.portfolio-page .pp-cards li [class*="ppcf-f-image-"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* TITLES */

.portfolio-page .pp-cards li [class*="ppcf-f-text-"] {
  width: 92%;
  height: 30%;

  position: relative;
  top: 4.5%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.portfolio-page .pp-cards li [class*="ppcf-f-text-"] span {
  display: block;
  font-family: "Anton";
  font-size: 1.2em;
  line-height: 1.3;
  margin-left: 3%;
  color: rgb(33, 33, 33);
}

/* TITLES SPE */

.portfolio-page .pp-cards .ppc-draw .ppcf-f-text-d span:nth-child(1) {
  opacity: 0;
}

.portfolio-page .pp-cards .ppc-model .ppcf-f-text-m span:nth-child(1) {
  opacity: 0;
}

.portfolio-page .pp-cards [class*="ppcf-f-dots-"] {
  width: 35%;
  height: 6%;

  position: relative;
  top: -21.8%;
  left: 55%;
  display: flex;
  gap: 5%;
  justify-content: space-around;
}

.portfolio-page .pp-cards [class*="ppcf-f-dots-"] span {
  aspect-ratio: 1/1;
  height: 100%;
  background-color: black;
}

/* ----- BACK ----- */

.portfolio-page .pp-cards [class^="ppcf-back-"] {
  background: #ffffff;
  color: rgb(0, 0, 0);

  padding: 1em;
  transform: rotateY(180deg);
}

/* TITLES */

.portfolio-page .pp-cards li [class*="ppcf-b-text-"] {
  width: 92%;
  height: 30%;

  position: relative;
  top: 0%;
  left: 45%;
  transform: translate(-50%, 0%);
}

.portfolio-page .pp-cards li [class*="ppcf-b-text-"] span {
  display: block;
  font-family: "Anton";
  font-size: 1.3rem;
  line-height: 1.3;
  margin-left: 3%;
}

/* LINES */

.portfolio-page .pp-cards li [class*="ppcf-b-line-"] {
  width: 95%;
  height: 2px;
  background-color: black;
  border-radius: 2px;
}

/* TEXT 2 */

.portfolio-page .pp-cards li [class*="ppcf-b-text2-"] {
  width: 92%;
  height: auto;
  margin-top: 3%;
  margin-left: 3%;
}

.portfolio-page .pp-cards li [class*="ppcf-b-text2-"] span {
  color: rgb(25, 25, 25);
  font-size: 70%;

  font-family: "Inter", sans-serif;
  text-align: justify;
  text-justify: inter-word;
}

/* SPE */

.portfolio-page .pp-cards li .ppcf-b-line-d,
.portfolio-page .pp-cards li .ppcf-b-line-m,
.portfolio-page .pp-cards li .ppcf-b-line-p {
  position: relative;
  top: -15%;
}

.portfolio-page .pp-cards li .ppcf-b-text2-d,
.portfolio-page .pp-cards li .ppcf-b-text2-m,
.portfolio-page .pp-cards li .ppcf-b-text2-p {
  position: relative;
  top: -15%;
}

/* DISCOVER */

.portfolio-page .pp-cards li [class*="ppcf-b-discover-"] {
  width: 50%;
  height: 15%;
  background-color: rgba(255, 166, 0, 0.511);
  bottom: 6%;
  left: 40%;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: pointer;
  position: absolute;
}

.portfolio-page .pp-cards li [class*="ppcf-b-discover-"]:hover {
  transform: scale(1.1);
  background-color: rgb(255, 166, 0);
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.portfolio-page .pp-cards li [class*="ppcf-b-discover-"]:hover h1 {
  color: black;
}

.portfolio-page .pp-cards li [class*="ppcf-b-discover-"] h1 {
  color: rgb(59, 59, 59);
  font-family: "Anton";
  font-size: 0.9rem;
}

.portfolio-page .pp-cards li [class*="ppcf-b-discover-"]:hover span {
  color: black;
}

.portfolio-page .pp-cards li [class*="ppcf-b-discover-"] span {
  color: rgb(59, 59, 59);
  font-family: "Anton";
  font-size: 0.9rem;
}

.pp-cards li:hover {
  transform: rotateY(180deg);
  box-shadow: 7px 7px 5px 0 #757171bd;
}

.ppc-back {
  z-index: 15;
  width: 100%;
  height: 100%;
  background-color: #7571713b;
  backdrop-filter: blur(10px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.ppc-back.open {
  display: flex;
}

.ppc-active-back {
  z-index: 15;
  width: 100%;
  height: 100%;
  background-color: #7571713b;
  backdrop-filter: blur(10px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

/* CONTENT PAGES */

[class*="ppc-page-"] {
  z-index: 20;
  display: none;
  border: solid 4px rgb(100, 100, 100);
  background-color: #eee9df;
  position: absolute;
  width: 95%;
  height: 95%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  overflow: hidden;
}

[class*="ppc-page-"].open,
.ppc-page-s,
.ppc-page-d,
.ppc-page-i,
.ppc-page-p,
.ppc-page-pr,
.ppc-page-3,
.ppc-page-m,
.ppc-page-ml {
  display: flex;
  justify-content: center;
}

[class*="ppcp-content-"] {
  width: 100%;
  scroll-behavior: smooth;
  overflow-y: auto;
  z-index: 20;
  font-family: "Inter", sans-serif;
  /* min-height: 100%; */
  min-height: 96vh;
}

.ppcp-content-d,
.ppcp-content-pr,
.ppcp-content-f,
.ppcp-content-3,
.ppcp-content-p {
  min-height: 90vh;
}

[class*="ppcp-return-"] {
  height: 70%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgb(255, 166, 0);
  margin-right: 3%;
  transition: 0.3s;
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

[class*="ppcp-return-"]:hover {
  box-shadow:
    inset -3px 3px 2px 0px rgba(0, 0, 0, 0.279),
    inset 3px -3px 2px 0px rgba(255, 255, 255, 0.273);
}

[class*="ppcp-return-"] svg {
  height: 60%;
  width: 60%;
  color: rgb(59, 59, 59);
}

[class*="ppcp-return-"]:hover svg {
  color: rgba(59, 59, 59, 0.81);
}

[class*="ppcp-header-"] {
  background-color: rgb(59, 59, 59);
  width: 95%;
  height: 20vh;
  margin: 2.5%;
  border-radius: 40px;
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.344);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* TITLES */

[class*="ppcpc-title-"] {
  margin-left: 3%;
}

[class*="ppcpc-title-"] h1 {
  font-size: 5rem;
  color: #eee9df;
  font-family: "Anton";
}

body.lock-scroll {
  overflow: hidden;
}

[class*="ppcpc-text"] span {
  color: rgb(59, 59, 59);
  font-family: "Anton";
}

[class*="ppcp-footer-"] {
  height: 10vh;
  width: 100%;
  position: relative;
  bottom: -2%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.ppcp-up {
  clip-path: inset(0 0 50% 0);
  height: 200%;
  aspect-ratio: 1/1;
  background-color: rgb(255, 166, 0);
  border-radius: 50%;
  box-shadow: inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.ppcp-up:hover {
  box-shadow:
    inset -3px 3px 2px 0px rgba(0, 0, 0, 0.279),
    inset 3px -3px 2px 0px rgba(255, 255, 255, 0.273);
}

.ppcp-up svg {
  position: relative;
  top: 8%;
  height: 50%;
  width: 50%;
  color: rgb(59, 59, 59);
}

.ppcp-up:hover svg {
  color: rgba(59, 59, 59, 0.81);
}

/* TEMPLATE PROJET */

[class*="ppcpc-context-"],
[class*="ppcpc-objectif-"],
[class*="ppcpc-processus-"],
[class*="ppcpc-resultat-"],
[class*="ppcpc-appris-"],
[class*="ppcpc-outil-"] {
  display: flex;
  justify-content: start;
  flex-direction: column;
}

[class*="ppcpc-context-"] {
  grid-area: co;
}
[class*="ppcpc-objectif-"] {
  grid-area: ob;
}
[class*="ppcpc-processus-"] {
  grid-area: po;
  padding: 0;
  margin: 0;
}
[class*="ppcpc-resultat-"] {
  grid-area: re;
}
[class*="ppcpc-appris-"] {
  grid-area: ap;
}
[class*="ppcpc-outil-"] {
  grid-area: ou;
}

[class*="ppcpc-c-title-"],
[class*="ppcpc-o-title-"],
[class*="ppcpc-p-title-"],
[class*="ppcpc-r-title-"],
[class*="ppcpc-a-title-"],
[class*="ppcpc-u-title-"] {
  height: auto;
  width: 100%;
}

[class*="ppcpc-c-title-"],
[class*="ppcpc-p-title-"],
[class*="ppcpc-r-title-"],
[class*="ppcpc-a-title-"] {
  margin-left: 100px;
}

[class*="ppcpc-c-title-"] span,
[class*="ppcpc-o-title-"] span,
[class*="ppcpc-p-title-"] span,
[class*="ppcpc-r-title-"] span,
[class*="ppcpc-a-title-"] span,
[class*="ppcpc-u-title-"] span {
  font-family: "Anton";
  color: rgb(59, 59, 59);
  font-size: 1.7rem;
}

[class*="ppcpc-c-line-"],
[class*="ppcpc-o-line-"],
[class*="ppcpc-p-line-"],
[class*="ppcpc-r-line-"],
[class*="ppcpc-a-line-"],
[class*="ppcpc-u-line-"] {
  width: 75%;
  height: 2px;
  background-color: black;
  border-radius: 2px;
}

[class*="ppcpc-c-line-"],
[class*="ppcpc-p-line-"],
[class*="ppcpc-r-line-"],
[class*="ppcpc-a-line-"] {
  margin-left: 100px;
}

[class*="ppcpc-p-line-"],
[class*="ppcpc-r-line-"] {
  width: 78.5%;
}

[class*="ppcpc-c-content-"] span,
[class*="ppcpc-o-content-"] span,
[class*="ppcpc-p-content-"] span,
[class*="ppcpc-r-content-"] span,
[class*="ppcpc-a-content-"] span,
[class*="ppcpc-u-content-"] span {
  text-align: justify;
  text-justify: inter-word;
  font-family: "Inter", sans-serif;
  color: rgb(59, 59, 59);
}

[class*="ppcpc-c-content-"],
[class*="ppcpc-a-content-"] {
  margin-left: 130px;
  margin-top: 10px;
  width: 70%;
}

[class*="ppcpc-o-content-"],
[class*="ppcpc-u-content-"] {
  margin-left: 30px;
  margin-top: 10px;
  width: 70%;
}

[class*="ppcpc-a-content-"] li,
[class*="ppcpc-o-content-"] li {
  list-style: disc;
  list-style-position: outside;
}

[class*="ppcpc-p-content-"] img,
[class*="ppcpc-r-content-"] img,
[class*="ppcpc-p-content-"] video,
[class*="ppcpc-r-content-"] video {
  transition: 0.2s;
}

[class*="ppcpc-p-content-"] img:hover,
[class*="ppcpc-r-content-"] img:hover,
[class*="ppcpc-p-content-"] video:hover,
[class*="ppcpc-r-content-"] video:hover {
  transform: scale(102%);
}

[class*="ppcpc-p-content-"] {
  position: relative;
  top: 3.8%;
  margin-left: 130px;
  margin-top: 10px;
  width: 73%;
  height: 94%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas:
    "un"
    "de"
    "tr"
    "qu";
}

[class*="ppcpc-p-c-"] {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

[class*="ppcpc-p-1-img"],
[class*="ppcpc-p-2-img"],
[class*="ppcpc-p-3-img"],
[class*="ppcpc-p-4-img"] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

[class*="ppcpc-p-1-img"] img,
[class*="ppcpc-p-2-img"] img,
[class*="ppcpc-p-3-img"] img,
[class*="ppcpc-p-4-img"] img,
[class*="ppcpc-p-1-img"] video,
[class*="ppcpc-p-2-img"] video,
[class*="ppcpc-p-3-img"] video,
[class*="ppcpc-p-4-img"] video {
  border-radius: 20px;
}

[class*="ppcpc-p-1-text"],
[class*="ppcpc-p-2-text"],
[class*="ppcpc-p-3-text"],
[class*="ppcpc-p-4-text"] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

[class*="ppcpc-r-content-"] {
  height: 95%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

[class*="ppcpc-u-content-"] {
  position: relative;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 90% 10%;
  grid-template-areas:
    "i1 i2 i3 i4"
    "t1 t2 t3 t4";
}

[class*="ppcpc-u-icon-"] {
  background-color: rgb(238, 238, 238);
  width: 80%;
  aspect-ratio: 1/1;
  margin: 10%;
  margin-top: 0;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

[class*="ppcpc-u-icon-"] img {
  width: 60%;
  height: auto;
}

[class*="ppcpc-u-text-"] {
  display: flex;
  justify-content: center;
  align-items: center;
}

[class*="ppcpc-u-text-"] span {
  font-family: "Inter", sans-serif;
  color: rgb(59, 59, 59);
}

[class*="ppcpc-u-img-1-"] {
  grid-area: i1;
}
[class*="ppcpc-u-text-1-"] {
  grid-area: t1;
}
[class*="ppcpc-u-img-2-"] {
  grid-area: i2;
}
[class*="ppcpc-u-text-2-"] {
  grid-area: t2;
}
[class*="ppcpc-u-img-3-"] {
  grid-area: i3;
}
[class*="ppcpc-u-text-3-"] {
  grid-area: t3;
}
[class*="ppcpc-u-img-4-"] {
  grid-area: i4;
}
[class*="ppcpc-u-text-4-"] {
  grid-area: t4;
}

/* ----- SCHOOL PROJECT ----- */

.ppc-s-project {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-s span:nth-child(1) {
  background-color: rgb(194, 190, 190);
}
.portfolio-page .pp-cards .ppcf-f-dots-s span:nth-child(2) {
  background-color: rgb(63, 60, 60);
}
.portfolio-page .pp-cards .ppcf-f-dots-s span:nth-child(3) {
  background-color: rgb(243, 120, 59);
}

/* CONTENT */

.ppcpc-s-1 {
  /* border: 1px red solid; */
  position: relative;
  width: 100%;
  height: 270vh;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 9% 28% 28% 26% 9%;
  grid-template-areas:
    "co ob"
    "po po"
    "po po"
    "re re"
    "ap ou";
}

/* PROCESSUS */

/* 1 */

.ppcpc-p-1-text-s-1 span {
  margin-right: 28%;
  margin-left: 6%;
}

.ppcpc-p-1-img-s-1 img {
  width: 52%;
  top: 15%;
}

.ppcpc-p-1-img-s-1 {
  justify-content: center;
}

/* 2 */

.ppcpc-p-2-img-s-1 {
  display: flex;
  justify-content: end;
}

.ppcpc-p-2-img-s-1 img {
  width: 120%;
}

.ppcpc-p-2-text-s-1 span {
  margin-right: 48%;
  margin-left: 8%;
}
/* 3 */

.ppcpc-p-3-img-s-1 {
  display: flex;
  justify-content: start;
  padding-left: 15%;
}

.ppcpc-p-3-img-s-1 video {
  width: 57%;
  top: -10%;
}

.ppcpc-p-3-text-s-1 span {
  margin-right: 22%;
  margin-left: 0%;
  margin-bottom: 10%;
}

/* 4 */

.ppcpc-p-4-img-s-1 {
  display: flex;
  justify-content: start;
  padding-bottom: 30%;
  padding-left: 27%;
}

.ppcpc-p-4-img-s-1 img {
  height: 100%;
}

.ppcpc-p-4-text-s-1 span {
  margin-right: 48%;
  margin-left: 8%;
}

/* RESULTAT */

.ppcpc-r-content-s-1 video {
  height: 80%;
  aspect-ratio: 16/9;
  border-radius: 20px;
  position: absolute;
}

.ppcpc-r-content-s-1 video:nth-child(1).open {
  display: none;
}

.ppcpc-r-content-s-1 video:nth-child(2) {
  display: none;
}

.ppcpc-r-content-s-1 video:nth-child(2).open {
  display: block;
}

.ppcpc-r-c-btnst-s-1 {
  position: absolute;
  width: 5%;
  aspect-ratio: 1/1;
  background-color: rgba(255, 166, 0, 0.511);
  right: 8%;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ppcpc-r-c-btnst-s-1:hover {
  transform: scale(1.1);
  background-color: rgb(255, 166, 0);
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.ppcpc-r-c-btnst-s-1 svg {
  color: rgb(59, 59, 59);
}

.ppcpc-r-c-btnst-s-1:hover svg {
  color: black;
}

.icon-s-subtitle-1 {
  display: block;
  color: rgb(59, 59, 59);
  width: 55%;
  aspect-ratio: 1/1;
}

.icon-s-subtitle-1.open {
  display: none;
}

.icon-s-subtitle-2 {
  color: rgb(59, 59, 59);
  width: 55%;
  aspect-ratio: 1/1;
  display: none;
}

.icon-s-subtitle-2.open {
  display: block;
}

/* OUTIL */

.ppcpc-u-icon-3-s-1 img {
  width: 95%;
}

/* ----- DRAW ----- */

.ppc-draw {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-d span:nth-child(1) {
  background-color: rgb(176, 176, 176);
}
.portfolio-page .pp-cards .ppcf-f-dots-d span:nth-child(2) {
  background-color: rgb(63, 60, 60);
}
.portfolio-page .pp-cards .ppcf-f-dots-d span:nth-child(3) {
  background-color: rgb(112, 111, 111);
}

/* CONTENT */

.ppcpc-d-1 {
  display: grid;
  height: 120%;
  width: 100%;
  position: relative;
  /* border: 1px red solid; */
  grid-template-columns: 65% 35%;
  grid-template-rows: 80% 20%;
  grid-template-areas:
    "ca t1"
    "t2 t2";
  font-family: "Nunito";
}

.ppcpc-carousel-d-1 .carousel {
  grid-area: ca;
  top: 3%;
  left: 26%;
  position: relative;
  width: 48%;
  height: 27%;

  /* overflow: hidden; */
}
/* .carousel {
  width: min(900px, 92vw);
} */

.ppcpc-carousel-d-1 .carousel-stage {
  position: relative;
  aspect-ratio: 9/13; /* hauteur automatique selon largeur */
  perspective: 1200px;
  user-select: none;
}

.ppcpc-carousel-d-1 .slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 82%;
  transform: translate(-50%, -50%);
  transition:
    transform 0.55s ease,
    opacity 0.55s ease,
    filter 0.55s ease;
  /* pointer-events: none; */
  cursor: pointer;
  z-index: 1;
  opacity: 0; /* par défaut invisible, le JS force l’état */
}

.ppcpc-carousel-d-1 .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50px;
  display: block;
}

.ppcpc-carousel-d-1 .dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.ppcpc-carousel-d-1 .dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgb(59, 59, 59);
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.9;
}

.ppcpc-carousel-d-1 .dots button[aria-selected="true"] {
  background: rgb(59, 59, 59);
}

.ppcpc-text1-d-1 {
  grid-area: t1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: red solid 1px; */
}

.ppcpc-text1-d-1 span {
  margin: 13%;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Inter", sans-serif;
}

.ppcpc-text2-d-1 {
  grid-area: t2;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: red solid 1px; */
}

.ppcpc-text2-d-1 span {
  margin: 8%;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Inter", sans-serif;
}

/* ----- IDENTITE VISUELLE ----- */

.ppc-identity {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-i span:nth-child(1) {
  background-color: #5e4b3b;
}
.portfolio-page .pp-cards .ppcf-f-dots-i span:nth-child(2) {
  background-color: #2d4530;
}
.portfolio-page .pp-cards .ppcf-f-dots-i span:nth-child(3) {
  background-color: #3c3c3c;
}

/* CONTENT */

.ppcpc-i-1 {
  /* border: 1px red solid; */
  position: relative;
  width: 100%;
  height: 270vh;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 9% 28% 28% 26% 9%;
  grid-template-areas:
    "co ob"
    "po po"
    "po po"
    "re re"
    "ap ou";
}

/* OUTIL */

.ppcpc-u-icon-1-i-1 img {
  width: 80%;
}

.ppcpc-u-icon-2-i-1 img {
  width: 43%;
}

.ppcpc-u-icon-3-i-1 img {
  width: 95%;
}

/* ----- MODEL ----- */

.ppc-model {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-m span:nth-child(1) {
  background-color: rgb(77, 68, 61);
}
.portfolio-page .pp-cards .ppcf-f-dots-m span:nth-child(2) {
  background-color: rgb(92, 118, 92);
}
.portfolio-page .pp-cards .ppcf-f-dots-m span:nth-child(3) {
  background-color: rgb(214, 197, 141);
}

/* ----- C 3D ----- */

.ppc-3d-c {
  display: contents;
}

.ppc-minimal-phone {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-3 span:nth-child(1) {
  background-color: rgb(181, 181, 179);
}
.portfolio-page .pp-cards .ppcf-f-dots-3 span:nth-child(2) {
  background-color: rgb(227, 183, 88);
}
.portfolio-page .pp-cards .ppcf-f-dots-3 span:nth-child(3) {
  background-color: rgb(175, 207, 137);
}

/* CONTENT */

.ppcpc-3-1 {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 2%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  grid-template-areas:
    "i1 t1"
    "t2 i2";
}

.ppcpc-image1-3-1 {
  grid-area: i1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.ppcpc-image1-3-1 img {
  width: 90%;
  aspect-ratio: 16/9;
  border-radius: 50px;
}

.ppcpc-text1-3-1 {
  grid-area: t1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ppcpc-text1-3-1 span {
  font-family: "Inter", sans-serif;
  color: rgb(59, 59, 59);
  margin: 13%;
  text-align: justify;
  text-justify: inter-word;
}

.ppcpc-text2-3-1 {
  grid-area: t2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ppcpc-text2-3-1 span {
  font-family: "Inter", sans-serif;
  color: rgb(59, 59, 59);
  margin: 13%;
  text-align: justify;
  text-justify: inter-word;
}

.ppcpc-image2-3-1 {
  grid-area: i2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.ppcpc-image2-3-1 img {
  width: 90%;
  aspect-ratio: 16/9;
  border-radius: 50px;
}

/* ----- PHOTO ----- */

.ppc-photo {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-p span:nth-child(1) {
  background-color: rgb(238, 198, 157);
}
.portfolio-page .pp-cards .ppcf-f-dots-p span:nth-child(2) {
  background-color: rgb(114, 35, 35);
}
.portfolio-page .pp-cards .ppcf-f-dots-p span:nth-child(3) {
  background-color: rgb(148, 203, 218);
}

/* CONTENT */

.ppcpc-p-1 {
  width: 100%;
  height: 150vh;
  position: relative;
  top: 2%;
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr; */
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-areas:
    "i1 i2 i3 t1"
    "t2 i4 i5 i6"
    "i7 i8 i9 t3";
}

[class*="ppcpc-image-p-1-"] img {
  width: 80%;
  border-radius: 30px;
  aspect-ratio: 9/13;
  box-shadow: -3px 3px 2px 0px rgba(0, 0, 0, 0.5);
  /* object-fit: cover; */
}

[class*="ppcpc-text-p-1-"] span {
  margin: 13%;
  text-align: justify;
  text-justify: inter-word;
}

/* [class*=".ppcpc-image-p-1-"] {
  display: flex;
  justify-content: center;
  align-items: center;
} */

.ppcpc-image-p-1-1 {
  grid-area: i1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-2 {
  grid-area: i2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-3 {
  grid-area: i3;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-text-p-1-1 {
  grid-area: t1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-4 {
  grid-area: i4;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-5 {
  grid-area: i5;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-6 {
  grid-area: i6;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-text-p-1-2 {
  grid-area: t2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-7 {
  grid-area: i7;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-8 {
  grid-area: i8;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-image-p-1-9 {
  grid-area: i9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ppcpc-text-p-1-3 {
  grid-area: t3;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.bar-p {
  width: 70%;
  background-color: rgba(230, 230, 230, 0.066);
  backdrop-filter: blur(3px);
  height: 13%;
  border-radius: 50px;
  position: absolute;
  bottom: 10%;
  display: flex;
  align-items: center;
}

.bar-p:hover .dot-p {
  background-color: rgba(230, 230, 230, 0.425);
}

.bar-p span {
  margin: 13%;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Anton";
  color: white;
  font-size: 110%;
}

.dot-p {
  height: 80%;
  position: absolute;
  right: 13%;
  top: 50%;
  transform: translate(50%, -50%);
  background-color: rgba(230, 230, 230, 0.202);
  aspect-ratio: 1/1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.dot-p svg {
  width: 70%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  pointer-events: none;
  color: white;
}

/* ----- FURNITURE ----- */

.ppc-furniture-c {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-f span:nth-child(1) {
  background-color: rgb(194, 190, 190);
}
.portfolio-page .pp-cards .ppcf-f-dots-f span:nth-child(2) {
  background-color: rgb(63, 60, 60);
}
.portfolio-page .pp-cards .ppcf-f-dots-f span:nth-child(3) {
  background-color: rgb(243, 120, 59);
}

/* ----- PROGRAMMATION ----- */

.ppc-programmation {
  display: contents;
}

/* DOTS */

.portfolio-page .pp-cards .ppcf-f-dots-pr span:nth-child(1) {
  background-color: rgb(105, 206, 100);
}
.portfolio-page .pp-cards .ppcf-f-dots-pr span:nth-child(2) {
  background-color: rgb(182, 59, 59);
}
.portfolio-page .pp-cards .ppcf-f-dots-pr span:nth-child(3) {
  background-color: rgb(214, 161, 62);
}

.ppcpc-pr-1 {
  width: 100%;
  height: 170vh;
  position: relative;
  top: 2%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "j1 t1"
    "t2 j2"
    "j3 t3";
  margin-bottom: 20vh;
}

[class*="ppcpc-pr-jeu-"] {
  padding: 5%;
}

.ppcpc-pr-1 iframe {
  border-radius: 50px;
}

.ppcpc-pr-jeu-1-1 {
  grid-area: j1;
}
.ppcpc-pr-jeu-1-2 {
  grid-area: j2;
}
.ppcpc-pr-jeu-1-3 {
  grid-area: j3;
}

[class*="ppcpc-pr-text-"] {
  padding: 5%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

/* DOMAINES PAGES */

.ppcpc-domaine-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ppcpc-domaine-carousel .carousel {
  grid-area: ca;
  position: relative;
  width: 22%;
  height: 10%;
  top: -50%;
  /* overflow: hidden; */
}
/* .carousel {
  width: min(900px, 92vw);
} */

.ppcpc-domaine-carousel .carousel-stage {
  position: relative;
  aspect-ratio: 9/9; /* hauteur automatique selon largeur */
  perspective: 1200px;
  user-select: none;
}

.ppcpc-domaine-carousel .slide {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 78%;
  height: 100%;
  transform: translate(-50%, -50%);
  transition:
    transform 0.55s ease,
    opacity 0.55s ease,
    filter 0.55s ease;
  /* pointer-events: none; */
  cursor: pointer;
  z-index: 1;
  opacity: 0; /* par défaut invisible, le JS force l’état */
  display: flex;
  justify-content: center;
  align-items: center;
}

.ppcpc-domaine-carousel .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}

.ppcpc-domaine-carousel .dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20%;
}

.ppcpc-domaine-carousel .dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgb(59, 59, 59);
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.9;
}

.ppcpc-domaine-carousel .dots button[aria-selected="true"] {
  background: rgb(59, 59, 59);
}

/* ----- CONTACT ----- */

.contact-page {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  display: flex;
  background-color: #eee9df;
  transform: translateX(-100%);
  transition: 0.8s;
}

.contact-page.open {
  display: flex;
}

.pp-direction-arrow {
  display: contents;
}

.pp-direction-arrow .ppda-portfolio-c {
  right: 0;
  transform: rotate(0deg);
  z-index: 100;
}

.pp-direction-arrow .ppda-portfolio-c:hover {
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

/* CONTENT */

.cp-content {
  display: grid;
  height: 78%;
  width: 77.5%;
  position: absolute;
  top: 11%;
  right: 11.25%;
  grid-template-columns: 60% 40%;
  grid-template-rows: 30% 70%;
  grid-template-areas:
    "ti ti"
    "sa ia";
}

.contact-page .cp-content .cpc-title {
  position: absolute;
  display: flex;
  top: 7%;
  right: 6%;
  grid-area: ti;
  justify-content: center;
  align-items: center;
  background-color: rgb(59, 59, 59);
  width: 37%;
  border-radius: 50px;
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.contact-page .cp-content .cpc-title span {
  width: 100%;
  height: 100%;
  color: #f3ece2;
  font-family: "Anton";
  text-align: center;
  display: block;
  font-size: 7vw;
}

.cpc-send-area {
  position: relative;
  top: -10%;
  left: -20%;
  transform: translate(50%);
  height: 90%;
  width: 80%;
  grid-area: sa;
  /* border: red 2px solid; */
  display: grid;
  grid-template-rows: 20% 20% 45% 15%;
  grid-template-areas:
    "na"
    "ma"
    "tx"
    "bu";
}

.cpc-sa-name textarea {
  grid-area: na;
  height: 70%;
  width: 90%;
  background-color: #f3ece2;
  border-radius: 20px;
  padding-left: 6%;
  padding-top: 3%;
  resize: none;
  border: none;
  transition: 0.5s;
  color: rgb(59, 59, 59);
  font-family: "Anton";
  overflow: hidden;
}

.cpc-sa-name textarea:focus {
  outline: none;
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5) inset,
    -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.cpc-sa-name textarea:hover {
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5) inset,
    -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.cpc-sa-mail textarea {
  grid-area: ma;
  height: 70%;
  width: 90%;
  background-color: #f3ece2;
  border-radius: 20px;
  padding-left: 6%;
  padding-top: 3%;
  resize: none;
  border: none;
  transition: 0.5s;
  color: rgb(59, 59, 59);
  font-family: "Anton";
  overflow: hidden;
}

.cpc-sa-mail textarea:focus {
  outline: none;
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5) inset,
    -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.cpc-sa-mail textarea:hover {
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5) inset,
    -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.cpc-sa-text textarea {
  grid-area: te;
  height: 80%;
  width: 90%;
  background-color: #f3ece2;
  border-radius: 20px;
  padding: 6%;
  resize: none;
  border: none;
  transition: 0.5s;
  color: rgb(59, 59, 59);
  font-family: "Anton";
}

.cpc-sa-text textarea:focus {
  outline: none;
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5) inset,
    -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.cpc-sa-text textarea:hover {
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5) inset,
    -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.cpc-send-area:has(.cpc-sa-name textarea:hover) .cpc-sa-ligne-n,
.cpc-send-area:has(.cpc-sa-name textarea:focus) .cpc-sa-ligne-n {
  opacity: 0;
}

/* survol ou focus du textarea mail */
.cpc-send-area:has(.cpc-sa-mail textarea:hover) .cpc-sa-ligne-m,
.cpc-send-area:has(.cpc-sa-mail textarea:focus) .cpc-sa-ligne-m {
  opacity: 0;
}

/* survol ou focus du textarea message */
.cpc-send-area:has(.cpc-sa-text textarea:hover) .cpc-sa-ligne-t,
.cpc-send-area:has(.cpc-sa-text textarea:focus) .cpc-sa-ligne-t {
  opacity: 0;
}

[class*="cpc-sa-ligne-"] {
  position: absolute;
  width: 80%;
  height: 0.6%;
  border-radius: 1px;
  background-color: rgb(105, 104, 104);
  left: 5%;
}

.cpc-sa-ligne-n {
  top: 15%;
  transition: 0.3s;
}

.cpc-sa-ligne-m {
  top: 35%;
  transition: 0.3s;
}

.cpc-sa-ligne-t {
  top: 77%;
  transition: 0.3s;
}

.cpc-sa-send-button {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-area: bu;
  height: 70%;
  width: 25%;
  background-color: rgba(255, 166, 0, 0.511);
  border-radius: 20px;
  left: 60%;
  position: relative;
  resize: none;
  border: none;
  transition: 0.3s;
  color: rgb(59, 59, 59);
  font-family: "Anton";
  transition: 0.3s;
  cursor: pointer;
}

.cpc-sa-send-button .cpc-sa-sb-icon {
  position: relative;
  left: 0;
  background-color: transparent;
  border: 1.3px solid rgb(59, 59, 59);
  border-radius: 50%;
  margin: 7%;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cpc-sa-send-button .cpc-sa-sb-icon svg {
  height: 90%;
  width: 90%;
  background-color: transparent;
}

.cpc-sa-send-button .cpc-sa-sb-icon svg:nth-child(1) {
  color: rgb(59, 59, 59);
}

.cpc-sa-send-button .cpc-sa-sb-icon svg:nth-child(2) {
  color: black;
  display: none;
  height: 73%;
  width: 73%;
}

.cpc-sa-send-button button {
  top: 0%;
  left: -5%;
  position: relative;
  resize: none;
  border: none;
  transition: 0.3s;
  color: rgb(59, 59, 59);
  font-family: "Anton";
  background-color: transparent;
  transition: 0.3s;
  cursor: pointer;
}

.cpc-sa-send-button:hover {
  transform: scale(1.1);
  background-color: rgb(255, 166, 0);
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.cpc-sa-send-button:hover .cpc-sa-sb-icon {
  background-color: rgb(255, 166, 0);
  border: 1.3px solid black;
}

.cpc-sa-send-button:hover .cpc-sa-sb-icon svg:nth-child(2) {
  display: flex;
}

.cpc-sa-send-button:hover .cpc-sa-sb-icon svg:nth-child(1) {
  display: none;
}

.cpc-sa-send-button:hover button {
  color: black;
}

.cpc-info-area {
  grid-area: ia;
  height: 35%;
  width: 60%;
  margin-left: 20%;
  margin-top: 6%;
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows: 50% 50%;
  grid-template-areas:
    "tm im"
    "tp ip";
}

.cpc-ia-text-mail {
  grid-area: tm;
}

.cpc-ia-icon-mail {
  grid-area: im;
}

.cpc-ia-text-phone {
  grid-area: tp;
}

.cpc-ia-icon-phone {
  grid-area: ip;
}

[class*="cpc-ia-text-"] span:hover {
  color: rgba(59, 59, 59, 0.693);
}

[class*="cpc-ia-text-"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

[class*="cpc-ia-text-"] span {
  color: rgb(59, 59, 59);
  font-family: "Inter", sans-serif;
  font-size: 115%;
  transition: 0.3s;
  cursor: pointer;
}

[class*="cpc-ia-icon-"] {
  display: flex;
  justify-content: center;
  align-items: center;
}

[class*="cpc-ia-icon-"] svg {
  color: rgb(59, 59, 59);
  width: 80%;
  height: 80%;
}

.cpc-ia-icon-phone svg {
  width: 60%;
  height: 60%;
}

.cpc-deco-circle1 {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 2%;
  background-color: #a35139;
  width: 12%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

/* ----- ABOUT ----- */

.about-page {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  background-color: #eee9df;
  transition: 0.8s;
  transform: translateX(100%);
}

.about-page.open {
  display: flex;
}

.pp-direction-arrow .ppda-portfolio-a {
  left: 0;
  transform: rotate(180deg);
  z-index: 10;
}

/* CONTENT */

.ap-content {
  display: contents;
}

.about-page .ap-content .apc-title {
  position: absolute;
  top: 15%;
  left: 16%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.about-page .ap-content .apc-title span {
  width: 100%;
  height: 100%;
  color: rgb(59, 59, 59);
  font-family: "Anton";
  text-align: center;
  display: block;
  font-size: 7vw;
}

.about-page .ap-content img {
  height: 75%;
  aspect-ratio: 11/16;
  position: absolute;
  bottom: 2%;
  right: 6%;
}

.apc-text1 {
  /* border: 1px solid red; */
  width: 39%;
  height: 51%;
  position: absolute;
  top: 35%;
  left: 20%;
  padding: 1.5% 2%;
  display: grid;
  grid-template-rows: 20% 70% 10%;
  grid-template-areas:
    "t1"
    "t2"
    "di";
  border-radius: 50px;
  /* background-color: white;
  box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.5),
    inset 3px 3px 2px 0px rgba(255, 255, 255, 0.5); */
}

.apc-text1 img {
  height: 100%;
  width: 100%;
  position: relative;
  /* bottom: 2%;
  right: 6%; */
}

.apct-text1 {
  width: 100%;
  height: 100%;
  grid-area: t1;
}

.apct-text1 span {
  color: rgb(59, 59, 59);
  font-size: 250%;
  font-family: "Anton";
}

.apct-text2 {
  width: 100%;
  height: 60%;
  grid-area: t2;
  text-align: justify;
  text-justify: inter-word;
  gap: 5%;
  display: flex;
  flex-direction: column;
}

.apc-text1 .apct-text2 span {
  color: rgb(59, 59, 59);
  font-size: 85%;
  font-family: "Inter", sans-serif;
  text-align: justify;
  text-justify: inter-word;
  width: 100%;
}

.about-page .apct-discover {
  width: 25%;
  height: 95%;
  background-color: rgba(255, 166, 0, 0.511);
  position: relative;
  left: 73%;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: pointer;
  grid-area: di;
}

.about-page .apct-discover:hover {
  transform: scale(1.1);
  background-color: rgb(255, 166, 0);
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
}

.about-page .apct-discover:hover h1 {
  color: black;
}

.about-page .apct-discover h1 {
  color: rgb(59, 59, 59);
  font-family: "Anton";
  font-size: 0.8rem;
}

.about-page .ap-card {
  z-index: 20;
  display: none;
  border: solid 4px rgb(100, 100, 100);
  background-color: #eee9df;
  position: absolute;
  width: 85%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  overflow: hidden;
}

.ap-card.open {
  display: flex;
  justify-content: center;
}

.ap-card-content {
  width: 100%;
  scroll-behavior: smooth;
  overflow-y: auto;
  z-index: 20;
  height: 300vh;
}

.ap-back {
  z-index: 15;
  width: 100%;
  height: 100%;
  background-color: #7571713b;
  backdrop-filter: blur(10px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.ap-back.open {
  display: flex;
}

.ap-card-return {
  height: 70%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgb(255, 166, 0);
  margin-right: 3%;
  transition: 0.3s;
  box-shadow:
    -3px 3px 2px 0px rgba(30, 30, 30, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ap-card-return:hover {
  box-shadow:
    inset -3px 3px 2px 0px rgba(0, 0, 0, 0.279),
    inset 3px -3px 2px 0px rgba(255, 255, 255, 0.273);
}

.ap-card-return svg {
  height: 60%;
  width: 60%;
  color: rgb(59, 59, 59);
}

.ap-card-return:hover svg {
  color: rgba(59, 59, 59, 0.81);
}

.ap-card-header {
  background-color: rgb(59, 59, 59);
  width: 95%;
  height: 20vh;
  margin: 2.5%;
  border-radius: 40px;
  box-shadow:
    -3px 3px 2px 0px rgba(0, 0, 0, 0.5),
    inset -3px 3px 2px 0px rgba(255, 255, 255, 0.344);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* TITLES */

.ap-card-title {
  margin-left: 3%;
}

.ap-card-title h1 {
  font-size: 5rem;
  color: #eee9df;
  font-family: "Anton";
}

.apcc-history {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  margin-top: 5%;
}

[class*="apcch-"] {
  /* margin-top: 3%; */
}

[class*="apcch-p-"] {
  display: grid;
  grid-template-columns: 40% 20% 40%;
  height: auto;
  width: 70%;
}

[class*="apcch-d-"] {
  display: flex;
  justify-content: end;
  align-items: start;
  height: auto;
  width: 100%;
  margin-bottom: 3%;
}

[class*="apcch-d-"] h1 {
  font-family: "Inter", sans-serif;
  color: #747474;
  font-style: italic;
  margin-top: 3px;
  font-size: 85%;
}

[class*="apcch-m-"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

[class*="apcch-c-"] {
  width: 15%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgb(59, 59, 59);
  /* position: relative; */
  /* left: 45%;
  top: 0;
  margin-top: 10px; */
}

[class*="apcch-l-"] {
  width: 2%;
  height: 100%;
  background-color: rgb(59, 59, 59);
}

[class*="apcch-t-"] {
  display: flex;
  justify-content: start;
  align-items: start;
  height: auto;
  width: 100%;
  flex-direction: column;
  margin-bottom: 10%;
}

[class*="apcch-t-"] h1 {
  font-family: "Anton";
  color: rgb(59, 59, 59);
  font-size: 100%;
}

[class*="apcch-t-"] span {
  color: rgb(59, 59, 59);
  font-size: 85%;
  font-family: "Inter", sans-serif;
  text-align: justify;
  text-justify: inter-word;
}

/* ----- FOOTER ----- */

footer {
  height: 11vh;
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: end;
  justify-content: center;
}

footer p,
footer span {
  font-family: "Inter", sans-serif;
  color: rgb(59, 59, 59);
  font-size: 0.7em;
  margin-bottom: 2vh;
}

footer span {
  text-decoration: underline;
}

/* ----- MENTIONS LÉGALES ----- */

.ppcpc-ml-1 {
  display: grid;
  height: 140%;
  width: 100%;
  position: relative;
  /* border: 1px red solid; */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  font-family: "Nunito";
  gap: 3px;
}

.ppcpc-part-1-ml,
.ppcpc-part-2-ml,
.ppcpc-part-3-ml,
.ppcpc-part-4-ml,
.ppcpc-part-5-ml {
  display: flex;
  justify-content: start;
  flex-direction: column;
}

.ppcpc-part-1-title-ml,
.ppcpc-part-2-title-ml,
.ppcpc-part-3-title-ml,
.ppcpc-part-4-title-ml,
.ppcpc-part-5-title-ml {
  height: auto;
  width: 100%;
  margin-left: 100px;
}

.ppcpc-part-1-title-ml span,
.ppcpc-part-2-title-ml span,
.ppcpc-part-3-title-ml span,
.ppcpc-part-4-title-ml span,
.ppcpc-part-5-title-ml span {
  font-family: "Anton";
  color: rgb(59, 59, 59);
  font-size: 1.7rem;
}

.ppcpc-part-1-line-ml,
.ppcpc-part-2-line-ml,
.ppcpc-part-3-line-ml,
.ppcpc-part-4-line-ml,
.ppcpc-part-5-line-ml {
  width: 75%;
  height: 2px;
  background-color: black;
  border-radius: 2px;
  margin-left: 100px;
}

.ppcpc-part-1-content-ml,
.ppcpc-part-2-content-ml,
.ppcpc-part-3-content-ml,
.ppcpc-part-4-content-ml,
.ppcpc-part-5-content-ml {
  margin-left: 130px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 70%;
}

.ppcpc-part-1-content-ml span,
.ppcpc-part-2-content-ml span,
.ppcpc-part-3-content-ml span,
.ppcpc-part-4-content-ml span,
.ppcpc-part-5-content-ml span {
  text-align: justify;
  text-justify: inter-word;
  font-family: "Inter", sans-serif;
  color: rgb(59, 59, 59);
}

#ppcpc-part-1-content-ml-1,
#ppcpc-part-2-content-ml-1,
#ppcpc-part-4-content-ml-1 {
  color: rgb(0, 0, 0);
  font-weight: bold;
  margin-right: 3px;
}

#ppcpc-part-3-content-ml-2,
#ppcpc-part-4-content-ml-2 {
  color: rgb(0, 0, 0);
  font-weight: bold;
}

.ppcpc-part-1-content-ml li,
.ppcpc-part-2-content-ml li,
.ppcpc-part-3-content-ml li,
.ppcpc-part-4-content-ml li {
  list-style: disc;
  list-style-position: inside;
}

/* ----- RESPONSIVE ----- */

@media screen and (max-width: 500px) {
  .portfolio-page .pp-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "c1 c2"
      "c3 c4"
      "c5 c5"
      "c5 c5";
  }
}