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

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

:root {
  /* === Layout === */
  --page-width: 76vw;
  --gallery-width: 84vw;
  --site-side-padding: clamp(2rem, 6vw, 6rem);
  --project-side-padding: clamp(2rem, 4vw, 2rem);
  --project-3-meta-icon-offset-y: -0.6rem;

  /* === Colors === */
  --color-background: #d0c0ac;
  --color-surface: #f3eadc;
  --color-surface-alt: #c3b39e;
  --color-text: #8b6a4f;
  --color-text-strong: #3d3126;
  --color-text-dark: #2f241a;
  --color-accent: #80758c;
  --color-border: #6f543e;
  --color-overlay-dark: rgba(0, 0, 0, 0.4);
  --color-overlay-accent: rgba(128, 117, 140, 0.6);
  --color-dropdown-hover: rgba(139, 106, 79, 0.18);

  /* === Typography === */
  --font-family-base: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;

  --nav-font-size: clamp(1.1rem, 1.5vw, 2rem);
  --nav-font-weight: 500;
  --nav-letter-spacing: 0.05em;

  --section-title-size: clamp(2.2rem, 4vw, 5rem);
  --section-title-letter-spacing: 0.1em;

  --project-summary-font-size: clamp(1.1rem, 1.5vw, 1.75rem);
  --project-summary-line-height: 1.6;
  --project-meta-title-size: clamp(1.2rem, 1.8vw, 2rem);
  --project-meta-list-font-size: clamp(1rem, 1.35vw, 1.5rem);
  --project-meta-icon-size: clamp(1.4rem, 2vw, 2.5rem);
  --project-meta-icon-opacity: 0.85;

  --project-concept-title-size: clamp(1.5rem, 2.4vw, 3rem);
  --project-concept-title-letter-spacing: 0.08em;

  --modal-title-size: clamp(2rem, 3vw, 4rem);
  --modal-meta-size: clamp(1.1rem, 1.6vw, 2rem);
  --modal-description-size: clamp(1rem, 1.2vw, 1.6rem);

  --project-2-summary-font-size: clamp(1.4rem, 2.2vw, 3rem);
  --project-3-summary-size: clamp(1.1rem, 1.3vw, 1.5rem);
  --project-3-meta-list-size: clamp(1rem, 1.4vw, 1.6rem);

  /* === Spacing === */
  --nav-padding-y: 1rem;
  --nav-padding-x: 2rem;
  --nav-gap: clamp(1rem, 2vw, 2rem);
  --nav-icon-gap: clamp(0.75rem, 1.5vw, 2rem);

  --section-title-margin: clamp(3rem, 6vw, 6rem) 0;
  --illustration-grid-gap: clamp(1rem, 2vw, 2.5rem);
  --illustration-separator-gap: clamp(0.75rem, 1.2vw, 1.5rem);

  --home-main-logo-spacing: 3rem 0rem;
  --home-spacing: 7vh 10vh;

  --project-section-gap: clamp(2rem, 4vw, 4rem);
  --project-block-gap: 0.75rem;
  --project-block-footer-gap: 1.5rem;
  --project-block-margin-bottom: clamp(3rem, 6vw, 7rem);
  --project-meta-gap: clamp(2rem, 5vw, 6rem);
  --project-meta-list-gap: 1rem;

  --project-1-intro-gap: clamp(1rem, 2vw, 2rem);
  --project-1-title-gap: 1rem;
  --project-1-affiche-gap: clamp(2rem, 4vw, 4rem);
  --project-1-selection-gap: 2rem;
  --project-1-selection-margin-top: clamp(2rem, 6vw, 8rem);
  --project-1-concept-gap: clamp(1rem, 3vw, 2rem);
  --project-1-concept-margin-top: clamp(2rem, 5vw, 6rem);

  --project-2-intro-gap: clamp(1rem, 2vw, 1.5rem);
  --project-2-media-gap: clamp(2rem, 5vw, 5rem);
  --project-2-media-row-gap: clamp(1rem, 2vw, 2rem);

  --project-3-intro-gap: clamp(1.5rem, 4vw, 5rem);
  --project-3-meta-gap: clamp(2rem, 4vw, 6rem);
  --project-3-section-gap: clamp(2rem, 5vw, 5rem);
  --nattmara-row-gap: clamp(1rem, 3vw, 4rem);

  /* === Shared sizes === */
  --logo-height: min(42vw, 800px);
  --separator-height: min(42vw, 800px);
  --nav-signature-height: min(8.5vw, 160px);
  --nav-icon-height: min(2.35vw, 45px);
  --illustration-separator-height: min(5.2vw, 100px);
  --illustration-grid-max-width: 88vw;
  --gallery-hover-scale: 1.03;
  --gallery-hover-scale-home: 1.1;

  /* === Home === */
  --section-separator-home: 8vw;

  /* === Dropdown === */
  --dropdown-border-width: 0px;
  --dropdown-border-radius: 8px;
  --dropdown-min-width: 200px;

  /* === Modal === */
  --modal-width: 92vw;
  --modal-max-height: 90vh;
  --modal-border-width: 1px;
  --modal-border-radius: 12px;
  --modal-padding: clamp(1.5rem, 3vw, 4rem);
  --modal-gap: 2rem;
  --modal-content-gap: clamp(1.5rem, 3vw, 3rem);
  --modal-side-images-gap: 1.5rem;

  --modal-main-image-max-height: 72vh;
  --modal-side-image-width: min(9.5vw, 180px);
  --modal-side-image-width-mobile: min(20vw, 120px);
  --modal-close-size: 2rem;
  --modal-info-max-width: 40ch;
  --modal-overlay-blur: 10px;

  --modal-secondary-images-columns: 1;
  --modal-secondary-images-gap: 1rem;
  --modal-secondary-image-max-height: 220px;

  /* === Project 1 === */
  --project-1-max-width: 72vw;
  --project-1-title-offset-left: -14rem;
  --project-1-title-offset-up: -5rem;
  --project-1-title-scale: 1.2;
  --project-1-title-max-width: min(45vw, 900px);
  --project-1-subtitle-max-width: min(18vw, 350px);
  --project-1-subtitle-offset-left: 8rem;
  --project-1-subtitle-offset-up: 1rem;
  --project-1-summary-max-width: 70ch;
  --project-1-image-max-width: min(31vw, 600px);
  --project-1-affiche-max-width: min(43vw, 820px);
  --project-1-selection-max-width: min(23vw, 440px);
  --project-1-video-max-width: 83vw;
  --project-1-concept-max-width: min(47vw, 900px);
  --project-1-concept-art-1-width: min(47vw, 900px);
  --project-1-concept-art-2-width: min(36vw, 700px);
  --project-1-collage-max-width: min(62vw, 1200px);

  /* === Project 1 collage === */
  --project-collage-margin-top: 2rem;
  --project-collage-margin-bottom: -6rem;
  --collage-flamme-x: -10%;
  --collage-flamme-y: -18%;
  --collage-flamme-width: 14%;
  --collage-dune-x: 0%;
  --collage-dune-y: -15%;
  --collage-dune-width: 18%;
  --collage-dos-x: 25%;
  --collage-dos-y: -10%;
  --collage-dos-width: 18%;
  --collage-posing-x: 47%;
  --collage-posing-y: -8%;
  --collage-posing-width: 22%;
  --collage-expressions-x: 70%;
  --collage-expressions-y: -15%;
  --collage-expressions-width: 40%;
  --collage-gif-x: -22%;
  --collage-gif-y: 15%;
  --collage-gif-width: 50%;
  --collage-sac-x: 35%;
  --collage-sac-y: 45%;
  --collage-sac-width: 15%;

  /* === Shared project media === */
  --project-divider-width: 80%;
  --project-divider-opacity: 0.9;
  --project-decor-grid-gap: clamp(1rem, 2vw, 3rem);
  --project-decor-image-radius: 8px;
  --project-decor-colo-max-width: 63vw;
  --project-pano-to-color-gap: clamp(2rem, 6vw, 12rem);
  --project-animation-max-width: 73vw;
  --back-to-top-size: min(6.25vw, 120px);
  --back-to-top-margin: clamp(3rem, 6vw, 10rem) auto clamp(3rem, 5vw, 6rem);
  --back-to-top-hover-shadow: drop-shadow(0 0 12px rgba(128, 117, 140, 0.6));

  /* === Project 2 === */
  --project-2-moon-size: min(13.5vw, 260px);
  --project-2-title-max-width: min(42vw, 800px);
  --project-2-subtitle-max-width: min(21vw, 400px);
  --project-2-title-spacing: 0.5rem;
  --project-2-text-offset-y: -10%;
  --project-2-chara-max-width: 70vw;
  --project-2-concept-max-width: 70vw;
  --project-2-media-max-width: 83vw;
  --project-2-media-main-max-width: 85vw;
  --project-2-media-small-1-max-width: min(42vw, 800px);
  --project-2-media-small-2-max-width: min(55vw, 1065px);

  /* === Project 3 === */
  --project-3-max-width: 72vw;
  --project-3-intro-image-width: min(35vw, 720px);
  --project-3-intro-title-width: min(35vw, 760px);
  --project-3-intro-summary-width: 78ch;
  --project-3-intro-image-x: 0px;
  --project-3-intro-image-y: 0px;
  --project-3-intro-title-x: 0px;
  --project-3-intro-title-y: 8vh;
  --project-3-intro-summary-x: 12vw;
  --project-3-intro-summary-y: 0px;
  --project-3-affiche-max-width: min(26vw, 500px);
  --project-3-affiche-side-gap: clamp(30rem, 5vw, 6rem);
  --project-3-affiche-side-inner-gap: 5rem;

  /* === Nattmara gallery === */
  --nattmara-lac-max-width: min(31vw, 800px);
  --nattmara-compo-max-width: min(29vw, 750px);

  --nattmara-gif-label-width: min(30vw, 560px);
  --nattmara-gif-label-left: -0.5rem;
  --nattmara-gif-label-bottom: -3rem;

  --nattmara-gif-note-width: min(14vw, 240px);
  --nattmara-gif-note-gap: 1rem;
  --nattmara-gif-note-offset-left: 0rem;
  --nattmara-gif-note-offset-top: 0rem;

  /* === À Propos === */
  --cv-height: 1920px;
  --cv-margin: 7rem;

  /* === Logos === */

  /* Social bar */
  --social-bar-width: 44vw;
  --social-bar-thickness: 3px;
  --social-bar-color: #8b6a4f;
  --social-bar-radius: 999px;
  --social-bar-margin-top: 1rem;

  /* Social logos */
  --social-logo-size: 1.8vw;
  --social-logo-gap: 3rem;
  --social-logos-margin-top: 1.5rem;
  --social-logos-margin-down: 2.5rem;

  /* Hover tint */
  --social-logo-hover-filter: brightness(0) saturate(100%) invert(52%) sepia(15%) saturate(600%) hue-rotate(235deg);
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-background);
  color: var(--color-text-strong);
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

