:root {
  --background-color-1: #f9f4ef;
  --background-color-2: #e0d9ce;
  --background-color-3: #c2b9a6;
  --background-color-3-glass: rgba(194, 185, 166, 0.75);

  --color-hover: rgba(243, 245, 240, 0.6);
  --color-radial-1: rgba(249, 244, 239, 0.5);
  --color-radial-2: rgba(232, 220, 207, 0.5);
  --color-radial-3: rgba(203, 191, 174, 0.5);

  --backdrop-color-60: rgba(26, 22, 18, 0.6);

  --primary-color: #2a7a73;
  --primary-color-error: #7a2a2a;
  --primary-color-light: #7b9d9a;
  --secondary-color: #0e4050;
  --primary-color-vibrant: #9efbf3;

  --primary-text-color: #4a3f35;
  --secondary-text-color: #7a5c61;

  --cream: #fdfcfc;
  --cream-error: #f5f0f0;

  --1024px: 64rem;
  --768px: 48rem;
  --512px: 32rem;
  --256px: 16rem;
  --200px: 12.5rem;
  --128px: 8rem;
  --112px: 7rem;
  --96px: 6rem;
  --64px: 4rem;
  --48px: 3rem;
  --40px: 2.5rem;
  --32px: 2rem;
  --24px: 1.5rem;
  --20px: 1.25rem;
  --16px: 1rem;
  --14px: 0.875rem;
  --8px: 0.5rem;
  --0px: 0rem;

  --radius-value: var(--16px);
  --radius-value-intern: var(--8px);
  --radius-value-header: var(--48px);
  --popup-width: 37.5rem;
  /* --popup-width-computer: 37.5rem; */
  --popup-height: 80vh;

  --background-color-footer: #c2b9a6;
  --color-layer-1: #cbd6d5;
  --background-color: #f9f4ef;
  --accent-color: #ce2517;
  --text-color: #222;

  --gap-1024: 64rem;
  --gap-768: 48rem;
  --gap-512: 32rem; /*512px*/

  --gap-section-L: 16rem; /*256px*/
  --gap-section: 8rem; /*128px*/
  --gap-section-S: 4rem; /*64px*/
  --gap-section-XS: 2rem; /*32px*/
  --gap-section-XXS: 1rem; /*16px*/
  --gap-section-XXXS: 0.5rem; /*8px*/

  --gap-section-inter: 3rem; /*48px*/

  --padding-XXXL: 96px;
  --padding-XXL: 64px;
  --padding-XL: 48px;
  --padding-L: 32px;
  --padding-M: 24px;
  --padding-S: 16px;
  --padding-12: 12px;
  --padding-XS: 8px;

  --font-size-header-caption: var(--16px);
  --font-size-header: var(--20px);
  --font-size-h1: var(--40px);
  --font-size-h1-emphasis: var(--48px) >;
  --font-size-h2: var(--32px);
  --font-size-h3: var(--24px);
  --font-size-h4: var(--20px);
  --font-size-regular: var(--20px);
  --font-size-category: var(--16px);
}

