@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
:root {
  --bg: #f4f4f1;
  --text: #0b0b0b;
  --muted: rgba(0,0,0,.55);
  --nav-bg: rgba(244,244,241,.72);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --home-gutter: clamp(44px, 5vw, 96px);
}




/* V13 — curseur personnalisé Atelier Moma (desktop uniquement) */
@media (pointer: fine) {
  body,
  a,
  button,
  .project-image-button {
    cursor: url('logo-curseur.png') 8 16, auto;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('bg-texture.png');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 400px auto;
  opacity: 1;
}
body > * { position: relative; z-index: 1; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.fixed-title {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 30;
  text-align: center;
  mix-blend-mode: normal;
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform .72s cubic-bezier(.77,0,.175,1), opacity .42s ease;
}
body.title-hidden .fixed-title {
  opacity: 0;
  transform: translate3d(0,-72vh,0);
}
.fixed-title h1 {
  margin: 0;
  padding: 0 18px;
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  font-size: clamp(34px, 6vw, 104px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .92;
  text-transform: uppercase;
  color: rgba(0,0,0,.92);
}

/* V36 — Titre sur une seule ligne, ancré sur son point central (jamais de retour à la ligne).
   En paysage : titre complet, centré sur le tiret. En portrait : "ATELIER MOMA" seul. */
.fixed-title {
  overflow: hidden;
}
.fixed-title h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 0;
  max-width: 100vw;
}
.fixed-title .title-portrait {
  display: none;
}
@media (orientation: portrait) {
  .fixed-title .title-landscape {
    display: none;
  }
  .fixed-title .title-portrait {
    display: block;
  }
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(32px + var(--safe-bottom));
  z-index: 80;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8vw;
}
.bottom-nav a {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 10px 24px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 999px;
}
.bottom-nav a:hover { opacity: .55; }

/*
  V13 — Homepage avec rythme éditorial centré.
  On garde la respiration latérale validée et un rythme éditorial par largeurs différentes.
  Les images sont désormais toutes centrées pour rester symétriques avec le titre.
  Chaque série conserve son format d’origine : aucune hauteur forcée, aucun recadrage.
*/
.home {
  width: 100%;
  padding: 0 0 11vh;
}

.project-section {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0 0 var(--project-gap, clamp(10px, 1.6vw, 26px));

  /* valeurs par défaut */
  --project-width: 82vw;
  --project-align: center;
}

.project-inner {
  width: calc(100vw - (var(--home-gutter) * 2));
  max-width: calc(100vw - (var(--home-gutter) * 2));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: var(--project-align);
}

.project-image-button {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  position: relative;
  width: min(var(--project-width), calc(100vw - (var(--home-gutter) * 2)));
  max-width: calc(100vw - (var(--home-gutter) * 2));
  overflow: visible;
}

.project-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: unset;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
  /* V33 — anti-flash blanc pendant le chargement, sans créer de pavé visible :
     le fond reprend exactement la couleur de page, donc invisible tant que
     l'image n'a pas chargé, puis fondu doux à l'apparition. */
  background: var(--bg);
  opacity: 0;
  transition: opacity .25s ease;
}
.project-image.is-loaded {
  opacity: 1;
}

/* Rythme desktop : large / moyen / serré, toujours centré, sans changer l’homothétie. */
.home .project-section:nth-of-type(8n + 1) { --project-width: 78vw; --project-align: center;     --project-gap: clamp(8px, 1.1vw, 18px); }
.home .project-section:nth-of-type(8n + 2) { --project-width: 64vw; --project-align: center; --project-gap: clamp(6px, .9vw, 14px); }
.home .project-section:nth-of-type(8n + 3) { --project-width: 88vw; --project-align: center;   --project-gap: clamp(12px, 1.9vw, 30px); }
.home .project-section:nth-of-type(8n + 4) { --project-width: 56vw; --project-align: center;     --project-gap: clamp(7px, 1vw, 16px); }
.home .project-section:nth-of-type(8n + 5) { --project-width: 92vw; --project-align: center; --project-gap: clamp(12px, 2vw, 32px); }
.home .project-section:nth-of-type(8n + 6) { --project-width: 70vw; --project-align: center;   --project-gap: clamp(6px, .9vw, 14px); }
.home .project-section:nth-of-type(8n + 7) { --project-width: 82vw; --project-align: center;     --project-gap: clamp(10px, 1.5vw, 24px); }
.home .project-section:nth-of-type(8n + 8) { --project-width: 62vw; --project-align: center; --project-gap: clamp(6px, .8vw, 12px); }

.project-caption {
  width: min(var(--project-width), calc(100vw - (var(--home-gutter) * 2)));
  max-width: calc(100vw - (var(--home-gutter) * 2));
  margin: 6px 0 0;
  padding: 0 16px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}

.page-wrap {
  min-height: 100dvh;
  padding: 9vh 8vw 15vh;
}
.page-title {
  margin: 0 0 8vh;
  font-size: clamp(32px, 5vw, 88px);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.index-series {
  margin-bottom: 9vh;
}
.index-series-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.index-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.index-row img {
  width: auto;
  height: min(58vh, 720px);
  max-width: none;
  object-fit: contain;
  background: transparent;
  flex: 0 0 auto;
}

/* V14 — Contact : titres principaux en Space Grotesk */
.contact-page .page-title,
.contact-page .contact-block h2,
.contact-page .contact-block h3 {
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 7vw;
  align-items: start;
  font-size: 13px;
  line-height: 1.45;
}
.contact-block h2,
.contact-block h3 {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.contact-block p { margin: 0 0 12px; }
.contact-list {
  white-space: pre-line;
  color: rgba(0,0,0,.74);
}
.back-link {
  position: fixed;
  top: 32px;
  right: 8vw;
  z-index: 50;
  font-size: 13px;
  font-weight: 600;
  background: var(--nav-bg);
  padding: 10px 24px;
  backdrop-filter: blur(12px);
  border-radius: 999px;
}

@media (max-width: 980px) {
  :root { --home-gutter: clamp(28px, 4.5vw, 56px); }
  .fixed-title h1 { font-size: clamp(38px, 9vw, 86px); letter-spacing: .01em; }
  .home { padding-top: 0; }
  .project-section { padding-bottom: var(--project-gap, 10px); }
  .project-inner { width: calc(100vw - (var(--home-gutter) * 2)); max-width: calc(100vw - (var(--home-gutter) * 2)); }
  .project-image-button { width: min(var(--project-width), calc(100vw - (var(--home-gutter) * 2))); max-width: calc(100vw - (var(--home-gutter) * 2)); }
  .project-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
  .home .project-section:nth-of-type(8n + 1) { --project-width: 84vw; }
  .home .project-section:nth-of-type(8n + 2) { --project-width: 70vw; }
  .home .project-section:nth-of-type(8n + 3) { --project-width: 88vw; }
  .home .project-section:nth-of-type(8n + 4) { --project-width: 66vw; }
  .home .project-section:nth-of-type(8n + 5) { --project-width: 90vw; }
  .home .project-section:nth-of-type(8n + 6) { --project-width: 74vw; }
  .home .project-section:nth-of-type(8n + 7) { --project-width: 86vw; }
  .home .project-section:nth-of-type(8n + 8) { --project-width: 68vw; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}

@media (max-width: 640px) {
  :root { --home-gutter: 20px; }
  .fixed-title h1 {
    font-size: clamp(32px, 12vw, 54px);
    letter-spacing: .01em;
    line-height: .95;
  }
  .bottom-nav {
    bottom: calc(24px + var(--safe-bottom));
    padding: 0 20px;
  }
  .bottom-nav a { font-size: 13px; min-height: 36px; padding: 8px 12px; }
  .home { padding: 0 0 10vh; }
  .project-section { padding-bottom: var(--project-gap, 8px); }
  .project-inner { width: calc(100vw - (var(--home-gutter) * 2)); max-width: calc(100vw - (var(--home-gutter) * 2)); }
  .project-image-button { width: min(var(--project-width), calc(100vw - (var(--home-gutter) * 2))); max-width: calc(100vw - (var(--home-gutter) * 2)); }
  .project-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
  .home .project-section:nth-of-type(8n + 1) { --project-width: 92vw; --project-align: center; }
  .home .project-section:nth-of-type(8n + 2) { --project-width: 78vw; --project-align: center; }
  .home .project-section:nth-of-type(8n + 3) { --project-width: 92vw; --project-align: center; }
  .home .project-section:nth-of-type(8n + 4) { --project-width: 76vw; --project-align: center; }
  .home .project-section:nth-of-type(8n + 5) { --project-width: 92vw; --project-align: center; }
  .home .project-section:nth-of-type(8n + 6) { --project-width: 80vw; --project-align: center; }
  .home .project-section:nth-of-type(8n + 7) { --project-width: 90vw; --project-align: center; }
  .home .project-section:nth-of-type(8n + 8) { --project-width: 78vw; --project-align: center; }
  .project-caption {
    margin-top: 6px;
    font-size: 10.5px;
  }
  .page-wrap { padding: 8vh 20px 14vh; }
  .page-title { margin-bottom: 5vh; }
  .index-series { margin-bottom: 6vh; }
  .index-series-header { grid-template-columns: 1fr; gap: 6px; }
  .index-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 4px;
    overflow: visible;
  }
  .index-row img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .back-link { top: 20px; right: 20px; }
}


/*
  V9 — Overview en lignes horizontales.
  Une série = une seule ligne d'images côte à côte.
  La série suivante passe automatiquement à la ligne suivante.
  Aucun texte dans Overview, sauf le lien Retour.
*/
body.overview-page {
  background: var(--bg);
  overflow-x: hidden;
}

.overview-header {
  width: 100%;
  text-align: center;
  padding: 4vh 0 4vh;
  pointer-events: none;
}

.overview-title {
  margin: 0;
  padding: 0 18px;
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  font-size: clamp(34px, 6vw, 104px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0,0,0,.92);
  white-space: nowrap;
}

.overview-wrap {
  width: 100%;
  min-height: 30vh;
  padding: 0 0 4vh;
  display: block;
}

.overview-series {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 0;
}

.overview-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: max-content;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  line-height: 0;
  white-space: nowrap;
}

.overview-row img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: clamp(120px, 16.5vw, 250px);
  max-height: none;
  object-fit: contain;
  object-position: center center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: top;
}

.overview-series:nth-child(4n + 1) .overview-row img { height: clamp(122px, 15.8vw, 238px); }
.overview-series:nth-child(4n + 2) .overview-row img { height: clamp(112px, 14.8vw, 222px); }
.overview-series:nth-child(4n + 3) .overview-row img { height: clamp(128px, 17.2vw, 260px); }
.overview-series:nth-child(4n + 4) .overview-row img { height: clamp(116px, 15.3vw, 230px); }

.overview-page .back-link {
  top: 24px;
  right: 32px;
}

@media (max-width: 980px) {
  :root { --home-gutter: clamp(28px, 4.5vw, 56px); }
  .overview-wrap { padding-top: 6.5vh; }
  .overview-series {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .overview-series::-webkit-scrollbar { display: none; }
  .overview-row {
    justify-content: flex-start;
    margin: 0;
  }
  .overview-series:nth-child(n) .overview-row img { height: clamp(130px, 24vw, 250px); }
}

@media (max-width: 640px) {
  :root { --home-gutter: 20px; }
  .overview-wrap { padding: 7vh 0 9vh; }
  .overview-series:nth-child(n) .overview-row img { height: clamp(120px, 38vw, 185px); }
  .overview-page .back-link { top: 18px; right: 18px; }
}

/*
  V14 — Overview visionneuse.
  Une série reste une ligne horizontale, sans texte.
  Au clic, une visionneuse claire s’ouvre comme sur la maquette.
*/
.overview-thumb {
  display: block;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  line-height: 0;
}

.overview-row .overview-thumb img {
  display: block;
  width: auto;
  max-width: none;
  height: clamp(120px, 16.5vw, 250px);
  max-height: none;
  object-fit: contain;
  object-position: center center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: top;
}

.overview-series:nth-child(4n + 1) .overview-row .overview-thumb img { height: clamp(122px, 15.8vw, 238px); }
.overview-series:nth-child(4n + 2) .overview-row .overview-thumb img { height: clamp(112px, 14.8vw, 222px); }
.overview-series:nth-child(4n + 3) .overview-row .overview-thumb img { height: clamp(128px, 17.2vw, 260px); }
.overview-series:nth-child(4n + 4) .overview-row .overview-thumb img { height: clamp(116px, 15.3vw, 230px); }

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.image-viewer.is-open {
  display: flex;
  pointer-events: auto;
}
.viewer-backdrop {
  position: absolute;
  inset: 0;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.viewer-panel {
  position: relative;
  z-index: 2;
  width: min(72vw, 980px);
  height: min(82vh, 820px);
  background: #fff;
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.5vw, 34px);
  overflow: visible;
}
.viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(58vw, 760px);
  max-height: 76vh;
  object-fit: contain;
  transition: none;
  opacity: 0;
  box-shadow: none;
}
.viewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.38);
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 200;
  line-height: 1;
  padding: 18px;
}
.viewer-prev { left: clamp(8px, 1.2vw, 18px); }
.viewer-next { right: clamp(8px, 1.2vw, 18px); }
.viewer-arrow:hover { color: rgba(0,0,0,.72); }
body.viewer-open .back-link { z-index: 90; }
.viewer-close {
  position: absolute;
  top: clamp(18px, 2.5vw, 34px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  padding: 8px 13px;
  padding: 10px 24px;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  font-family: inherit;
  cursor: inherit;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 999px;
}

@media (max-width: 980px) {
  .overview-series:nth-child(n) .overview-row .overview-thumb img { height: clamp(130px, 24vw, 250px); }
  .viewer-panel {
    width: calc(100vw - 64px);
    height: min(78vh, 780px);
  }
  .viewer-image {
    max-width: calc(100vw - 132px);
    max-height: 70vh;
  }
}

@media (max-width: 640px) {
  .overview-series:nth-child(n) .overview-row .overview-thumb img { height: clamp(120px, 38vw, 185px); }
  .viewer-panel {
    width: calc(100vw - 32px);
    height: min(74vh, 680px);
    padding: 16px;
  }
  .viewer-image {
    max-width: calc(100vw - 88px);
    max-height: 64vh;
  }
  .viewer-arrow {
    font-size: 42px;
    padding: 10px;
  }
  .viewer-prev { left: 4px; }
  .viewer-next { right: 4px; }
}


/* V15 — ajustements demandés */
/* Titre homepage : Space Grotesk sans gras, letter-spacing resserré */
.fixed-title h1 {
  font-weight: 400;
  letter-spacing: .01em;
}

/* Overview : petit texte sous chaque série, même esprit que la homepage */
.overview-caption {
  width: 100%;
  max-width: 100vw;
  margin: 7px auto 14px;
  padding: 0 20px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}

/* Visionneuse : une seule image visible à la fois, sur fond blanc plein */
.viewer-backdrop { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.viewer-panel { background: #fff; }
.viewer-image { opacity: 0; transition: none; }
.viewer-image.is-ready { opacity: 1; }

@media (max-width: 640px) {
  .overview-caption { font-size: 10.5px; margin-top: 6px; margin-bottom: 12px; }
  .fixed-title h1 { letter-spacing: .01em; font-weight: 400; }
}

/* V16 — corrections Overview / visionneuse
   - Aucun titre/caption sous les lignes dans Overview.
   - Caption uniquement dans la visionneuse, sous l'image.
   - On revient à une visionneuse superposée à Overview, comme V14.
   - Une seule image visible à la fois : l'image est vidée avant le chargement suivant. */
.overview-caption { display: none !important; }

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.image-viewer.is-open {
  display: flex;
  pointer-events: auto;
}
.viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(244,244,241,.96) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.viewer-panel {
  position: relative;
  z-index: 2;
  width: min(72vw, 980px);
  height: min(82vh, 820px);
  background: rgba(255,255,255,.94) !important;
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.5vw, 34px);
  overflow: visible;
}
.viewer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
}
.viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(58vw, 760px);
  max-height: 70vh;
  object-fit: contain;
  box-shadow: none;
  opacity: 0;
  transition: none;
}
.viewer-image.is-ready { opacity: 1; }
.viewer-caption {
  min-height: 1.35em;
  margin-top: 12px;
  padding: 0 22px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}