main {
  width: 100%;
}

/* === Shared navigation === */

.nav-bar nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nav-gap);
  padding: var(--nav-padding-y) var(--nav-padding-x);
}

.nav-button {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  letter-spacing: var(--nav-letter-spacing);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.nav-button:hover {
  color: var(--color-accent);
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: var(--nav-icon-gap);
}

.nav-icons img {
  height: var(--nav-icon-height);
  width: auto;
  display: block;
}

.nav-icons .nav-icon--signature {
  height: var(--nav-signature-height);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: var(--dropdown-min-width);
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  background-color: var(--color-surface-alt);
  border: var(--dropdown-border-width) solid var(--color-border);
  border-radius: var(--dropdown-border-radius);
}

.dropdown-menu a {
  position: relative;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background-color: var(--color-dropdown-hover);
}

.dropdown-menu a::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(111, 84, 62, 0.15), rgba(111, 84, 62, 0.35), rgba(111, 84, 62, 0.2));
}

.dropdown-menu a:last-child::after {
  display: none;
}

/* === Home === */

.main-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: var(--home-main-logo-spacing);
}

.main-logo img {
  height: var(--logo-height);
  width: auto;
}

.section-separator {
  display: flex;
  justify-content: center;
}

.section-separator img {
  height: var(--separator-height);
  width: auto;
  display: block;
}