@font-face {
  font-family: "Akaya Kanadaka";
  src: url("/fonts/AkayaKanadaka-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Oxygen";
  src: url("/fonts/Oxygen-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Oxygen";
  src: url("/fonts/Oxygen-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Oxygen";
  src: url("/fonts/Oxygen-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

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

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: var(--primary-text-color);
  background-color: var(--background-color-1);
  background-image: radial-gradient(
      circle at center,
      var(--color-radial-1) 0%,
      var(--color-radial-2) 40%,
      var(--color-radial-3) 100%
    ),
    url("/ornements/slightly-blotted-clean-pale-stucco-pattern.png");

  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  font-family: "Oxygen", sans-serif;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
  font-family: "Akaya Kanadaka";
  margin: 0px;
  padding-bottom: var(--48px);
}
h3 {
  font-size: var(--font-size-h3);
  font-family: "Akaya Kanadaka";
  margin: 0px;
  padding-bottom: var(--padding-L);
}
h4 {
  font-size: var(--font-size-h4);
  font-family: "Akaya Kanadaka";
  margin: 0px;
  padding-bottom: var(--24px);
}
p,
i {
  margin: 0px;
  font-size: var(--font-size-regular);
}
q {
  padding-top: clamp(
    var(--gap-section-XXS),
    var(--gap-section-XS),
    var(--gap-section-S)
  );
  padding-bottom: clamp(
    var(--gap-section-XXS),
    var(--gap-section-XS),
    var(--gap-section-S)
  );
  font-style: italic;
}

.emphasis {
  font-family: "Akaya Kanadaka";
}

.hidden {
  display: none;
}

#toast-container {
  position: fixed;
  top: 50px;
  right: 20px;
  z-index: 10;
}

.toast {
  background-color: #333;
  color: #fff;
  padding: 12px 20px;
  margin-top: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Home */
#content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--gap-section-XS);

  section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    min-height: 70vh;
  }
}
#main-title {
  display: flex;
  flex-direction: column;
  gap: var(--96px);
  h1 {
    padding-top: var(--32px);
    text-align: center;
    width: 100%;
  }
  img {
    position: absolute;
    z-index: -1;
  }
  #quote {
    padding-left: var(--256px);
    p {
      margin: 0rem 0rem var(--8px) 0rem;
    }
    p:nth-child(1) {
      font-family: "Akaya Kanadaka";
      font-size: var(--font-size-h1);
    }
    p:nth-child(2) {
      font-size: var(--font-size-h2);
    }
  }
  #ornement-title {
    width: 31vw;
    bottom: unset;
    top: 0%;
    right: unset;
    left: -37px;
  }
  #ornement-title-bot {
    height: 31vw;
    max-height: 100%;
    top: unset;
    bottom: -37px;
    left: unset;
    right: 0%;
  }
}

#introduction {
  gap: var(--48px);
  #introduction-self {
    /*background-image: url('/ornements/ornement-introduction.svg');
            background-repeat: no-repeat;
            background-position-x: right var(--gap-section-L);
            background-position-y: center;
            background-size: auto;
            background-attachment: local;*/
    display: flex;
    flex-direction: row;
    gap: var(--48px);
    :first-child {
      display: flex;
      flex-direction: column;
      justify-content: center;

      max-width: -moz-available;
      max-width: -webkit-fill-available;
      max-width: fill-available;
      p {
        width: var(--gap-768);
        max-width: 100%;
        padding-left: var(--64px);
      }
      /* pair */
      p:nth-child(odd) {
        padding-left: 0px;
      }
      /* impair */
      p:nth-child(even) {
        padding-left: var(--128px);
      }
      div {
        display: flex;
        flex-direction: column;
        gap: var(--48px);
      }
    }

    img {
      width: 20vw;
    }
  }

  #introduction-expertise {
    padding-left: var(--64px);

    div {
      gap: var(--24px);
      p:nth-of-type(2) {
        padding-top: var(--24px);
      }
    }
  }

  #introduction-project-cycle {
    display: flex;
    flex-direction: column;
    padding-left: var(--64px);

    #project-cycle {
      div:nth-child(odd) {
      }
      /* impair */
      div:nth-child(even) {
        width: fit-content;
      }
    }
    .project-phase {
      display: flex;
      flex-direction: column;
      gap: var(--padding-12);
      p {
        font-weight: bold;
        font-family: "Akaya Kanadaka";
        margin: 0px;
      }
      ul {
        margin: 0px;
        padding-left: var(--gap-section-XXS);
        li {
          margin-bottom: var(--gap-section-XXXS);
        }
      }
    }
  }
}

#showcasing {
  #showcasing-projects {
    display: flex;
    flex-direction: column;
    gap: var(--64px);
    .card-project:nth-child(odd) {
      margin-left: var(--96px);
    }
  }
}
#clients {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--padding-L);
  min-height: 10vh !important;
  height: fit-content;
  div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--padding-XXL);
  }
  img {
    width: 100%;
    max-width: 100px;
    mix-blend-mode: darken;
  }
}
#quick-about {
  display: flex;
  flex-direction: column;
  gap: var(--48px);
  div {
    display: flex;
    flex-direction: row;
    gap: var(--48px);
    justify-content: space-between;
    div {
      display: flex;
      flex-direction: column;
      align-self: start;
      gap: var(--padding-XS);
      flex: 2;
    }
    img {
      max-width: 20vw;
      width: 100%;
      height: fit-content;
      flex: 1;
      mix-blend-mode: darken;
      align-self: flex-end;
    }
  }
}
.expertise {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--48px);

  p {
    padding-left: var(--gap-section-XXS);
  }
}