@media (max-width: 980px) {
  .viewer-panel {
    width: calc(100vw - 64px);
    height: min(78vh, 780px);
  }
  .viewer-image {
    max-width: calc(100vw - 132px);
    max-height: 66vh;
  }
}

@media (max-width: 640px) {
  .viewer-panel {
    width: calc(100vw - 32px);
    height: min(74vh, 680px);
    padding: 16px;
  }
  .viewer-image {
    max-width: calc(100vw - 88px);
    max-height: 58vh;
  }
  .viewer-caption {
    margin-top: 10px;
    font-size: 10.5px;
    padding: 0 16px;
  }
}


/* V17 — Overview responsive centré
   Objectif : sur smartphone/tablette, une série reste sur UNE ligne,
   centrée au milieu, et toutes les images de cette série rentrent dans l'écran.
   La hauteur est calculée en JS pour conserver l'homothétie. */
.overview-series {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-left: clamp(14px, 3vw, 42px) !important;
  padding-right: clamp(14px, 3vw, 42px) !important;
  overflow: visible !important;
}

.overview-row {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.overview-thumb {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.overview-row .overview-thumb img,
.overview-row img {
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 980px) {
  .overview-series {
    overflow: visible !important;
    padding-left: clamp(12px, 3.5vw, 28px) !important;
    padding-right: clamp(12px, 3.5vw, 28px) !important;
  }
  .overview-row {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  .overview-series {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (orientation: landscape) and (max-width: 980px) {
  .overview-wrap {
    padding-top: 8vh !important;
  }
  .overview-series {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* V18 — Contact : email et adresse interactifs */
.contact-page .contact-link {
  display: inline;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.22);
  padding-bottom: 1px;
  transition: opacity .2s ease, border-color .2s ease;
}
.contact-page .contact-link:hover {
  opacity: .58;
  border-bottom-color: rgba(0,0,0,.45);
}

/* V21 — Homepage : respiration EXACTE après la description de série.
   Correction du V20 : l'espace est appliqué directement sous la caption,
   pas seulement au padding de la section. Cela reproduit la prévisualisation validée. */
.home .project-section {
  padding-bottom: 0 !important;
}

.home .project-caption {
  margin-top: 8px !important;
  margin-bottom: 2cm !important;
}

.home .project-section:last-child .project-caption {
  margin-bottom: clamp(80px, 10vh, 140px) !important;
}

@media (max-width: 640px) {
  .home .project-caption {
    margin-bottom: clamp(48px, 14vw, 76px) !important;
  }
}


/* V23 — Mention légale images, discrète sur toutes les pages publiques */
.site-legal {
  position: fixed;
  left: 50%;
  bottom: calc(7px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  max-width: calc(100vw - 32px);
  padding: 2px 6px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 9.5px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: .01em;
  color: #b8b8b8;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 640px) {
  .site-legal {
    font-size: 8.5px;
    white-space: normal;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
}


/* V25 — Homepage uniquement : hauteur uniforme calée sur la première image.
   Les formats originaux restent respectés : hauteur commune, largeur automatique, image centrée.
   Si une image horizontale devient trop large, elle est contenue dans la largeur disponible. */
.home.home-uniform-height .project-inner {
  align-items: center !important;
}

.home.home-uniform-height .project-image-button {
  width: auto !important;
  max-width: calc(100vw - (var(--home-gutter) * 2)) !important;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
}

.home.home-uniform-height .project-image {
  width: auto !important;
  height: var(--home-reference-image-height, auto) !important;
  max-width: calc(100vw - (var(--home-gutter) * 2)) !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.home.home-uniform-height .project-caption {
  width: min(760px, calc(100vw - (var(--home-gutter) * 2))) !important;
  max-width: calc(100vw - (var(--home-gutter) * 2)) !important;
}

@media (max-width: 640px) {
  .home.home-uniform-height .project-image {
    height: var(--home-reference-image-height-mobile, var(--home-reference-image-height, auto)) !important;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .home.home-uniform-height .project-section.is-portrait .project-image {
    height: calc(var(--home-reference-image-height-mobile, var(--home-reference-image-height, auto)) * 2) !important;
  }
  .home.home-uniform-height .project-section.is-portrait .project-image-button {
    max-width: calc(100vw - (var(--home-gutter) * 2)) !important;
  }
}


/* V26 — Respiration au-dessus de la première image de la homepage.
   Même logique que l’espace validé après les captions : plus d’air au démarrage du site. */
.home {
  padding-top: 2cm !important;
}

@media (max-width: 640px) {
  .home {
    padding-top: clamp(48px, 14vw, 76px) !important;
  }
}

/* V27 — Support vidéo : homepage autoplay muet + bouton son */
.project-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  /* V33 — fond invisible (= fond de page) si pas de poster ; le poster
     s'affiche déjà immédiatement (image statique), pas besoin de fondu. */
  background: var(--bg);
}

.project-image-button {
  transition: opacity .24s ease;
}

.sound-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(244,244,241,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  opacity: .62;
  transition: opacity .2s ease, background .2s ease;
}
.sound-toggle:hover { opacity: .95; }
.speaker-icon {
  width: 15px;
  height: 15px;
  display: block;
  position: relative;
}
.speaker-icon:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 5px;
  height: 7px;
  border-left: 2px solid rgba(0,0,0,.72);
  border-top: 2px solid rgba(0,0,0,.72);
  border-bottom: 2px solid rgba(0,0,0,.72);
}
.speaker-icon:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 9px;
  border-right: 2px solid rgba(0,0,0,.72);
  border-radius: 50%;
}
.sound-toggle.is-muted .speaker-icon {
  transform: none;
}
.sound-toggle.is-muted .speaker-icon:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 1px;
  width: 2px;
  height: 15px;
  border: 0;
  background: rgba(0,0,0,.72);
  border-radius: 0;
  transform: rotate(-45deg);
}

.home.home-uniform-height .project-video {
  width: auto !important;
  height: var(--home-reference-image-height, auto) !important;
  max-width: calc(100vw - (var(--home-gutter) * 2)) !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width: 640px) {
  .home.home-uniform-height .project-video {
    height: var(--home-reference-image-height-mobile, var(--home-reference-image-height, auto)) !important;
  }
  .sound-toggle {
    width: 28px;
    height: 28px;
    right: 9px;
    bottom: 9px;
  }
}

/* V27 — Overview : les vidéos restent en images fixes/posters */
.overview-thumb.is-video {
  position: relative;
}
.video-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  padding: 3px 5px 4px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(0,0,0,.68);
  background: rgba(244,244,241,.72);
}
.viewer-media-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 10vh;
}
.viewer-video-wrap {
  position: relative;
  display: inline-flex;
  max-width: 78vw;
  max-height: 78vh;
}
.viewer-video {
  display: block;
  width: auto;
  max-width: 78vw;
  max-height: 78vh;
  object-fit: contain;
  background: transparent;
}
.viewer-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

/* V28 — corrections vidéo / Overview / Organiser
   - La visionneuse est à nouveau un vrai overlay caché par défaut.
   - Les médias de la visionneuse restent centrés, sans superposition ni grande zone blanche en flux de page.
   - Les icônes son utilisent des pictos SVG plus lisibles. */
.viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}
.viewer.is-open {
  display: flex !important;
  pointer-events: auto !important;
}
.viewer .viewer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(244,244,241,.96) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.viewer .viewer-panel {
  position: relative !important;
  z-index: 2 !important;
  width: min(72vw, 980px) !important;
  height: min(82vh, 820px) !important;
  background: rgba(255,255,255,.94) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 2.5vw, 34px) !important;
  overflow: visible !important;
}
.viewer-stage {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}
.viewer-media-slot {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.viewer .viewer-image,
.viewer .viewer-video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(58vw, 760px) !important;
  max-height: 66vh !important;
  object-fit: contain !important;
  opacity: 1 !important;
  background: transparent !important;
}
.viewer-video-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: min(58vw, 760px) !important;
  max-height: 66vh !important;
}
.viewer-caption {
  flex: 0 0 auto !important;
  min-height: 1.35em !important;
  margin-top: 12px !important;
  padding: 0 22px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.72) !important;
}
.viewer-open { overflow: hidden; }