.section-separator-home {
  display: flex;
  justify-content: center;
  margin-block: var(--home-spacing);
}

.section-separator-home img {
  height: var(--section-separator-home);
  width: auto;
  display: block;
}

.home-layout {
  width: min(88vw, 1800px);
  margin: 0 auto;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--illustration-grid-gap);
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
}

.home-grid .gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;
  cursor: pointer;
  transition: transform 0.25s ease;
  text-decoration: none;
}

.home-grid .gallery-item.portrait {
  grid-row: span 2;
  aspect-ratio: auto;
  height: 100%;
}

.home-grid .gallery-item.paysage {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.home-grid .gallery-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-grid .gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-overlay-accent);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.home-grid .gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.home-grid .gallery-title {
  color: var(--color-surface);
  font-size: clamp(1.4rem, 2.8vw, 5rem);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
}

.home-grid .gallery-item:hover {
  transform: scale(var(--gallery-hover-scale-home));
}

.home-grid .gallery-overlay {
  display: none;
}

/* === Illustration === */

.illustration-layout {
  width: min(88vw, 1800px);
  margin: 0 auto;
}

.section-title {
  font-size: var(--section-title-size);
  font-weight: 400;
  letter-spacing: var(--section-title-letter-spacing);
  color: var(--color-accent);
  white-space: nowrap;
}

.section-separator-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--illustration-separator-gap);
  margin: var(--section-title-margin);
}

.section-separator-illustration img {
  height: var(--illustration-separator-height);
  width: auto;
  display: block;
}