.bulle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 60px;
  background: rgba(194, 185, 166, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* border: 1px solid rgba(255, 255, 255, 0.3);*/
  color: black;
  /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);*/
  top: -20%;
  clip-path: path(
    "M  10 0 L  160 0 C 165,0 170,5 170,10 L 170  40 C 170,45 165,50 160,50 L 120 50 L 110 60 L 100 50 L  10 50 C 5,50 0,45 0 40 L 0 10 C 0,5 5,0 10,0 Z"
  );
  span {
    position: relative;
    bottom: 5px;
    font-family: "akaya kanadaka";
    font-size: var(--font-size-regular);
  }
}

.cta-envelope {
  position: fixed;
  display: block;
  width: 172px;
  height: 128px;
  cursor: pointer;
  right: 0%;
  bottom: 0%;

  img {
    position: absolute;
  }
  #cta-base {
    left: 40px;
    top: 48px;
    z-index: 1;
  }
  #cta-wing-top-right {
    top: 40px;
    right: 16px;
    transform-origin: 0% 100%;
    animation: wingTopRight 5s ease-in-out infinite;
  }
  #cta-wing-bot-right {
    bottom: 4px;
    right: 32px;
    transform-origin: 0% 0%;
    animation: wingBotRight 5s ease-in-out infinite;
  }
  #cta-wing-top-left {
    top: 40px;
    left: 72px;
    transform: scaleX(-1);
    transform-origin: 0% 100%;
    animation: wingTopLeft 5s ease-in-out infinite;
  }
  #cta-wing-bot-left {
    bottom: 4px;
    left: 32px;
    transform: scaleX(-1);
    animation: wingBotLeft 5s ease-in-out infinite;
  }
}
/*.cta-envelope:hover {
		offset-path: path(
			'M 86 64 \
			L 86 32 \
			C 129,32 129,32 129 64 \
			C 129,96 129,96 86 96 \
			C 43,96 43,96 43 64 \
			C 43,64 86,16 86 0 \
			L 86 96 \
			Z'
		);
		offset-distance: 0%;
		offset-rotate: 0deg;
		animation: rotation 1.5s ease;
	}
	@keyframes rotation {
		to {
			offset-distance: 100%;
		}
	}*/

@keyframes wingTopRight {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(40deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes wingBotRight {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
@keyframes wingTopLeft {
  0% {
    transform: scaleX(-1) rotate(0deg);
  }
  50% {
    transform: scaleX(-1) rotate(40deg);
  }
  100% {
    transform: scaleX(-1) rotate(0deg);
  }
}
@keyframes wingBotLeft {
  0% {
    transform: scaleX(-1) rotate(10deg);
  }
  50% {
    transform: scaleX(-1) rotate(-10deg);
  }
  100% {
    transform: scaleX(-1) rotate(10deg);
  }
}

/*Header*/
header {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-self: center;
  gap: var(--96px);
  padding: var(--8px) var(--16px) var(--8px) var(--24px);
  font-family: "Oxygen", Georgia, serif;
  align-items: center;
  z-index: 10;

  margin-top: var(--16px);
  border-radius: var(--radius-value-header);
  background: rgba(194, 185, 166, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 2px solid rgba(255, 255, 255, 0.35);
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 4px 4px 8px rgba(74, 63, 53, 0.2);

  a {
    text-decoration: none;
    color: var(--primary-text-color);
    p {
      margin: var(--0px);
    }
  }
  #left-side-header {
    p:nth-child(1) {
      font-size: var(--font-size-header-caption);
    }
    p:nth-child(2) {
      font-size: var(--font-size-header);
    }
  }

  #burger-menu {
    display: none;
  }
}

/*Nav*/
nav {
  display: flex;
  flex-direction: row;
  gap: var(--96px);

  div:nth-child(1) {
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-header);
    gap: var(--8px);
  }
  div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--font-size-header-caption);
  }
  a {
    text-decoration: none;
    color: var(--color-primary);

    padding: 16px 24px 16px 24px;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    &:hover {
      color: var(--color-accent);
      background: var(--color-hover);
    }
    &:active {
      color: var(--color-accent);
    }
  }
  a[aria-current="page"] {
    font-weight: bold;
    background-color: var(--color-radial-1);
  }
}

