@import url("fonts.css");

:root {
  --bg: #ededed;
  --text: #000000;
  --text-muted: #4d4d4d;
  --border: #000000;
  --header-side-padding: 20px;
  --breakpoint-desktop: 810px;
}

@media (min-width: 810px) and (max-width: 1199px) {
  /* Interpolation fluide entre tablette (810px) et desktop (1199px) pour
     le logo, la video et les marges de la grille, plutot que des valeurs
     fixes qui laissent trop de marge sur les petites largeurs tablette. */
  :root {
    /* 240px a 810px (= 20px de padding + 180px de logo + 40px de marge
       visible), jusqu'a 360px a 1199px (raccord avec le desktop). */
    --tablet-pad-left: calc(-9.87px + 30.848vw);
    /* 100px a 810px (marge sure par rapport a "studio"), jusqu'a 120px. */
    --tablet-pad-right: calc(58.37px + 5.14vw);
    --tablet-logo-width: clamp(180px, calc(-19.9px + 24.678vw), 276px);
    --tablet-video-width: clamp(274px, calc(-88.58px + 44.58vw), 446px);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "ABC Diatype", sans-serif;
  font-weight: 400;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
  display: block;
}

/* ---------- Header ---------- */

.site-logo {
  position: fixed;
  top: 20px;
  left: var(--header-side-padding);
  z-index: 40;
  width: 276px;
}

@media (min-width: 810px) and (max-width: 1199px) {
  .site-logo {
    width: var(--tablet-logo-width);
  }
}

.site-logo img {
  width: 100%;
  height: auto;
}

.header-links {
  position: fixed;
  top: 20px;
  right: var(--header-side-padding);
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 1.4;
}

.studio-link {
  display: inline-block;
  font-weight: 400;
  transform-origin: right center;
  transition: transform 0.15s ease;
}

.studio-link:hover {
  transform: scale(1.08);
}

.studio-link:active {
  transform: translateX(-7px);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.studio-link.is-active {
  transform: scale(1.08);
}

.instagram-link {
  position: fixed;
  bottom: 20px;
  right: var(--header-side-padding);
  z-index: 40;
  display: flex;
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.instagram-link svg {
  width: 100%;
  height: 100%;
}

.instagram-link:hover {
  transform: scale(1.15);
}

.menu-toggle {
  display: none;
  position: fixed;
  top: 16px;
  right: var(--header-side-padding);
  z-index: 60;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: color 0.2s ease;
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.menu-toggle[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.categories-nav {
  position: fixed;
  bottom: 20px;
  left: var(--header-side-padding);
  z-index: 40;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.4;
}

.categories-nav a {
  display: inline-block;
  width: fit-content;
  transform-origin: left center;
  transition: transform 0.15s ease;
}

.categories-nav a:hover {
  transform: scale(1.08);
}

.categories-nav a.is-active {
  transform: scale(1.18);
  font-weight: 700;
}

@media (min-width: 810px) {
  .menu-toggle {
    display: none !important;
  }
  .header-links {
    display: flex;
  }
}

@media (max-width: 809px) {
  .header-links {
    display: none;
  }
  .instagram-link {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .site-logo {
    /* Proportionnel a la largeur de l'image (meme formule que .project-tile,
       86.25% de (100vw - 40px)) pour garder le meme rapport sur tous les
       telephones, avec un plancher/plafond pour rester raisonnable. */
    width: clamp(196px, calc((100vw - 40px) * 0.673), 260px);
    /* Centree par rapport aux images (elles-memes centrees) pour rester
       entierement au-dessus d'une photo, pas dans la marge grise. */
    left: 50%;
    transform: translateX(-50%);
  }

  /* La nav du bas fait double emploi avec le menu "+" en mobile/tablette */
  .categories-nav {
    display: none;
  }

  /* Sur l'accueil, decale le "+" plus loin du bord de la video pour qu'il
     ne la touche plus (au lieu du bord ecran standard, plus proche). */
  body.home-page .menu-toggle {
    right: 7px;
  }
}

/* Logo/bouton "+" en mobile: noir par defaut, blanc uniquement quand
   le contenu juste derriere (video ou photo) est detecte comme sombre.
   Bascule geree par public/js/adaptive-header.js. */
.site-logo img {
  transition: filter 0.2s ease;
}

.site-logo.on-dark img {
  filter: invert(1);
}

.menu-toggle.on-dark {
  color: #fff;
}

/* ---------- Mobile / tablet menu overlay ---------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--header-side-padding);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-menu a {
  font-size: 32px;
  font-weight: 800;
  font-family: "ABC Diatype";
  display: inline-block;
  width: fit-content;
  transform-origin: left center;
  transition: transform 0.15s ease;
}

.mobile-menu a:hover {
  transform: scale(1.08);
}

.mobile-menu a.is-active {
  transform: scale(1.08);
}

a.mobile-menu__instagram {
  position: absolute;
  bottom: 24px;
  left: var(--header-side-padding);
  width: 22px;
  height: 22px;
  transform-origin: left center;
}

.mobile-menu__instagram svg {
  width: 100%;
  height: 100%;
}

body.menu-open {
  overflow: hidden;
}

/* ---------- Home: hero (fixe, la grille defile par-dessus) ---------- */

.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
}

@media (min-width: 810px) and (max-width: 1199px) {
  /* Tablette: la grille est decalee (marge pour le logo), donc on
     aligne la video sur la meme zone plutot que sur tout l'ecran. */
  .hero {
    padding-left: var(--tablet-pad-left);
    padding-right: var(--tablet-pad-right);
  }
}

.hero video {
  width: 446px;
  max-width: calc(100% - 40px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: translateY(-40px);
}

@media (min-width: 810px) and (max-width: 1199px) {
  .hero video {
    width: var(--tablet-video-width);
  }
}

@media (max-width: 809px) {
  .hero video {
    /* 10% plus petite que la contrainte de base (calc(100% - 40px)). */
    max-width: calc(90% - 36px);
    /* Remontee un peu plus qu'en desktop, pour ne pas paraitre trop basse. */
    transform: translateY(-80px);
  }
}

.hero-spacer {
  height: 100vh;
}

/* ---------- Ecran de chargement (accueil) ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader img {
  width: min(70px, 20vw);
  height: auto;
  animation: preloader-pulse 1.6s ease-in-out infinite;
}

@keyframes preloader-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.no-preloader .preloader {
  display: none;
}

/* ---------- Home: project grid ---------- */

.home {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding-top: 5px;
  padding-bottom: 120px;
}

.site-footer {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 18px 20px;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.portfolio-page {
  padding-top: 130px;
}

.project-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 25px;
}

.project-section:last-child {
  margin-bottom: 0;
}

@media (min-width: 810px) and (max-width: 1199px) {
  .project-section {
    /* Marges fluides en tablette: moins d'espace perdu sur les largeurs
       etroites, qui rejoignent progressivement les marges desktop. */
    align-items: flex-start;
    padding-left: var(--tablet-pad-left);
    padding-right: var(--tablet-pad-right);
  }
}

@media (min-width: 1200px) {
  .project-section {
    /* Marge symetrique (360px des deux cotes, la plus grande des deux
       contraintes de securite) pour que la grille reste centree sur le
       meme axe que la video du hero, au lieu d'etre decalee par rapport
       a elle avec des marges gauche/droite differentes. */
    align-items: center;
    padding-left: 360px;
    padding-right: 360px;
  }
}

.project-grid {
  width: 100%;
  max-width: 806px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.project-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.project-tile img,
.project-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-tile:hover img,
.project-tile:hover video {
  transform: scale(1.03);
}

.project-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.project-tile:hover::after {
  opacity: 1;
}

.project-tile__title {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-style: italic;
  font-size: 16px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

.project-tile:hover .project-tile__title {
  opacity: 1;
}

.project-tile--extra {
  display: none;
}

.project-grid.is-expanded .project-tile--extra {
  display: block;
}

.project-grid__more {
  width: 100%;
  max-width: 806px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.project-grid__more-label {
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--text);
  transition: opacity 0.2s ease;
}

.project-grid__more-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.project-grid__more:hover .project-grid__more-label,
.project-grid__more:hover .project-grid__more-arrow {
  opacity: 0.55;
}

.project-grid__more.is-expanded .project-grid__more-arrow {
  transform: rotate(180deg);
}

@media (max-width: 809px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
  .project-tile {
    width: 86.25%;
    margin: 0 auto;
  }
}

/* ---------- Project detail page ---------- */

.project-page {
  position: relative;
  padding-top: 130px;
  padding-bottom: 120px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1200px) {
  .project-page {
    /* Marge symetrique (comme sur l'accueil): la galerie reste centree sur
       la page au lieu d'etre collee a gauche avec un vide a droite. */
    padding-left: 360px;
    padding-right: 360px;
  }
}

@keyframes studio-page-in {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.studio-page-enter {
  animation: studio-page-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-gallery,
.project-video {
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 810px) and (max-width: 1199px) {
  .project-gallery,
  .project-video {
    margin-left: var(--tablet-pad-left);
    margin-right: var(--tablet-pad-right);
    max-width: 900px;
  }
}

@media (min-width: 1200px) {
  .project-gallery,
  .project-video {
    /* Plus de marge fixe ici: .project-page a deja la marge symetrique
       (360px des deux cotes), donc "margin: 0 auto" (regle de base) centre
       deja correctement la galerie dans cet espace. */
    max-width: 900px;
  }
}

.project-video {
  margin-bottom: 25px;
}

.project-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.project-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-video__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.project-video__facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.project-video__facade:hover img {
  transform: scale(1.02);
  opacity: 0.85;
}

.project-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}

.project-video__play::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

.project-video__facade:hover .project-video__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 809px) {
  .project-video__play {
    width: 48px;
    height: 48px;
  }
  .project-video__play::after {
    border-width: 7px 0 7px 12px;
  }
}

.project-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

.studio-gallery {
  display: flex;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}

.studio-gallery__cell {
  position: relative;
  flex-shrink: 1;
  flex-basis: 0;
  overflow: hidden;
}

.studio-gallery__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-gallery__column {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  flex-basis: 0;
  gap: 5px;
  overflow: hidden;
}

.studio-gallery__column-cell {
  flex: 1 1 0;
  overflow: hidden;
  min-height: 0;
}

.studio-gallery__column-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 809px) {
  .studio-gallery {
    aspect-ratio: auto !important;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
  .studio-gallery__cell {
    flex: 0 0 auto !important;
    width: 100%;
  }
  .studio-gallery__cell img {
    height: auto;
  }
  .studio-gallery__column {
    flex: 0 0 auto !important;
    width: 100%;
  }
  .studio-gallery__column-cell {
    flex: 0 0 auto !important;
  }
  .studio-gallery__column-cell img {
    height: auto;
  }
  .studio-gallery > *:first-child {
    display: none;
  }
}

.project-gallery__cell {
  position: relative;
}

.project-gallery__cell img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.project-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease;
}

.project-gallery__cell:hover .project-gallery__play,
.project-gallery__play:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.15);
}

.project-gallery__play-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-gallery__play-icon::after {
  content: "";
  margin-left: 3px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.45s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

.lightbox__slide {
  max-width: 90vw;
  max-height: 90vh;
  opacity: 0;
  transform: scale(0.97);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease;
}

.lightbox.is-open .lightbox__slide {
  opacity: 1;
  transform: scale(1);
}

.lightbox.is-open .lightbox__slide.no-transition {
  transition: none;
}

.lightbox.is-open .lightbox__slide.shift-out-left {
  transform: translateX(-28px);
  opacity: 0;
}

.lightbox.is-open .lightbox__slide.shift-out-right {
  transform: translateX(28px);
  opacity: 0;
}

.lightbox.is-open .lightbox__slide.shift-in-left {
  transform: translateX(-28px);
  opacity: 0;
}

.lightbox.is-open .lightbox__slide.shift-in-right {
  transform: translateX(28px);
  opacity: 0;
}

.lightbox__stage img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

.lightbox__video {
  width: min(90vw, calc(90vh * var(--video-ratio, 1.7778)));
  max-width: 90vw;
  max-height: 90vh;
  aspect-ratio: 16 / 9;
}

.lightbox__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 12px;
}

.lightbox__close {
  top: 16px;
  right: 20px;
}

.lightbox__nav--prev {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--next {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__counter {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.03em;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 809px) {
  .lightbox__nav {
    font-size: 26px;
    padding: 8px;
  }
}

@media (max-width: 809px) {
  .project-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

.project-info {
  max-width: 900px;
  margin: 40px auto 0;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

@media (min-width: 810px) and (max-width: 1199px) {
  .project-info {
    margin-left: var(--tablet-pad-left);
    margin-right: var(--tablet-pad-right);
    max-width: 900px;
  }
}

@media (min-width: 1200px) {
  .project-info {
    /* Plus de marge fixe ici: .project-page a deja la marge symetrique
       (360px des deux cotes), donc "margin: 40px auto 0" (regle de base)
       aligne deja la description sur le meme bord gauche que la galerie. */
    max-width: 900px;
  }
}

.project-back {
  display: block;
  max-width: 900px;
  margin: 0 auto 14px;
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
  transform-origin: left center;
  transition: transform 0.15s ease, color 0.15s ease;
}

@media (min-width: 810px) and (max-width: 1199px) {
  .project-back {
    position: absolute;
    top: 140px;
    left: calc((var(--tablet-logo-width) + var(--tablet-pad-left)) / 2 - 8px);
    margin: 0;
    max-width: none;
  }
}

@media (min-width: 1200px) {
  .project-back {
    position: absolute;
    top: 140px;
    /* Suit le bord gauche reel de la galerie (desormais centree, donc
       variable selon la largeur d'ecran) au lieu d'une position fixe. */
    right: min(calc(100vw - 360px + 16px), calc((100vw + 900px) / 2 + 16px));
    margin: 0;
    max-width: none;
  }
}

.project-back:hover {
  transform: translateX(-3px);
  color: var(--text);
}

.project-info h1 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
}

.project-credits p {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
}

.studio-info__tagline {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  font-style: normal;
}

.studio-info__contact {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
}

.studio-info__contact a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.studio-info__contact a:hover {
  opacity: 0.6;
}

.not-found {
  padding-top: 200px;
  text-align: center;
}

/* ---------- Animation d'apparition au scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Framer credit removed ---------- */