/* ==================================================
   EUNICA PERERA - PORTFOLIO
   Reconstruction HTML/CSS/JS pur du site Framer
   Pixel-perfect basé sur viewport de référence 1440px
   ================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Neue Haas Grotesk Display Pro 55 Roman";
  src: url("../fonts/NeueHaasGroteskDisplay-Roman.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display Pro 35 Thin";
  src: url("../fonts/NeueHaasGroteskDisplay-Thin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular-Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ---------- VARIABLES ---------- */
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #4f4f4f;
  --color-accent: #a7ff00;
  --color-menu: #bcf257;

  --font-sans: "Neue Haas Grotesk Display Pro 55 Roman", "Helvetica Neue", Arial, sans-serif;
  --font-thin: "Neue Haas Grotesk Display Pro 35 Thin", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: clip; /* clip = pas de scroll container, donc sticky fonctionne */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button {
  font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer; padding: 0;
}

/* ==================================================
   BURGER MENU — exactement comme l'original
   24×16px à (16, 16), 3 lignes de 1px noires
   ================================================== */
.burger {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 200;
  width: 24px;
  height: 16px;
  background: transparent;
}

/* Barres en absolute pour éviter les artefacts subpixel de flex space-between */
.burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Positions en pixels entiers pour un rendu crisp identique sur les 3 barres */
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 7px; }
.burger__bar:nth-child(3) { top: 15px; height: 0.5px; }

.burger.is-open .burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.is-open .burger__bar:nth-child(2) {
  opacity: 0;
}
.burger.is-open .burger__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Panneau menu — 320×230 en haut à gauche, comme l'original */
.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  width: 320px;
  height: 230px;
  background: var(--color-menu);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 120px 0 16px 17px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(-12px);
}

.nav-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-menu__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-text);
  letter-spacing: normal;
  transition: opacity 0.2s ease;
}

.nav-menu__link:hover {
  opacity: 0.6;
}

/* ==================================================
   HOMEPAGE - LAYOUT PIXEL-PERFECT
   Design basé sur viewport 1633px (mesures live)
   ================================================== */
.homepage {
  position: relative;
  width: 100%;
  background: var(--color-bg);
}

/* HERO : sticky bottom — reste collé au bas du viewport pendant le scroll,
   puis se dépose naturellement au-dessus du footer */
.hero {
  position: sticky;
  bottom: 32px;
  margin-left: 16px;
  margin-bottom: 32px;
  z-index: 100;
  width: max-content;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 80px;
  line-height: 78px;
  letter-spacing: -3.2px;
  color: var(--color-text);
  margin: 0;
}