/*Language*/
#language-selection {
  display: flex;
  flex-direction: row;
  gap: var(--0px);
  button {
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-header-caption);
    cursor: pointer;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    &:hover {
      color: var(--color-accent);
      background: var(--color-hover);
    }
  }
}

/* Work */
#work-page {
  margin: var(--128px);
  .card-project {
    display: flex;
    flex-direction: column;
    /* flex-flow: wrap; */
    justify-content: space-evenly;
    margin-bottom: var(--64px);
    margin-left: 192px;
    .card-project-content {
      width: 100%;
      display: flex;
      div {
        width: 100%;
      }
    }
  }
  .tags {
    justify-content: start;
  }

  h1 {
    font-family: "Akaya Kanadaka";
  }
}

/* Playground */
#playground-page {
  margin: var(--128px);
  h1 {
    font-family: "Akaya Kanadaka";
  }
  main {
    column-count: 5;
    column-gap: var(--32px);
    img {
      width: -moz-available;
      width: -webkit-fill-available;
      margin-bottom: var(--32px);
      border-radius: var(--radius-value);
    }
  }
}

/* About */
#about-page {
  margin: var(--128px);
  max-width: 100%;

  #about-tools {
    ul {
      columns: 2;
    }
  }
  .title-xp {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--8px);
    align-items: baseline;
    strong {
      font-family: "Akaya Kanadaka";
      font-size: var(--font-size-h4);
    }
    a {
      color: var(--primary-color);
      text-decoration: none;
      font-weight: bold;
    }
    span {
      color: var(--primary-color-light);
      font-style: italic;
    }
    b {
      padding-left: var(--24px);
    }
  }
  .sub-section {
    display: flex;
    flex-direction: column;
    gap: var(--16px);
  }

  section {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: var(--32px);
    flex: auto;
    div {
      display: flex;
      flex-direction: column;
      gap: var(--16px);
    }
    h2 {
      padding-bottom: var(--16px);
    }

    ul {
      margin: 0;
      padding-top: 4px;
      list-style-type: circle;
      li {
        padding-bottom: var(--8px);
      }
    }
  }
  img {
    mix-blend-mode: darken;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  h1 {
    font-family: "Akaya Kanadaka";
  }
}

/* Footer*/

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--32px);
  font-family: "Oxygen", Georgia, serif;
  background-color: var(--background-color-3);
  #left-side-footer {
    display: flex;
    flex-direction: column;
    gap: var(--8px);
    p {
      margin: var(--0px);
    }
    div {
      display: flex;
      flex-direction: row;
      gap: var(--64px);
      /* justify-content: space-evenly; */

      div {
        display: flex;
        flex-direction: column;
        gap: var(--8px);

        div {
          display: flex;
          flex-direction: row;
        }
      }
    }
  }
}

.button-icon {
  cursor: pointer;
  width: var(--48px);
  height: var(--48px);
  padding: var(--0px);
  background: none;
  border: none;
}