.illustration-grid {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--illustration-grid-gap);
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
}

.illustration-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait {
  grid-row: span 2;
}

.paysage {
  grid-column: span 2;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: transform 0.25s ease;
  --gallery-fit: cover;
}

.gallery-item.portrait {
  aspect-ratio: auto;
  height: 100%;
}

.gallery-item.paysage {
  aspect-ratio: 2 / 1;
}

.gallery-item:hover {
  transform: scale(var(--gallery-hover-scale));
}

.gallery-image,
.illustration-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-fit: var(--gallery-fit);
}

.gallery-item.no-crop {
  --gallery-fit: contain;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-overlay-accent);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-title {
  color: var(--color-surface);
  font-size: clamp(1.4rem, 2.8vw, 5rem);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
}

/* === Illustration modal === */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal[hidden] {
  display: none;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-dark);
  backdrop-filter: blur(var(--modal-overlay-blur));
}

.modal-content {
  position: relative;
  z-index: 1;
  max-width: var(--modal-width);
  max-height: var(--modal-max-height);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.8fr);
  gap: var(--modal-content-gap);
  background-color: var(--color-surface);
  border: var(--modal-border-width) solid var(--color-border);
  border-radius: var(--modal-border-radius);
  padding: var(--modal-padding);
}

.modal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  border: 0;
  background: none;
  color: var(--color-text-strong);
  font-size: var(--modal-close-size);
  cursor: pointer;
}

.modal-left {
  display: flex;
  justify-content: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--modal-gap);
  align-items: flex-start;
  min-width: 0;
}

.modal-main-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

#modal-main-image {
  width: 100%;
  max-width: var(--modal-main-image-max-width);
  max-height: var(--modal-main-image-max-height);
  height: auto;
  display: block;
  object-fit: contain;
}

.modal-side-images {
  display: grid;
  grid-template-columns: repeat(var(--modal-secondary-images-columns), minmax(0, 1fr));
  gap: var(--modal-secondary-images-gap);
  align-self: center;
  margin-top: 1rem;
  justify-items: center;
}

.modal-side-images img {
  width: auto;
  max-width: 100%;
  max-height: var(--modal-secondary-image-max-height);
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 0.4rem;
}

.modal-info {
  display: flex;
  flex-direction: column;
  gap: var(--modal-gap);
  min-width: 0;
}

.modal-title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: var(--modal-title-size);
  line-height: 1.1;
  color: var(--color-text);
}

.modal-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: var(--modal-meta-size);
  color: var(--color-text-strong);
}

.modal-meta li:empty,
.modal-description:empty {
  display: none;
}

.modal-meta li::before {
  content: "";
}

.modal-description {
  margin: 0;
  max-width: var(--modal-info-max-width);
  font-size: var(--modal-description-size);
  line-height: 1.7;
  color: var(--color-text-dark);
}

.modal-content.modal-content--image-only {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 80vw;
  max-height: 80vh;
  padding: 2.5rem;
  overflow: hidden;
  grid-template-columns: none !important;
}

.modal-content.modal-content--image-only .modal-left {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.modal-content.modal-content--image-only .modal-main-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content.modal-content--image-only #modal-main-image {
  width: auto;
  height: auto;
  max-width: calc(80vw - 5rem);
  max-height: calc(80vh - 5rem);
  object-fit: contain;
  display: block;
}

.modal-content.modal-content--image-only .modal-info {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

.modal-content.modal-content--image-only .modal-side-images {
  display: none !important;
}

/* === Variant modal === */

/* Chicken */
.modal-content--chickens .modal-side-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  justify-items: center;
  align-items: start;
}

.modal-content--chickens .modal-side-images img {
  width: 100%;
  max-width: 220px;
  max-height: 250px;
  height: auto;
  object-fit: contain;
}

.modal-content--chickens .modal-side-images img:nth-child(3):last-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 180px;
}

/* Spill the tea */

.modal-content--spill-tea {
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.95fr);
}

.modal-content--spill-tea .modal-project {
  width: 100%;
  text-align: center;
}

.modal-content--spill-tea .modal-side-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-self: start;
  margin-top: 1.5rem;
  justify-items: center;
  align-items: start;
}

.modal-content--spill-tea .modal-side-images img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.modal-content--spill-tea .modal-side-images img:nth-child(1) {
  max-width: 610px;
  max-height: 660px;
}

.modal-content--spill-tea .modal-side-images img:nth-child(2) {
  max-width: 250px;
  max-height: 290px;
}

.modal-content--spill-tea .modal-side-images img:nth-child(3):last-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 460px;
  max-height: 220px;
  margin-top: 80px;
}