.sound-toggle {
  border: 0 !important;
  background: rgba(244,244,241,.54) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) !important;
  opacity: .72 !important;
}
.sound-toggle:hover { opacity: 1 !important; }
.speaker-icon {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  background: center / contain no-repeat url('sound-on.svg') !important;
}
.sound-toggle.is-muted .speaker-icon {
  background-image: url('sound-off.svg') !important;
}
.speaker-icon:before,
.speaker-icon:after { content: none !important; display: none !important; }

@media (max-width: 980px) {
  .viewer .viewer-panel {
    width: calc(100vw - 64px) !important;
    height: min(78vh, 780px) !important;
  }
  .viewer .viewer-image,
  .viewer .viewer-video,
  .viewer-video-wrap {
    max-width: calc(100vw - 132px) !important;
    max-height: 62vh !important;
  }
}
@media (max-width: 640px) {
  .viewer .viewer-panel {
    width: calc(100vw - 32px) !important;
    height: min(74vh, 680px) !important;
    padding: 16px !important;
  }
  .viewer .viewer-image,
  .viewer .viewer-video,
  .viewer-video-wrap {
    max-width: calc(100vw - 88px) !important;
    max-height: 56vh !important;
  }
  .speaker-icon { width: 19px !important; height: 19px !important; }
}