/*Card Project*/
.card-project {
  display: flex;
  align-items: center;
  aspect-ratio: 209 / 110;
  background: url("/ornements/project-front.svg"),
    url("/ornements/project-back.svg");
  background-repeat: no-repeat;
  background-size: contain;

  cursor: pointer;

  max-width: var(--1024px);
  a {
    display: flex;
    flex-direction: row;
    gap: var(--32px);
    text-decoration: none;
    color: black;
    padding-left: var(--96px);
    padding-right: var(--96px);
  }

  i {
    padding-bottom: var(--32px);
    /* height: var(--200px); */
  }
  img {
    align-self: center;
    height: 256px;
    border-radius: var(--radius-value-header);
    transition: transform 0.3s ease;
  }
  div:nth-child(1) {
    display: flex;
    flex-direction: column;
    padding-left: var(--48px);
    h2 {
      /* text-align: center; */
      padding-left: var(--32px);
      padding-bottom: var(--32px);
      color: var(--primary-color);
    }
    div {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: var(--16px);
      max-width: var(--512px);
    }
  }
  transition: transform 0.3s ease;
}

.tags {
  flex-direction: row !important;
  gap: var(--24px);
  padding-left: var(--32px);
  flex-wrap: wrap;
  .tag {
    padding: var(--8px) var(--16px);
    border-radius: var(--radius-value);
    background-color: var(--color-radial-2);
  }
}

/* Contact Form*/
#popup_contact {
  position: fixed;
  top: var(--0px);
  left: var(--0px);
  width: 100%;
  height: 100%;
  background: var(--backdrop-color-60);
  z-index: 5;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--background-color-1);
  border-radius: var(--radius-value);
  padding: var(--64px);
  width: var(--popup-width);
  max-height: var(--popup-height);
  overflow-y: auto;

  #popup_close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: var(--32px);
    height: var(--32px);
    cursor: pointer;
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: var(--16px);

  label {
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: var(--8px);
  }

  input,
  textarea {
    padding: var(--8px);
    border-radius: var(--radius-value-intern);
    border: 1px solid var(--background-color-3);
    background-color: var(--cream);
    color: var(--primary-text-color);
    resize: none;
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--primary-color-light);
  }

  input:focus,
  textarea:focus {
    outline: 2px solid var(--primary-color);
  }
  .invalid {
    outline: 2px solid var(--primary-color-error);
    background-color: var(--cream-error);
  }
  /*input:invalid {
			border-color: crimson;
			box-shadow: 0 0 5px red;
		}*/

  button {
    position: relative;
    font-family: "Akaya Kanadaka";
    font-size: var(--font-size-regular);
    margin-top: var(--24px);
    padding: var(--16px) var(--24px);
    border-radius: var(--radius-value);
    width: 60%;
    background-color: var(--cream);
    border: none;
    align-self: center;
    cursor: pointer;

    &:hover {
      background-color: white;
    }
  }
}

/* ✅ Activation quand le formulaire est valide */
.gradient-btn::before {
  display: block;
  content: "";
  position: absolute;
  inset: -1px; /* déborde pour simuler la bordure */
  background: conic-gradient(
    from var(--angle),
    var(--cream) 0%,
    var(--primary-color-vibrant) 4%,
    var(--primary-color) 20%,
    var(--secondary-color) 50%,
    var(--primary-color) 80%,
    var(--primary-color-vibrant) 96%,
    var(--cream) 100%
  );
  border-radius: var(--radius-value);
  z-index: -1;
  animation: spin 5s linear infinite;
}

form:valid .gradient-btn {
  color: var(--secondary-color);
}

/* ✅ Activation quand le formulaire est valide */
form:valid .gradient-btn::before {
  display: block;
}

/* ❌ Par défaut, on cache l'effet */
form:not(:valid) .gradient-btn::before {
  display: none;
}
/* 🌀 Animation de rotation */
@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes spin {
  to {
    --angle: 1turn;
  }
}

/* form:invalid button {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
} */

@media (min-width: 1700px) {
  #content {
    padding-top: var(--64px);
    section {
      margin: var(--128px);
    }
  }
  #quick-about {
    padding-left: var(--256px);
    padding-right: var(--256px);
  }
  #about-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--32px);
  }
  .about-column1 {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--32px);
  }
  .about-column2 {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: var(--32px);
  }
  .about-column3 {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: var(--32px);
  }
  .card-project:hover {
    z-index: 5;
    transform: scale(1.1);
    img {
      transform: scale(2) translateX(7.5vw);
    }
  }
}