/* Pikmin Chaos */

.modal-content--pikmin {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.7fr);
  align-items: center;
}

.modal-content--pikmin .modal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.modal-content--pikmin .modal-title,
.modal-content--pikmin .modal-meta,
.modal-content--pikmin .modal-description {
  display: none;
}

.modal-content--pikmin .modal-side-images {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  min-height: 100%;
  width: 100%;
}

.modal-content--pikmin .modal-side-images img {
  width: auto;
  max-width: 420px;
  max-height: 72vh;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Tea-Time, Poussette */

.modal-content--tea-time {
  grid-template-columns: minmax(0, 1.2fr) minmax(520px, 0.9fr);
}

.modal-content--tea-time .modal-project {
  width: 100%;
  text-align: center;
}

.modal-content--tea-time .modal-side-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-self: start;
  margin-top: 1.5rem;
  justify-items: center;
  align-items: start;
  margin-top: 3rem;
  margin-left: -5rem;
}

.modal-content--tea-time .modal-side-images img {
  width: 100%;
  max-width: 580px;
  max-height: 680px;
  height: auto;
  display: block;
  object-fit: contain;
}

.modal-content--poussette {
  grid-template-columns: minmax(0, 1.2fr) minmax(520px, 0.9fr);
}

.modal-content--poussette .modal-side-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: fit-content;
  justify-items: center;
  align-items: start;
  align-self: start;
  justify-self: start;
  margin-top: 5rem;
  margin-left: -7rem;
}

.modal-content--poussette .modal-side-images img {
  width: 100%;
  max-width: 580px;
  max-height: 680px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Clair-Obscur */

.modal-content--clair-obscur {
  grid-template-columns: minmax(0, 1.1fr) minmax(520px, 1fr);
  align-items: center;
}
.modal-content--clair-obscur .modal-info {
  justify-content: center;
}

.modal-content--clair-obscur .modal-side-images {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.modal-content--clair-obscur .modal-side-images img {
  width: auto;
  max-width: 420px;
  max-height: 75vh;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Greenville */

.modal-content--greenville {
  grid-template-columns: minmax(0, 0.95fr) minmax(500px, 1fr);
  align-items: start;
}

.modal-content--greenville #modal-main-image {
  max-width: 100%;
  max-height: 62vh;
}

.modal-content--greenville .modal-title,
.modal-content--greenville .modal-project {
  width: 100%;
  text-align: center;
}

.modal-content--greenville .modal-meta {
  align-items: center;
}

.modal-content--greenville .modal-side-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  justify-items: center;
  align-items: start;
  margin-top: 1.5rem;
}

.modal-content--greenville .modal-side-images img {
  width: 100%;
  max-width: 420px;
  max-height: 250px;
  height: auto;
  display: block;
  object-fit: contain;
}

.modal-content--greenville .modal-left {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

/* Ziran */

.modal-content--ziran {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  /*   grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr); */
  align-items: stretch;
}

.modal-content--ziran .modal-left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content--ziran #modal-main-image {
  width: 100%;
  max-width: 100%;
  max-height: 78vh; /*82vh*/
  height: auto;
  display: block;
  object-fit: contain;
}

.modal-content--ziran .modal-title,
.modal-content--ziran .modal-project {
  width: 100%;
  text-align: center;
}

.modal-content--ziran .modal-meta {
  align-items: center;
}

.modal-content--ziran .modal-info {
  justify-content: center;
  align-items: center;
}

.modal-content--ziran .modal-side-images {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1.5rem;
}

.modal-content--ziran .modal-side-images img {
  width: auto;
  max-width: 260px;
  max-height: 260px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* === Shared project pages === */

.project-1,
.project-2,
.project-3 {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--project-side-padding);
}

.project-1 section,
.project-2 section {
  margin-top: var(--project-section-gap);
}

.project-3 section {
  margin-top: var(--project-3-section-gap);
}

.project-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--project-1-intro-gap);
  align-items: center;
}

.project-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.project-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

.project-titles {
  position: relative;
}

.project-title-image,
.project-subtitle-image {
  width: 100%;
  height: auto;
  display: block;
}

.project-summary {
  max-width: var(--project-1-summary-max-width);
  margin-top: 3em;
  margin-left: 3em;
  font-size: var(--project-summary-font-size);
  line-height: var(--project-summary-line-height);
}

.project-meta-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--project-meta-gap);
  align-items: start;
}

.project-meta-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project-meta-title,
.project-role-list {
  margin: 0;
  font-size: var(--project-meta-title-size);
  line-height: 1.6;
}

.project-role-list {
  padding: 0;
  list-style: none;
}

.project-role-list li::before {
  content: "— ";
}