/* V29 — Contact restructuré : mêmes typographies, nouvelle hiérarchie des blocs */
.contact-wrap {
  padding-top: 8vh;
}
.contact-page .page-title {
  margin-bottom: 11vh;
}
.contact-grid-top,
.contact-grid-bottom {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.9fr;
  gap: 7vw;
  align-items: start;
}
.contact-grid-top {
  margin-bottom: 10vh;
}
.contact-grid-bottom {
  padding-top: 0;
}
.contact-grid-bottom .contact-block {
  min-width: 0;
}

@media (max-width: 980px) {
  .contact-grid-top,
  .contact-grid-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .contact-block-studio {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .contact-wrap {
    padding-top: 8vh;
  }
  .contact-page .page-title {
    margin-bottom: 7vh;
  }
  .contact-grid-top,
  .contact-grid-bottom {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .contact-grid-top {
    margin-bottom: 7vh;
  }
}


/* V30 — Contact : Clients sur 2 colonnes, Magazines et Agences alignés avec Contact / Services */
.contact-grid-bottom {
  grid-template-columns: 1.25fr 0.9fr 0.9fr !important;
  gap: 7vw !important;
  align-items: start !important;
}
.contact-block-clients {
  min-width: 0;
}
.contact-list-clients {
  column-count: 2;
  column-gap: clamp(34px, 4vw, 72px);
  white-space: pre-line;
}
.contact-list-clients br {
  break-after: auto;
}

@media (max-width: 980px) {
  .contact-grid-bottom {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
  }
  .contact-block-clients {
    grid-column: 1 / -1;
  }
  .contact-list-clients {
    column-count: 2;
    column-gap: 48px;
  }
}

@media (max-width: 640px) {
  .contact-grid-bottom {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .contact-block-clients {
    grid-column: auto;
  }
  .contact-list-clients {
    column-count: 1;
  }
}

/* V31 — Overview mobile/performance
   - Une série = une seule ligne centrée qui rentre dans l'écran.
   - Les images ne sont jamais rognées : elles gardent leur homothétie.
   - Les miniatures deviennent volontairement petites sur téléphone pour charger vite.
   - La visionneuse reste haute qualité au clic. */
body.overview-page {
  overflow-x: hidden !important;
}
.overview-wrap {
  width: 100% !important;
  padding: 0 0 clamp(70px, 9vh, 120px) !important;
}
.overview-series {
  width: 100% !important;
  padding: 0 clamp(16px, 5vw, 76px) !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
}
.overview-row {
  width: 100% !important;
  max-width: min(100%, 1280px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.overview-thumb {
  display: block !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: var(--overview-row-height, auto) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  line-height: 0 !important;
}
.overview-row .overview-thumb img,
.overview-row img {
  display: block !important;
  width: auto !important;
  height: var(--overview-row-height, 120px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.overview-series:nth-child(n) .overview-row .overview-thumb img,
.overview-series:nth-child(n) .overview-row img {
  height: var(--overview-row-height, 120px) !important;
}
@media (max-width: 980px) {
  .overview-series {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: visible !important;
  }
  .overview-row {
    max-width: 100% !important;
    justify-content: center !important;
  }
  .overview-row .overview-thumb img,
  .overview-row img {
    height: var(--overview-row-height, 74px) !important;
  }
}
@media (max-width: 640px) {
  .overview-wrap {
    padding-top: 58px !important;
  }
  .overview-series {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .overview-row .overview-thumb img,
  .overview-row img {
    height: var(--overview-row-height, 52px) !important;
  }
  .video-badge {
    font-size: 6px !important;
    right: 2px !important;
    bottom: 2px !important;
    padding: 2px 3px !important;
  }
}


/* V32 — Overview responsive léger, sans débordement horizontal.
   Objectif : toutes les vignettes d'une série rentrent "one shot" dans l'écran.
   Les images restent entières, homothétiques et centrées, même si elles deviennent minuscules. */
body.overview-page {
  overflow-x: hidden !important;
}
.overview-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.overview-series {
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: visible !important;
  margin: 0 auto !important;
}
.overview-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  line-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.overview-thumb {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  line-height: 0 !important;
}
.overview-row .overview-thumb img,
.overview-row img {
  display: block !important;
  width: auto;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width: 980px) {
  .overview-series {
    overflow: visible !important;
  }
  .overview-row {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 640px) {
  .overview-wrap {
    padding-top: 7vh !important;
  }
  .overview-row {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}


/* V34 — Overview aéré + hauteur unique déterminée par la série la plus longue.
   Mise en page façon planche contact : petites vignettes, beaucoup de blanc,
   aucune coupe, aucune superposition, aucune ligne qui déborde horizontalement. */
body.overview-page {
  overflow-x: hidden !important;
  background: #f4f4f1 !important;
}
.overview-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 0 clamp(110px, 14vh, 180px) !important;
  overflow-x: hidden !important;
}
.overview-series {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  margin: 0 auto clamp(2px, .6vh, 8px) !important;
  overflow: visible !important;
  line-height: 0 !important;
  text-align: center !important;
}
.overview-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--overview-max-row-w, 78vw) !important;
}
.overview-thumb {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: var(--overview-thumb-h, 56px) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  line-height: 0 !important;
}
.overview-row .overview-thumb img,
.overview-row img,
.overview-series:nth-child(n) .overview-row .overview-thumb img,
.overview-series:nth-child(n) .overview-row img {
  display: block !important;
  width: auto !important;
  height: var(--overview-thumb-h, 56px) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.overview-page .back-link {
  position: fixed !important;
  top: max(28px, env(safe-area-inset-top)) !important;
  right: max(26px, env(safe-area-inset-right)) !important;
  z-index: 120 !important;
}
@media (max-width: 640px) {
  .overview-wrap {
    padding-top: clamp(150px, 22vh, 210px) !important;
  }
  .overview-series {
    margin-bottom: 1px !important;
  }
  .video-badge {
    transform: scale(.58) !important;
    transform-origin: top right !important;
    right: 1px !important;
    top: 1px !important;
    bottom: auto !important;
  }
}

/* V35 — Overview collé verticalement + respiration latérale équivalente à une vignette.
   Les anciennes règles V31/V32/V33/V34 sont volontairement écrasées ici. */
body.overview-page {
  overflow-x: hidden !important;
  background: #f4f4f1 !important;
}
.overview-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 0 clamp(110px, 14vh, 180px) !important;
  overflow-x: hidden !important;
}
.overview-series {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  line-height: 0 !important;
  text-align: center !important;
}
.overview-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 0 !important;
  margin: 0 auto !important;
  max-width: 100vw !important;
}
.overview-thumb {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: var(--overview-thumb-h, 48px) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  line-height: 0 !important;
}
.overview-row .overview-thumb img,
.overview-row img,
.overview-series:nth-child(n) .overview-row .overview-thumb img,
.overview-series:nth-child(n) .overview-row img {
  display: block !important;
  width: auto !important;
  height: var(--overview-thumb-h, 48px) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
@media (max-width: 640px) {
  .overview-wrap {
    padding-top: clamp(128px, 18vh, 185px) !important;
  }
  .overview-series { margin-bottom: 0 !important; }
  .video-badge {
    transform: scale(.5) !important;
    transform-origin: top right !important;
    right: 1px !important;
    top: 1px !important;
    bottom: auto !important;
  }
}

/* ── CORRECTIF ESPACEMENT OVERVIEW ── */
.overview-page .overview-wrap,
.overview-wrap {
  padding-top: 0 !important;
}

.overview-header {
  padding: 2vh 0 1vh !important;
}

.overview-title {
  white-space: nowrap !important;
  overflow: visible !important;
}