/* Animation du H1 hero : mot par mot (plus de clipping de lettres) */
.hero__title-word {
  display: inline-block;
  transform: translateY(30px);
  opacity: 0;
  animation: heroWordReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero__title-space { display: inline-block; width: 0.3em; }

@keyframes heroWordReveal {
  0%   { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.hero__subtitle {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #8a8a8a;
  white-space: pre-line;
}

/* SCROLL HINT : mention discrète "Scroll ↓" au centre du 1er viewport
   Position absolue → disparait complètement dès que l'on scrolle */
.scroll-hint {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  animation: scrollHintPulse 2.4s ease-in-out infinite;
}

@keyframes scrollHintPulse {
  0%, 100% { opacity: 0.35; }
  50%     { opacity: 1; }
}

.scroll-hint__arrow {
  font-size: 22px;
  font-style: normal;
  display: inline-block;
  animation: scrollHintArrow 2.4s ease-in-out infinite;
}

@keyframes scrollHintArrow {
  0%, 100% { transform: translateY(0); }
  50%     { transform: translateY(6px); }
}

/* GALERIE : 8 images positionnées absolument */
.gallery {
  position: relative;
  width: 100%;
  height: 225vw;
}

.project {
  position: absolute;
  display: block;
  pointer-events: auto;
  overflow: hidden; /* clip la bannière qui slide depuis le bas */
}

.project__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bannière titre verte fluo qui apparait au hover ou au flash */
.project__banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #abff0b;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.35s ease;
  pointer-events: none;
}

.project:hover .project__banner,
.project.is-flashing .project__banner {
  opacity: 1;
  transform: translateY(0);
}

/* ========== POSITIONS EXACTES MESURÉES @ 1633px ========== */

/* 1. Balaboosté : flush right ET flush top */
.project--01 {
  top: 0;
  right: 0;
  width: 43.723vw;
  aspect-ratio: 714 / 722;
}

/* 2. Lollipops : colonne gauche */
.project--02 {
  top: 44.213vw;
  left: 38.334vw;
  width: 17.024vw;
  aspect-ratio: 278 / 281;
}

/* 3. Ravisius : son angle bas-droit touche le haut-gauche de Incantations */
.project--03 {
  top: 61.421vw;
  right: 12.125vw; /* = largeur de Incantations, donc bord droit Ravisius = bord gauche Incantations */
  width: 24.311vw;
  aspect-ratio: 397 / 401;
}

/* 4. Organique : flush right (la plus petite) */
.project--04 {
  top: 85.977vw;
  right: 0;
  width: 12.125vw;
  aspect-ratio: 198 / 200;
}

/* 5. Inscription : colonne gauche, grande */
.project--05 {
  top: 98.225vw;
  left: 38.334vw;
  width: 36.436vw;
  aspect-ratio: 595 / 601;
}

/* 6. Kenzo : flush right, paysage */
.project--06 {
  top: 135.09vw;
  right: 0;
  width: 17.881vw;
  aspect-ratio: 292 / 207;
}

/* 7. Atelier : colonne gauche, carrée */
.project--07 {
  top: 147.766vw;
  left: 38.334vw;
  width: 24.311vw;
  aspect-ratio: 1 / 1;
}

/* 8. Photographies : colonne gauche, la plus grande */
.project--08 {
  top: 175.444vw;
  left: 38.334vw;
  width: 48.622vw;
  aspect-ratio: 794 / 802;
}

/* ==================================================
   FOOTER — dégradé blanc → vert fluo, tout aligné gauche
   ================================================== */
.site-footer {
  position: relative;
  width: 100%;
  background: linear-gradient(to bottom, #ffffff 0%, #a7ff00 100%);
  padding: 80px 16px 24px;
  font-family: var(--font-sans);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.site-footer__email {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 67.2px;
  letter-spacing: -2.24px;
  color: var(--color-text);
}

.site-footer__email a { color: inherit; }

.site-footer__tagline {
  margin: 8px 0 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-text);
}

.site-footer__copyright {
  margin: 56px 0 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-text);
}

/* ============================================
   PAGE À PROPOS
   ============================================ */
.about-page {
  position: relative;
  width: 100%;
  min-height: 1235px;
  padding: 0 0 80px 0;
}

.about__title {
  position: absolute;
  top: 56px;
  left: 16px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 96px;
  line-height: 93.12px;
  letter-spacing: -3.84px;
  color: var(--color-text);
  margin: 0;
  max-width: 720px;
  overflow-wrap: break-word;
}

.about__content {
  position: absolute;
  top: 56px;
  left: 62.58vw;
  width: 28vw;
  max-width: 580px;
  display: flex;
  flex-direction: column;
}

.about__paragraph {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
  margin: 0;
}

.about__paragraph + .about__paragraph { margin-top: 18px; }
.about__email-block { margin-top: 18px; }

.about__services-title {
  font-family: var(--font-thin);
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-text);
  margin: 24px 0 24px 0;
}

.about__services-list { list-style: none; margin: 0; padding: 0; }
.about__services-list li {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
}

.about__gallery { position: relative; width: 100%; }
.about__gallery-image { position: absolute; display: block; margin: 0; }
.about__gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__gallery-image--1 { top: 460px; left: 62.58vw; width: 17.21vw; aspect-ratio: 281 / 271; }
.about__gallery-image--2 { top: 731px; left: 86.22vw; width: 11.82vw; aspect-ratio: 193 / 129; }
.about__gallery-image--3 { top: 860px; left: 74.40vw; width: 11.82vw; aspect-ratio: 193 / 290; }

/* ============================================
   PAGES PROJETS DÉTAIL — Template commun
   ============================================ */
.project-page { position: relative; width: 100%; padding: 0 0 80px 0; }

/* Wrappers transparents pour le desktop — leurs enfants restent positionnés absolument par rapport à .project-page */
.project-page__image-row,
.project-page__next { display: contents; }

.project-page__title {
  position: absolute;
  top: calc(253 * 100vw / 1633);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 96px;
  line-height: 93.12px;
  letter-spacing: -3.84px;
  color: var(--color-text);
  margin: 0;
  padding: 0 16px;
}

/* Animation mot par mot (plus de clipping de lettres) */
.project-page__title-word {
  display: inline-block;
  transform: translateY(20px);
  opacity: 0;
  animation: titleWordReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.project-page__title-space { display: inline-block; width: 0.3em; }
@keyframes titleWordReveal {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.project-page__meta {
  position: absolute;
  top: calc(654 * 100vw / 1633);
  left: calc(16 * 100vw / 1633);
  right: calc(1067 * 100vw / 1633);
  display: flex;
  gap: calc(12 * 100vw / 1633);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
}
.project-page__meta-type { margin-right: auto; }

.project-page__description {
  position: absolute;
  left: calc(161 * 100vw / 1633);
  width: calc(700 * 100vw / 1633);
  max-width: 700px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
  margin: 0;
}
.project-page__description p { margin: 0 0 18px 0; }
.project-page__description p:last-child { margin-bottom: 0; }

.project-page__image { position: absolute; display: block; overflow: hidden; margin: 0; }
.project-page__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.project-page__next-label {
  font-family: var(--font-thin);
  font-weight: 300;
  font-size: 32px;
  line-height: 38px;
  color: var(--color-text);
  margin: 0;
}
.project-page__next-link { display: block; text-decoration: none; color: var(--color-text); transition: opacity 0.25s ease; }
.project-page__next-link:hover { opacity: 0.7; }
.project-page__next-thumb { position: relative; width: calc(198 * 100vw / 1633); height: calc(198 * 100vw / 1633); overflow: hidden; }
.project-page__next-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-page__next-banner {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #abff0b; padding: 6px 10px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 9px; line-height: 12px; color: var(--color-text);
  text-align: center; white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.35s ease;
  pointer-events: none;
}
.project-page__next-link:hover .project-page__next-banner,
.project-page__next-link.is-flashing .project-page__next-banner { opacity: 1; transform: translateY(0); }
.project-page__next-title { display: none; }

/* === BALABOOSTÉ === */
.balabooste-page { min-height: calc(5940 * 100vw / 1633); padding-bottom: 0; }
.balabooste-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1498 * 100vw / 1633); }
.balabooste-page .project-page__image--2 { top: calc(2152 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(859 * 100vw / 1633); }
.balabooste-page .project-page__image--3 { top: calc(2412 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(599 * 100vw / 1633); }
.balabooste-page .project-page__image--4 { top: calc(3011 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(1057 * 100vw / 1633); }
.balabooste-page .project-page__description { top: calc(3503 * 100vw / 1633); }
.balabooste-page .project-page__image--5 { top: calc(4068 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1486 * 100vw / 1633); }
.balabooste-page .project-page__next-label { position: absolute; top: calc(5650 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.balabooste-page .project-page__next-link--1 { position: absolute; top: calc(5650 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }

/* === LOLLIPOPS === */
.lolipop-page { min-height: calc(6073 * 100vw / 1633); padding-bottom: 0; }
.lolipop-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1486 * 100vw / 1633); }
.lolipop-page .project-page__image--2 { top: calc(2140 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(859 * 100vw / 1633); }
.lolipop-page .project-page__image--3 { top: calc(2404 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(595 * 100vw / 1633); }
.lolipop-page .project-page__image--4 { top: calc(2999 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(1057 * 100vw / 1633); }
.lolipop-page .project-page__description { top: calc(3481 * 100vw / 1633); }
.lolipop-page .project-page__image--5 { top: calc(4056 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1486 * 100vw / 1633); }
.lolipop-page .project-page__next-label { position: absolute; top: calc(5638 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.lolipop-page .project-page__next-link--1 { position: absolute; top: calc(5638 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }
.lolipop-page .project-page__next-link--2 { position: absolute; top: calc(5837 * 100vw / 1633); left: calc(1205 * 100vw / 1633); }

/* === RAVISIUS === */
.ravisius-page { min-height: calc(5511 * 100vw / 1633); padding-bottom: 0; }
.ravisius-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1239 * 100vw / 1633); }
.ravisius-page .project-page__image--2 { top: calc(1893 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(919 * 100vw / 1633); }
.ravisius-page .project-page__image--3 { top: calc(2202 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(610 * 100vw / 1633); }
.ravisius-page .project-page__image--4 { top: calc(2812 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(811 * 100vw / 1633); }
.ravisius-page .project-page__description { top: calc(3163 * 100vw / 1633); }
.ravisius-page .project-page__image--5 { top: calc(3623 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1352 * 100vw / 1633); }
.ravisius-page .project-page__next-label { position: absolute; top: calc(5071 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.ravisius-page .project-page__next-link--1 { position: absolute; top: calc(5071 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }
.ravisius-page .project-page__next-link--2 { position: absolute; top: calc(5269 * 100vw / 1633); left: calc(1205 * 100vw / 1633); }

/* === ORGANIQUE === */
.organique-page { min-height: calc(5965 * 100vw / 1633); padding-bottom: 0; }
.organique-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1496 * 100vw / 1633); }
.organique-page .project-page__image--2 { top: calc(2150 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(892 * 100vw / 1633); }
.organique-page .project-page__image--3 { top: calc(2439 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(603 * 100vw / 1633); }
.organique-page .project-page__image--4 { top: calc(3042 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(897 * 100vw / 1633); }
.organique-page .project-page__description { top: calc(3481 * 100vw / 1633); }
.organique-page .project-page__image--5 { top: calc(3939 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1486 * 100vw / 1633); }
.organique-page .project-page__next-label { position: absolute; top: calc(5522 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.organique-page .project-page__next-link--1 { position: absolute; top: calc(5522 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }
.organique-page .project-page__next-link--2 { position: absolute; top: calc(5720 * 100vw / 1633); left: calc(1205 * 100vw / 1633); }

/* === INSCRIPTION === */
.inscription-page { min-height: calc(5515 * 100vw / 1633); padding-bottom: 0; }
.inscription-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1487 * 100vw / 1633); }
.inscription-page .project-page__image--2 { top: calc(2141 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(708 * 100vw / 1633); }
.inscription-page .project-page__image--3 { top: calc(2580 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(269 * 100vw / 1633); }
.inscription-page .project-page__image--4 { top: calc(2849 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(771 * 100vw / 1633); }
.inscription-page .project-page__description { top: calc(3179 * 100vw / 1633); }
.inscription-page .project-page__image--5 { top: calc(3619 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1352 * 100vw / 1633); }
.inscription-page .project-page__next-label { position: absolute; top: calc(5067 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.inscription-page .project-page__next-link--1 { position: absolute; top: calc(5067 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }
.inscription-page .project-page__next-link--2 { position: absolute; top: calc(5265 * 100vw / 1633); left: calc(1205 * 100vw / 1633); }

/* === KENZO === */
.kenzo-page { min-height: calc(5390 * 100vw / 1633); padding-bottom: 0; }
.kenzo-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1310 * 100vw / 1633); }
.kenzo-page .project-page__image--2 { top: calc(1964 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(786 * 100vw / 1633); }
.kenzo-page .project-page__image--3 { top: calc(2226 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(524 * 100vw / 1633); }
.kenzo-page .project-page__image--4 { top: calc(2750 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(786 * 100vw / 1633); }
.kenzo-page .project-page__description { top: calc(3107 * 100vw / 1633); }
.kenzo-page .project-page__image--5 { top: calc(3536 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1310 * 100vw / 1633); }
.kenzo-page .project-page__video {
  position: absolute;
  top: calc(3536 * 100vw / 1633);
  left: calc(1007 * 100vw / 1633);
  width: calc(595 * 100vw / 1633);
  height: calc(335 * 100vw / 1633);
  margin: 0; overflow: hidden; background: #000;
}
.kenzo-page .project-page__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kenzo-page .project-page__next-label { position: absolute; top: calc(4942 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.kenzo-page .project-page__next-link--1 { position: absolute; top: calc(4942 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }
.kenzo-page .project-page__next-link--2 { position: absolute; top: calc(5140 * 100vw / 1633); left: calc(1205 * 100vw / 1633); }

/* === ATELIER === */
.atelier-page { min-height: calc(5806 * 100vw / 1633); padding-bottom: 0; }
.atelier-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1486 * 100vw / 1633); }
.atelier-page .project-page__image--2 { top: calc(2141 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(892 * 100vw / 1633); }
.atelier-page .project-page__image--3 { top: calc(2438 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(595 * 100vw / 1633); }
.atelier-page .project-page__image--4 { top: calc(3033 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(743 * 100vw / 1633); }
.atelier-page .project-page__description { top: calc(3387 * 100vw / 1633); }
.atelier-page .project-page__image--5 { top: calc(3776 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1486 * 100vw / 1633); }
.atelier-page .project-page__next-label { position: absolute; top: calc(5358 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.atelier-page .project-page__next-link--1 { position: absolute; top: calc(5358 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }
.atelier-page .project-page__next-link--2 { position: absolute; top: calc(5557 * 100vw / 1633); left: calc(1205 * 100vw / 1633); }

/* === PHOTOGRAPHIES === */
.photographies-page { min-height: calc(4960 * 100vw / 1633); padding-bottom: 0; }
.photographies-page .project-page__image--1 { top: calc(654 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1239 * 100vw / 1633); }
.photographies-page .project-page__image--2 { top: calc(1892 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(743 * 100vw / 1633); }
.photographies-page .project-page__image--3 { top: calc(2140 * 100vw / 1633); left: calc(611 * 100vw / 1633); width: calc(396 * 100vw / 1633); height: calc(496 * 100vw / 1633); }
.photographies-page .project-page__image--4 { top: calc(2636 * 100vw / 1633); left: calc(1007 * 100vw / 1633); width: calc(595 * 100vw / 1633); height: calc(743 * 100vw / 1633); }
.photographies-page .project-page__description { top: calc(2989 * 100vw / 1633); }
.photographies-page .project-page__image--5 { top: calc(3379 * 100vw / 1633); left: calc(16 * 100vw / 1633); width: calc(991 * 100vw / 1633); height: calc(1239 * 100vw / 1633); }
.photographies-page .project-page__next-label { position: absolute; top: calc(4714 * 100vw / 1633); left: calc(16 * 100vw / 1633); }
.photographies-page .project-page__next-link--1 { position: absolute; top: calc(4714 * 100vw / 1633); left: calc(1403 * 100vw / 1633); }

/* ============================================
   PAGE PROJETS (collection)
   ============================================ */
.projects-page { position: relative; width: 100%; padding: 137px 0 0 0; min-height: 720px; }
.projects-list { list-style: none; margin: 0; padding: 0 16px; }
.projects-list__item {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 67.2px;
  letter-spacing: -2.24px;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.25s ease;
}
.projects-list__item:hover { color: #abff0b; }
.projects-previews { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; }
.projects-preview { position: absolute; display: block; overflow: hidden; transition: opacity 0.3s ease; }
.projects-preview__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.projects-preview--1 { top: 137px; left: 61.66vw; width: 13.41vw; aspect-ratio: 219 / 283; }
.projects-preview--2 { top: 420px; left: 79.85vw; width: 13.41vw; aspect-ratio: 219 / 280; }

/* ============================================
   PAGE CONTACT
   ============================================ */
.contact-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__panel {
  position: relative;
  margin: 0;
  width: 68.46vw;
  max-width: 1118px;
  height: 347px;
  background: linear-gradient(90deg, #ffffff 24.6%, #a7ff00 73.6%);
  transform: translateX(-120%);
  animation: contactPanelSlide 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
@keyframes contactPanelSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(0); }
}
.contact__title,
.contact__subtitle,
.contact__section,
.contact__decoration {
  opacity: 0;
  animation: contactItemReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.contact__title         { animation-delay: 0.5s; }
.contact__subtitle      { animation-delay: 0.7s; }
.contact__section--email   { animation-delay: 0.85s; }
.contact__section--socials { animation-delay: 1s; }
.contact__decoration    { animation-delay: 0.7s; }
@keyframes contactItemReveal { 0% { opacity: 0; } 100% { opacity: 1; } }

.contact__title {
  position: absolute;
  top: 8px; left: 24px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 96px;
  line-height: 93.12px;
  letter-spacing: -3.84px;
  color: var(--color-text);
  margin: 0;
}
.contact__subtitle {
  position: absolute;
  top: 109px; left: 24px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
  margin: 0;
}
.contact__section { position: absolute; left: 24px; }
.contact__section--email { top: 188px; }
.contact__section--socials { top: 281px; }
.contact__label {
  font-family: var(--font-thin);
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0 0 8px 0;
}
.contact__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.25s ease;
}
.contact__link:hover { color: #abff0b; }
.contact__link:hover .contact__arrow { color: #abff0b; }
.contact__arrow { font-size: 14px; display: inline-block; transform: translateY(-1px); }
.contact__decoration {
  position: absolute;
  bottom: 24px; right: 24px;
  width: 118px; height: 147px;
  margin: 0;
}
.contact__decoration img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 1920px) {
  .burger { width: 28px; height: 18px; top: 20px; left: 20px; }
}

@media (max-width: 1199px) {
  .hero { bottom: 24px; }
  .hero__title { font-size: 64px; line-height: 62px; letter-spacing: -2.56px; }
  .site-footer__email { font-size: 48px; line-height: 58px; letter-spacing: -1.92px; }
}

@media (max-width: 1024px) {
  .hero__title { font-size: 56px; line-height: 54px; letter-spacing: -2.24px; }
  .site-footer__email { font-size: 40px; line-height: 48px; letter-spacing: -1.6px; }
}

@media (max-width: 809px) {
  .scroll-hint { display: none; }
  .homepage { display: flex; flex-direction: column; }
  .hero { order: 1; position: relative; bottom: auto; margin: 0; padding: 80px 16px 32px; width: 100%; }
  .hero__title { font-size: 56px; line-height: 54px; letter-spacing: -2.24px; }
  .hero__subtitle { margin-top: 16px; }
  .gallery { order: 2; position: relative; height: auto !important; display: flex; flex-direction: column; gap: 16px; padding: 0 16px 40px; }
  .gallery .project,
  .gallery .project--01, .gallery .project--02, .gallery .project--03, .gallery .project--04,
  .gallery .project--05, .gallery .project--06, .gallery .project--07, .gallery .project--08 {
    position: relative !important; left: auto !important; right: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
  }
  .project--01 { aspect-ratio: 714 / 722; }
  .project--02 { aspect-ratio: 278 / 281; }
  .project--03 { aspect-ratio: 397 / 401; }
  .project--04 { aspect-ratio: 198 / 200; }
  .project--05 { aspect-ratio: 595 / 601; }
  .project--06 { aspect-ratio: 292 / 207; }
  .project--07 { aspect-ratio: 1 / 1; }
  .project--08 { aspect-ratio: 794 / 802; }

  .nav-menu { width: min(320px, 100vw); height: auto; min-height: 230px; padding: 80px 16px 24px; }
  .site-footer { padding: 60px 16px 24px; }
  .site-footer__email { font-size: clamp(28px, 9vw, 40px); line-height: 1.15; letter-spacing: -1.2px; word-break: break-word; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }

  .about-page { padding: 80px 16px 60px; min-height: auto !important; }
  .about-page .about__title {
    position: relative !important; top: auto !important; left: auto !important;
    font-size: 56px; line-height: 54px; letter-spacing: -2.24px; max-width: 100%;
  }
  .about-page .about__content {
    position: relative !important; top: auto !important; left: auto !important;
    margin: 40px 0 0 0; width: 100% !important; max-width: 100%;
  }
  .about-page .about__gallery {
    position: relative; margin-top: 32px; display: flex; flex-direction: column; gap: 16px;
  }
  .about-page .about__gallery-image,
  .about-page .about__gallery-image--1,
  .about-page .about__gallery-image--2,
  .about-page .about__gallery-image--3 {
    position: relative !important; top: auto !important; left: auto !important;
    width: 100% !important; aspect-ratio: 4 / 3;
  }
  .about-page .about__gallery-image--3 { aspect-ratio: 3 / 4; }

  .project-page, .balabooste-page, .lolipop-page, .ravisius-page, .organique-page,
  .inscription-page, .kenzo-page, .atelier-page, .photographies-page {
    min-height: auto !important; padding: 80px 16px 60px;
    display: flex; flex-direction: column; gap: 16px;
  }

  /* Wrappers : flex sur mobile pour grouper les éléments */
  .project-page .project-page__image-row { display: flex; gap: 16px; width: 100%; }
  .project-page .project-page__image-row > .project-page__image { flex: 1 1 0; min-width: 0; width: auto !important; }
  .project-page .project-page__next { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; width: 100%; }

  /* Reset positioning/sizing — !important pour forcer l'override des règles par-page (spécificité 0,2,0) */
  .project-page .project-page__title {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    font-size: 48px; line-height: 48px; letter-spacing: -1.92px; text-align: left; padding: 0; margin: 0; width: auto;
  }
  .project-page .project-page__meta {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    flex-wrap: wrap; gap: 8px; margin: 0;
  }
  .project-page .project-page__meta-type { margin-right: 0; flex-basis: 100%; }

  /* Toutes les images : reset position/dimensions absolus */
  .project-page .project-page__image,
  .project-page .project-page__image--1,
  .project-page .project-page__image--2,
  .project-page .project-page__image--3,
  .project-page .project-page__image--4,
  .project-page .project-page__image--5 {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important; height: auto !important; aspect-ratio: auto; margin: 0;
  }

  /* Grandes images (1, 4, 5) — pleine largeur, ratio naturel */
  .project-page .project-page__image--1 img,
  .project-page .project-page__image--4 img,
  .project-page .project-page__image--5 img {
    width: 100%; height: auto; object-fit: contain;
  }

  /* Petites images appairées (2 et 3) — ratio 3/4 forcé pour s'aligner visuellement */
  .project-page .project-page__image--2,
  .project-page .project-page__image--3 {
    aspect-ratio: 3 / 4 !important; height: auto !important;
  }
  .project-page .project-page__image--2 img,
  .project-page .project-page__image--3 img {
    width: 100%; height: 100%; object-fit: cover;
  }

  .project-page .project-page__description {
    position: relative !important; top: auto !important; left: auto !important;
    width: 100% !important; max-width: 100%; margin: 0;
  }

  .project-page .project-page__next-label {
    position: relative !important; top: auto !important; left: auto !important;
    font-size: 24px; line-height: 28px; margin: 0;
  }
  .project-page .project-page__next-link--1,
  .project-page .project-page__next-link--2 {
    position: relative !important; top: auto !important; left: auto !important;
    margin: 0; width: 100%; max-width: 100%;
  }
  .project-page .project-page__next-thumb { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
  /* Bannière toujours visible sur mobile */
  .project-page .project-page__next-banner { opacity: 1; transform: translateY(0); }
  .project-page .project-page__next-title { display: none; }

  .kenzo-page .project-page__video {
    position: relative !important; top: auto !important; left: auto !important;
    width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0;
  }

  .contact-page { min-height: 100vh; padding: 80px 16px 60px; }
  .contact-page .contact__panel {
    position: relative !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important;
    background: linear-gradient(180deg, #ffffff 0%, #a7ff00 100%); padding: 24px 16px;
  }
  .contact-page .contact__title,
  .contact-page .contact__subtitle,
  .contact-page .contact__section,
  .contact-page .contact__decoration {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  }
  .contact-page .contact__title { font-size: 56px; line-height: 54px; letter-spacing: -2.24px; }
  .contact-page .contact__subtitle { margin: 16px 0 40px 0; }
  .contact-page .contact__section { margin: 0 0 32px 0; }
  .contact-page .contact__decoration { width: 118px !important; height: 147px !important; margin: 16px 0 0 0; }

  .projects-page { padding: 100px 16px 60px; min-height: auto !important; }
  .projects-page .projects-list__item { font-size: clamp(28px, 7.5vw, 40px); line-height: 1.15; letter-spacing: -1.2px; }
  .projects-page .projects-previews {
    position: relative !important; display: flex; gap: 16px; margin-top: 40px; z-index: auto;
  }
  .projects-page .projects-preview,
  .projects-page .projects-preview--1,
  .projects-page .projects-preview--2 {
    position: relative !important; top: auto !important; left: auto !important;
    width: 50% !important; aspect-ratio: 219 / 283;
  }
}

@media (max-width: 380px) {
  .hero__title { font-size: 44px; line-height: 44px; letter-spacing: -1.76px; }
  .nav-menu { width: 100vw; }
  .site-footer__email { font-size: 28px; }
}