.project-meta-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--project-meta-list-gap);
  font-size: var(--project-meta-list-font-size);
}

.project-meta-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.project-meta-icon {
  width: var(--project-meta-icon-size);
  height: auto;
  opacity: var(--project-meta-icon-opacity);
  flex-shrink: 0;
  align-self: center;
}

.project-video {
  display: flex;
  justify-content: center;
}

.video-wrapper {
  width: 100%;
  max-width: var(--project-1-video-max-width);
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.project-block {
  display: flex;
  flex-direction: column;
  gap: var(--project-block-gap);
  width: 100%;
  margin-bottom: var(--project-block-margin-bottom);
}

.project-block-footer {
  display: flex;
  align-items: center;
  gap: var(--project-block-footer-gap);
}

.project-concept-title {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--project-concept-title-size);
  letter-spacing: var(--project-concept-title-letter-spacing);
  white-space: nowrap;
}

.project-concept-divider {
  flex: 1;
  width: auto;
  max-width: var(--project-divider-width);
  height: auto;
  opacity: var(--project-divider-opacity);
}

.back-to-top {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: var(--back-to-top-margin);
  cursor: pointer;
}

.back-to-top img {
  width: var(--back-to-top-size);
  height: auto;
  z-index: 1;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.star-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

.back-to-top:hover .star-overlay {
  opacity: 1;
}

.back-to-top:hover img {
  transform: scale(1.1) rotate(-5deg);
  filter: var(--back-to-top-hover-shadow) brightness(0) saturate(100%) invert(52%) sepia(15%) saturate(600%)
    hue-rotate(235deg);
}

/* === Project 1 === */

.project-1 {
  max-width: var(--project-1-max-width);
}

.project-1 .project-titles {
  transform: translateX(var(--project-1-title-offset-left)) translateY(var(--project-1-title-offset-up))
    scale(var(--project-1-title-scale));
  transform-origin: left top;
}

.project-1 .project-title-image {
  max-width: var(--project-1-title-max-width);
}

.project-1 .project-subtitle-image {
  max-width: var(--project-1-subtitle-max-width);
  opacity: 0.9;
  position: relative;
  left: var(--project-1-subtitle-offset-left);
  top: var(--project-1-subtitle-offset-up);
}

.project-1 .project-visual img {
  max-width: var(--project-1-image-max-width);
}

.project-affiche {
  display: grid;
  grid-template-columns: minmax(0, var(--project-1-affiche-max-width)) 1fr;
  gap: var(--project-1-affiche-gap);
}

.project-affiche-image {
  justify-self: start;
}

.project-affiche-image img,
.project-selection-image,
.project-concepts img,
.rendu-final {
  width: 100%;
  height: auto;
  display: block;
}

.project-selections {
  display: flex;
  flex-direction: column;
  gap: var(--project-1-selection-gap);
  align-items: flex-start;
  margin-top: var(--project-1-selection-margin-top);
}

.project-selection-image {
  max-width: var(--project-1-selection-max-width);
}

.project-concepts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--project-1-concept-gap);
  margin-top: var(--project-1-concept-margin-top);
}

.concept-art-1 {
  width: var(--project-1-concept-art-1-width);
}

.concept-art-2 {
  width: var(--project-1-concept-art-2-width);
}

.project-concepts img {
  max-width: var(--project-1-concept-max-width);
  margin: 0 auto;
}

.project-character-design {
  gap: 0;
}

.project-concept-collage {
  position: relative;
  width: 100%;
  max-width: var(--project-1-collage-max-width);
  aspect-ratio: 16 / 9;
  margin: 4rem auto;
}

.collage-item {
  position: absolute;
  max-width: 100%;
  height: auto;
}

.flamme {
  left: var(--collage-flamme-x);
  top: var(--collage-flamme-y);
  width: var(--collage-flamme-width);
}

.dune {
  left: var(--collage-dune-x);
  top: var(--collage-dune-y);
  width: var(--collage-dune-width);
}

.dos {
  left: var(--collage-dos-x);
  top: var(--collage-dos-y);
  width: var(--collage-dos-width);
}

.posing {
  left: var(--collage-posing-x);
  top: var(--collage-posing-y);
  width: var(--collage-posing-width);
}

.expressions {
  left: var(--collage-expressions-x);
  top: var(--collage-expressions-y);
  width: var(--collage-expressions-width);
}

.gif {
  left: var(--collage-gif-x);
  top: var(--collage-gif-y);
  width: var(--collage-gif-width);
}

.sac {
  left: var(--collage-sac-x);
  top: var(--collage-sac-y);
  width: var(--collage-sac-width);
}