@media (max-width: 1700px) {
  #about-page {
    margin: var(--128px);
  }
  #about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "column1 column2"
      "column3 column2";
    gap: var(--32px);
    img {
      display: none;
    }
  }
  #work-page {
    & div {
      align-self: center;
    }
    .card-project {
      margin: var(--0px) var(--0px) var(--64px) var(--0px) !important;
      padding: var(--48px) var(--8px);
      flex-direction: column !important;
      background: unset;
      & div {
        padding: var(--0px) var(--0px) !important;

        /* justify-content: flex-start; */
      }
    }
    .glass {
      border-radius: var(--radius-value-header);
      background: rgba(194, 185, 166, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-left: 2px solid rgba(255, 255, 255, 0.35);
      border-top: 2px solid rgba(255, 255, 255, 0.35);
      box-shadow: 4px 4px 8px rgba(74, 63, 53, 0.2);
    }
  }
  .about-column1,
  .about-column2 {
    display: grid;
    gap: var(--32px);
  }

  .about-column1,
  .about-column3 {
    grid-column: 1;
    height: fit-content;
  }
  .about-column1 {
    grid-area: column1;
  }
  .about-column2 {
    grid-area: column2;
  }
  .about-column3 {
    grid-area: column3;
    display: flex;
    flex-direction: row;
    gap: var(--32px);
  }
  #showcasing {
    #showcasing-projects {
      flex-direction: column;
      flex-wrap: unset;
      justify-content: unset;
    }
  }
}

@media (min-width: 1281px) {
  #introduction {
    padding-left: var(--256px);
    padding-right: var(--256px);
  }
  #work-page {
    .tag {
      background-color: var(--color-radial-3);
    }
  }
}
@media (max-width: 1280px) {
  #playground-page {
    main {
      column-count: 3;
    }
  }
  #about-page {
    margin: var(--128px) var(--64px);
  }
  #about-content {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: auto;
    gap: var(--32px);
    img {
      display: none;
    }
  }
  #showcasing-projects {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  #quick-about {
    padding: var(--0px) var(--128px);
    div {
      flex-direction: column;
      img {
        max-width: clamp(35vw, var(--512px), 100%);
      }
    }
  }
  #work-page {
    & div {
      align-self: auto;
    }
    .card-project {
      /* display: table; */
      padding: var(--48px) var(--48px);
    }
  }
  .card-project {
    margin: var(--0px) !important;
    padding: var(--48px) var(--8px);
    flex-direction: column !important;
    background: unset;
    flex: 1;
    & div {
      padding: var(--0px) var(--8px) !important;
    }
  }
  .tags {
    gap: var(--8px) !important;
    .tag {
      background-color: var(--color-radial-3);
    }
  }
  .card-project-a {
    padding-left: var(--0px) !important;
    padding-right: var(--0px) !important;

    flex-direction: column !important;
  }
  .glass {
    border-radius: var(--radius-value-header);
    background: rgba(194, 185, 166, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 2px solid rgba(255, 255, 255, 0.35);
    border-top: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 4px 4px 8px rgba(74, 63, 53, 0.2);
  }
}