.decor-traits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--project-decor-grid-gap);
}

.decor-traits img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--project-decor-image-radius);
}

.decor-pano-group {
  display: flex;
  flex-direction: column;
  gap: var(--project-2-media-row-gap);
}

.decor-couleur-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--project-decor-grid-gap);
  margin-top: var(--project-pano-to-color-gap);
}

.decor-couleur-group img {
  width: 100%;
  max-width: var(--project-decor-colo-max-width);
}

.project-animation-image {
  display: flex;
  justify-content: center;
}

.rendu-final {
  max-width: var(--project-animation-max-width);
}

/* === Project 2 === */

.project-2 .project-intro {
  grid-template-columns: auto 1fr;
  align-items: start;
  justify-content: center;
  gap: var(--project-2-intro-gap);
}

.project-2 .project-visual img {
  max-width: var(--project-2-moon-size);
}

.project-2 .project-text {
  gap: 1.2rem;
  transform: translateY(var(--project-2-text-offset-y));
}

.project-2 .project-titles {
  display: flex;
  flex-direction: column;
  gap: var(--project-2-title-spacing);
  transform: none;
}

.project-2 .project-title-image {
  max-width: var(--project-2-title-max-width);
}

.project-2 .project-subtitle-image {
  max-width: var(--project-2-subtitle-max-width);
  margin-left: 0;
}

.project-2 .project-summary {
  margin: 0;
  font-size: var(--project-2-summary-font-size);
  font-weight: 400;
}

.project-2-chara-design,
.project-2-concept-art {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.project-2-chara-design {
  max-width: var(--project-2-chara-max-width);
}

.project-2-concept-art {
  max-width: var(--project-2-concept-max-width);
}

.project-2-media-layout {
  width: 100%;
  max-width: var(--project-2-media-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--project-2-media-gap);
}

.project-2-media-main {
  width: 100%;
  max-width: var(--project-2-media-main-max-width);
  height: auto;
  display: block;
  margin: 0 auto;
}

.project-2-media-row {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: var(--project-2-media-row-gap);
}

.project-2-media-small-1,
.project-2-media-small-2 {
  width: 100%;
  height: auto;
  display: block;
}

.project-2-media-small-1 {
  max-width: var(--project-2-media-small-1-max-width);
}

.project-2-media-small-2 {
  max-width: var(--project-2-media-small-2-max-width);
}

/* Handles the malformed structure around the final footer in project2.html */
.project-2 .project-2-media + .project-block-footer {
  margin-top: -2rem;
  margin-bottom: var(--project-block-margin-bottom);
}

/* === Project 3 === */

.project-3 {
  max-width: var(--project-3-max-width);
}

.project-intro-3 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "visual title"
    "summary summary";
  gap: var(--project-3-intro-gap);
  align-items: start;
}

.project-visual-3 {
  grid-area: visual;
  transform: translate(var(--project-3-intro-image-x), var(--project-3-intro-image-y));
}

.project-visual-3 img {
  width: 100%;
  max-width: var(--project-3-intro-image-width);
  height: auto;
  display: block;
}

.project-text-3 {
  grid-area: title;
  min-width: 0;
  transform: translate(var(--project-3-intro-title-x), var(--project-3-intro-title-y));
}

.project-title-image-3 {
  width: 100%;
  max-width: var(--project-3-intro-title-width);
  height: auto;
  display: block;
}

.project-3 .project-summary {
  grid-area: summary;
  max-width: var(--project-3-intro-summary-width);
  margin: 0;
  font-size: var(--project-3-summary-size);
  line-height: 1.6;
  transform: translate(var(--project-3-intro-summary-x), var(--project-3-intro-summary-y));
  text-align: justify;
  text-justify: inter-word;
}

.project-3 .project-meta-section {
  gap: var(--project-3-meta-gap);
}

.project-3 .project-meta-list {
  font-size: var(--project-3-meta-list-size);
}

.project-3 .project-meta-icon {
  transform: translateY(var(--project-3-meta-icon-offset-y));
}

.project-affiche-3 {
  display: grid;
  grid-template-columns: minmax(280px, var(--project-3-affiche-max-width)) 1fr;
  gap: var(--project-3-affiche-side-gap);
  align-items: start;
}

.project-affiche-image-3 img {
  width: 100%;
  max-width: var(--project-3-affiche-max-width);
  height: auto;
  display: block;
}

.project-affiche-side-3 {
  display: flex;
  flex-direction: column;
  gap: var(--project-3-affiche-side-inner-gap);
}

.project-gallery-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}

.project-gallery-images > img {
  width: 100%;
  max-width: var(--gallery-width);
  height: auto;
  display: block;
}

.gallery-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nattmara-row-gap);
  width: 100%;
}

.project-gallery-images .gallery-row img {
  width: auto;
  height: auto;
  display: block;
}

.project-gallery-images .gallery-row .gallery-lac {
  width: min(100%, var(--nattmara-lac-max-width));
}

.project-gallery-images .gallery-row .gallery-compo {
  width: min(100%, var(--nattmara-compo-max-width));
}

.gallery-gif-card {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.gallery-gif-main {
  width: 100%;
  max-width: var(--gallery-width);
  height: auto;
  display: block;
}

.gallery-gif-card--single .gallery-gif-main {
  width: 100%;
  max-width: var(--gallery-width);
}

.gallery-gif-card--row .gallery-compo {
  width: min(100%, var(--nattmara-compo-max-width));
  height: auto;
  display: block;
}

.gallery-gif-label {
  position: absolute;
  left: var(--nattmara-gif-label-left);
  bottom: var(--nattmara-gif-label-bottom);
  width: var(--nattmara-gif-label-width);
  height: auto;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.gallery-gif-card--row .gallery-gif-label {
  left: var(--nattmara-row-gif-label-left);
  bottom: var(--nattmara-row-gif-label-bottom);
  width: var(--nattmara-row-gif-label-width);
}

.gallery-compo-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nattmara-gif-note-gap);
  width: min(100%, var(--nattmara-compo-max-width));
}

.gallery-compo-stack .gallery-compo {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-gif-note {
  width: var(--nattmara-gif-note-width);
  height: auto;
  display: block;
  margin-left: var(--nattmara-gif-note-offset-left);
  margin-top: var(--nattmara-gif-note-offset-top);
}

/* === About === */

body:has(main .main-logo img[src*="Props_CarteMenottes"]) .main-logo img {
  height: min(35vw, 650px);
}

.cv {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: var(--cv-margin);
}

.cv img {
  height: var(--cv-height);
  width: auto;
}

/* === Logos */

.social-links-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.social-links-bar {
  width: var(--social-bar-width);
  height: var(--social-bar-thickness);
  margin-top: var(--social-bar-margin-top);
  background-color: var(--social-bar-color);
  border-radius: var(--social-bar-radius);
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--social-logo-gap);
  margin-top: var(--social-logos-margin-top);
  margin-bottom: var(--social-logos-margin-down);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-logo {
  width: var(--social-logo-size);
  height: auto;
  display: block;
  transition:
    transform 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
}

.social-links a:hover .social-logo {
  transform: scale(1.08);
  filter: var(--social-logo-hover-filter);
}

/* === Responsive === */

@media (max-width: 1000px) {
  .modal-content {
    grid-template-columns: 1fr;
  }

  .modal-left {
    grid-template-columns: 1fr;
  }

  .modal-side-images {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .modal-side-images img {
    width: var(--modal-side-image-width-mobile);
  }

  .illustration-layout {
    grid-template-columns: 1fr;
    padding-inline: var(--site-side-padding);
  }

  .illustration-grid {
    grid-column: auto;
  }

  .project-intro,
  .project-meta-section,
  .project-affiche,
  .project-intro-3,
  .project-affiche-3 {
    grid-template-columns: 1fr;
  }

  .project-intro-3 {
    grid-template-areas:
      "visual"
      "title"
      "summary";
  }

  .project-2 .project-intro {
    grid-template-columns: 1fr;
  }

  .project-2 .project-text {
    transform: none;
  }

  .project-2-media-row,
  .project-concepts,
  .decor-traits,
  .decor-couleur-group {
    grid-template-columns: 1fr;
  }

  .project-summary,
  .project-3 .project-summary,
  .project-2 .project-summary {
    margin: 0;
    max-width: 100%;
  }

  .project-1 .project-titles {
    transform: none;
  }

  .project-1 .project-subtitle-image {
    left: 0;
    top: 0;
    margin-top: 0.5rem;
  }

  .project-selections {
    margin-top: 0;
  }

  .project-block-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-concept-divider {
    max-width: 100%;
  }

  .project-gallery-images {
    gap: 3rem;
  }
}

@media (max-width: 700px) {
  .nav-bar nav {
    flex-direction: column;
  }

  .nav-icons .nav-icon--signature {
    height: min(22vw, 120px);
  }

  .nav-icons img:not(.nav-icon--signature) {
    height: min(7vw, 36px);
  }

  .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
  }

  .section-separator-illustration {
    flex-direction: column;
  }

  .illustration-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item,
  .gallery-item.portrait {
    aspect-ratio: auto;
  }

  .gallery-image {
    height: auto;
  }

  .back-to-top {
    margin-inline: auto;
  }
}