@media (min-width: 769px) {
  #header-menu {
    display: contents !important;
  }
  #language-selection {
    button:nth-of-type(1) {
      padding: 16px 8px 16px 24px;
      border-radius: 2rem 0 0 2rem;
    }
    button:nth-of-type(2) {
      padding: 16px 24px 16px 8px;
      border-radius: 0 2rem 2rem 0;
    }
  }
  #content {
    section {
      margin: var(--64px);
    }
  }
  #mobile_contact {
    display: none !important;
  }
}
/* tablettes portrait */
@media (max-width: 768px) {
  .cta-envelope {
    display: none;
    /* padding-bottom: var(--64px); */
    /* position: relative;
    bottom: var(--128px);
    left: 25%;
    #cta-wing-bot-right {
      bottom: calc(var(--64px) * -1);
    }
    #cta-wing-bot-left {
      bottom: calc(var(--64px) * -1);
    } */
  }
  /* #popup_contact {
    display: block;
    position: relative;
    background-color: unset;
    padding-bottom: var(--64px);
    .popup-content {
      display: flex;
      position: relative;
      background-color: unset;
      padding: var(--0px) var(--8px) var(--64px) var(--8px);
      #popup_close {
        display: none;
      }
      #message {
        height: var(--256px);
      }
      form {
        width: -moz-available;
        width: -webkit-fill-available;
        width: fill-available;
      }
    }
  } */

  header {
    margin: var(--0px);
    border-radius: var(--0px);
    height: var(--64px);

    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    gap: var(--0px);
    justify-content: space-between;
    padding: var(--8px) var(--24px);
    /* background: rgba(194, 185, 166, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 2px solid rgba(255, 255, 255, 0.35);
    border-top: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 4px 4px 8px rgba(74, 63, 53, 0.2); */
    #header-menu {
      display: none;
    }
    #burger-menu {
      display: block;
    }
    nav {
      position: fixed;
      top: var(--64px);
      right: var(--0px);
      flex-direction: column;
      width: 100%;
      backdrop-filter: blur(10px);
      background-color: var(--background-color-3-glass);

      div:nth-child(1) {
        gap: var(--0px);
      }
      .emphasis {
        flex-direction: column;
      }
      a {
        background: none;
        text-align: end;
        border-radius: var(--0px);
      }
      a[aria-current="page"] {
        font-weight: bold;
        background-color: var(--color-radial-1);
        border-radius: var(--0px);
      }
      #language-selection {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: end;

        border-top: 2px solid var(--color-radial-2);
        button {
          padding: var(--16px) var(--24px);
          width: 100%;
          text-align: end;
          background-color: var(--background-color-3-glass);
        }
        #language-pipe {
          display: none;
        }
      }
    }
  }

  #content {
    margin-top: var(--64px);
    section {
      margin: var(--32px);
    }
  }
  #main-title {
    #quote {
      padding-left: var(--32px);
    }
    #ornement-title {
      width: 31vw;
      bottom: unset;
      top: 0%;
      right: unset;
      left: -5px;
    }
  }
  #ornement-title-quickPres {
    display: none;
  }
  #introduction {
    padding-left: var(--0px);
    padding-right: var(--0px);
    #introduction-self {
      & :first-child {
        p:nth-child(even) {
          padding-left: var(--0px);
        }
      }
    }
    :first-child {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 100%;
      p {
        max-width: 100%;
        padding-left: var(--0px);
      }
      div {
        display: flex;
        flex-direction: column;
        gap: var(--24px);
        flex-wrap: wrap;
        max-width: 100%;
      }
    }
    #introduction-expertise {
      padding-left: var(--0px);

      div {
        display: flex;
        flex-direction: column;
        gap: var(--24px);
        p:nth-of-type(2) {
          padding-top: var(--24px);
        }
      }
    }
  }
  #work-page {
    margin: var(--64px) var(--32px);
  }

  #quick-about {
    padding: var(--0px) var(--0px);
  }
  .popup-content {
    width: 80vw;
    form {
      button {
        width: 100%;
      }
    }
  }
  footer {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--32px);
    #left-side-footer > div {
      flex-direction: column;
    }
    #desktop_contact {
      display: none !important;
    }
    #left-side-footer {
      width: 100%;
    }
    #mobile_contact {
      display: contents;
      padding-top: var(--64px);
      align-items: center;
      form {
        width: 80%;
      }
      #message {
        height: var(--256px);
      }
      button {
        width: 100%;
      }
    }
  }
  #playground-page {
    margin: var(--64px);
    main {
      column-count: 1;
    }
  }
  .column3 {
    display: grid;
  }
  .about-column3 {
    flex-direction: column;
  }
  #about-page {
    margin: var(--64px) var(--64px);
  }
}

@media (max-width: 480px) {
  footer {
    padding: var(--16px);
  }
  #about-page {
    margin: var(--64px) var(--16px);
    /* #about-content {
      width: max-content;
    } */
  }

  #work-page {
    .card-project {
      padding: var(--24px) var(--8px);
    }
  }
  #showcasing,
  #work-page {
    img {
      height: auto;
      width: 100%;
    }
  }
}