/* ============================================================
   MARGOUSHA — Site Styles
   Editorial gallery / Violet Cosmos lead.
   Production CSS, built from the design prototype.
   ============================================================ */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--c-blanc-chamallow);
  color: var(--c-noir-encre);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Firefox / standard custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 27, 61, 0.40) transparent;
}

/* ============================================================
   CUSTOM SCROLLBAR — slim, palette-aware, framboise on hover.
   The thumb uses alpha so it reads well over light AND dark sections.
   ============================================================ */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(43, 27, 61, 0.40);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  transition: background-color .25s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-framboise);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner  { background: transparent; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

/* hidden by default — the JS i18n layer toggles which language is shown */
[data-lang="fr"] [data-l-en], [data-lang="en"] [data-l-fr] { display: none; }

/* ============================================================
   SITE FRAME
   ============================================================ */
.site {
  width: 100%;
  background: var(--c-blanc-chamallow);
  color: var(--c-noir-encre);
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 56px;
  /* Solid (not translucent) — was rgba()+blur which created a subtle seam
     where the nav met the hero. Solid matches the hero exactly. */
  background: var(--c-violet-cosmos);
  color: var(--c-blanc-chamallow);
  /* No bottom border — nav flows directly into the hero. */
}
/* Logo variants — colored version is the default-hidden alternate.
   Compound selector (.nav-logo-svg.nav-logo-svg--color) used to beat the
   `.nav-logo-svg { display: block; }` base rule that comes later in the file. */
.nav-logo-svg.nav-logo-svg--color { display: none; }
/* "PORTFOLIO" tag next to the logo. Same typo as the nav links (Inter Tight,
   11px, 0.22em letter-spacing, weight 500). Inherits nav text color via
   currentColor so it adapts to each page hero variant automatically. */
.nav-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: currentColor;
  opacity: .68;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid currentColor;
  align-self: center;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .nav-tag { font-size: 9px; margin-left: 10px; padding-left: 10px; }
}
/* The colored logo has more whitespace inside its viewBox than the white one,
   so it reads smaller at the same height. Bump 30% and anchor left so it
   stays flush with the nav-left edge. */
.nav-logo-svg--color { transform: translateY(-6px) scale(1.45); transform-origin: left center; }
.nav-left { display: flex; align-items: center; gap: 14px; }
.nav-logo {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 30px; letter-spacing: -0.025em;
  color: var(--c-blanc-chamallow);
  line-height: 1;
  text-decoration: none;
}
.nav-logo .dot { color: var(--c-framboise); }
.nav-links { display: flex; gap: 32px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.nav-links a {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-lavande); text-decoration: none; font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .14s, border-color .14s;
}
.nav-links a:hover, .nav-links a.is-current {
  color: var(--c-vert-pomme);
  border-bottom-color: var(--c-vert-pomme);
}
.nav-right { display: flex; gap: 14px; justify-content: flex-end; align-items: center; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid rgba(198,169,224,.3);
  border-radius: 999px;
  padding: 3px;
  background: rgba(14,11,16,.25);
}
.lang-toggle button {
  padding: 5px 12px;
  background: transparent; border: 0; color: var(--c-lavande-2);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  font-weight: 600;
  transition: all .2s var(--ease-gallery);
}
.lang-toggle button.active { background: var(--c-blanc-chamallow); color: var(--c-noir-encre); }

.nav-burger {
  width: 36px; height: 36px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(198,169,224,.3);
  color: var(--c-blanc-chamallow);
  background: transparent;
}

/* Mobile drawer: hidden everywhere by default — only mobile + .is-open shows it.
   Without this, the <aside class="nav-drawer"> renders as a plain block on
   desktop and leaks raw bullet links + a stray × button at the top of every
   page that ships the global nav. */
.nav-drawer { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--c-blanc-chamallow);
  text-decoration: none;
  cursor: pointer;
  transition: all .24s var(--ease-gallery);
}
.btn:hover { background: var(--c-blanc-chamallow); color: var(--c-noir-encre); }
.btn-shop {
  background: var(--c-framboise); border-color: var(--c-framboise); color: var(--c-blanc-chamallow);
}
.btn-shop:hover { background: var(--c-blanc-chamallow); border-color: var(--c-blanc-chamallow); color: var(--c-framboise); }
/* Shop CTA arrow — thin SVG via CSS mask + currentColor (used to be a fat "↗"). */
.btn-arrow::after {
  content: ""; display: inline-block;
  width: 13px; height: 13px; margin-left: 8px;
  background-color: currentColor; vertical-align: -1px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>") center/contain no-repeat;
  transition: transform .3s var(--ease-gallery, ease);
}
.btn-arrow:hover::after { transform: translate(2px, -2px); }

/* ============================================================
   ICONS — thin SVG arrow glyphs (replaces Unicode ↗ → ↑ ←)
   ============================================================ */
.mg-icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.14em;
  transition: transform .3s var(--ease-gallery, ease);
}
.mg-icon-arrow-right    { width: 1.15em; }
.mg-icon-arrow-up-right { width: 1.05em; }
.mg-icon-arrow-left     { width: 1.15em; }

a:hover    .mg-icon-arrow-right,
button:hover .mg-icon-arrow-right { transform: translateX(3px); }
a:hover    .mg-icon-arrow-up-right,
button:hover .mg-icon-arrow-up-right { transform: translate(2px, -2px); }
a:hover    .mg-icon-arrow-left,
button:hover .mg-icon-arrow-left { transform: translateX(-3px); }
a:hover    .mg-icon-arrow-up,
button:hover .mg-icon-arrow-up { transform: translateY(-2px); }

/* Spacing when an icon trails text inside a CTA. */
.btn .mg-icon,
.nc-link .mg-icon,
.cf-cta .mg-icon,
.collection-arrow .mg-icon { margin-left: 8px; }
.btn--dark { color: var(--c-noir-encre); }
.btn--dark:hover { background: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.btn--cosmos { color: var(--c-violet-cosmos); border-color: var(--c-violet-cosmos); }
.btn--cosmos:hover { background: var(--c-violet-cosmos); color: var(--c-blanc-chamallow); }
.btn--lime { background: var(--c-vert-pomme); border-color: var(--c-vert-pomme); color: var(--c-noir-encre); }
.btn--lime:hover { background: var(--c-blanc-chamallow); border-color: var(--c-blanc-chamallow); color: var(--c-noir-encre); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============================================================
   HERO — Split layout
   ============================================================ */
.hero {
  background: var(--c-violet-cosmos);
  color: var(--c-blanc-chamallow);
  position: relative;
  padding: 92px 56px 88px;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 85% 20%, rgba(214,59,107,.18), transparent 60%),
    radial-gradient(700px 600px at 0% 90%, rgba(196,229,56,.07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  /* path fixed: was '../assets/...' which resolves to /assets/assets/ (404) */
  content:""; position: absolute; inset: 0;
  background-image: url('../img/texture-tapestry.png');
  background-size: cover;
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
  min-height: 740px;
}

.hero-eye {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--c-vert-pomme);
  font-weight: 500;
  margin-bottom: 36px;
}
.hero-eye::before {
  content:""; width: 28px; height: 1px; background: var(--c-vert-pomme);
}

.hero-title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(72px, 13vw, 220px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--c-blanc-chamallow);
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.hero-title .name1 { display: block; }
.hero-title .name1 em { color: var(--c-rose-poudre); font-style: italic; }
.hero-title .name2 { display: block; color: var(--c-rose-poudre); padding-left: 48px; }

.hero-baseline {
  margin-top: 44px;
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  font-size: 26px; line-height: 1.32;
  color: var(--c-lavande);
  max-width: 480px;
}
.hero-baseline em { color: var(--c-rose-poudre); font-style: italic; }

.hero-meta {
  margin-top: 48px;
  display: flex; gap: 56px;
}
.hero-meta-item {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-lavande-2); font-weight: 500;
}
.hero-meta-item b {
  display: block; margin-top: 8px;
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--c-blanc-chamallow); text-transform: none; font-weight: 400;
}

.hero-ctas { margin-top: 52px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-art {
  position: relative;
  height: 100%;
  min-height: 660px;
}
.hero-art-frame {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: center;
}
.hero-art-img {
  position: relative;
  width: 100%; max-width: 480px;
  aspect-ratio: 3/4;
  background: var(--c-noir-encre);
  overflow: hidden;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  transform: rotate(-1.5deg);
}
.hero-art-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-art-img::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(251, 243, 238, .12);
  pointer-events: none;
}
.hero-art-caption {
  position: absolute;
  right: 0; bottom: -8px;
  display: flex; align-items: baseline; gap: 16px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-lavande-2);
  font-weight: 500;
}
.hero-art-caption .ttl {
  font-family: var(--font-display); font-style: italic; font-size: 20px;
  letter-spacing: -0.01em; color: var(--c-blanc-chamallow);
  text-transform: none; font-weight: 400;
}
.hero-art-num {
  position: absolute; top: -12px; left: -12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-vert-pomme); letter-spacing: 0.16em;
}
.hero-art-tag {
  position: absolute; top: 16px; right: -28px;
  background: var(--c-vert-pomme); color: var(--c-noir-encre);
  padding: 6px 12px; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  transform: rotate(6deg);
}
.hero-frame-decor-1, .hero-frame-decor-2 {
  position: absolute; pointer-events: none;
}
.hero-frame-decor-1 {
  top: 8%; left: -2%;
  width: 110px; height: 140px;
  background: var(--c-rose-poudre);
  transform: rotate(-8deg);
  opacity: .85;
}
.hero-frame-decor-1::after {
  content:""; position: absolute; inset: 8px;
  border: 1px solid rgba(14,11,16,.25);
}
.hero-frame-decor-2 {
  bottom: 4%; right: -1%;
  width: 90px; height: 120px;
  background: var(--c-framboise);
  transform: rotate(7deg);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  background: var(--c-vert-pomme);
  color: var(--c-noir-encre);
  padding: 16px 0;
  border-top: 1px solid var(--c-noir-encre);
  border-bottom: 1px solid var(--c-noir-encre);
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  animation: marqueeRoll 50s linear infinite;
  font-family: var(--font-display); font-style: italic;
  font-size: 26px; letter-spacing: -0.01em;
}
.marquee-track > span { margin: 0 24px; }
.marquee-track .dot { color: var(--c-framboise); }
@keyframes marqueeRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SECTION
   ============================================================ */
.section {
  padding: 120px 56px;
  background: var(--c-blanc-chamallow);
  color: var(--c-noir-encre);
  position: relative;
}
.section.dark { background: var(--c-violet-cosmos); color: var(--c-blanc-chamallow); }
.section.rose { background: var(--c-rose-poudre); color: var(--c-noir-encre); }
.section.noir { background: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.section.sunken { background: var(--c-blanc-chamallow-2); }

.s-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end;
  margin-bottom: 72px;
}
.s-eye {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 500;
  display: inline-flex; gap: 10px; align-items: center;
  margin-bottom: 20px;
}
.s-eye::before { content:""; width: 28px; height: 1px; background: currentColor; }
.section .s-eye { color: var(--c-framboise); }
.section.dark .s-eye { color: var(--c-vert-pomme); }
.section.rose .s-eye { color: var(--c-framboise); }
.section.noir .s-eye { color: var(--c-vert-pomme); }

.s-title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 84px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 14ch;
  font-variation-settings: "opsz" 144;
}
.s-title em { color: var(--c-framboise); font-style: italic; }
/* tokens.css forces h1–h4 to --fg-1 (black). Re-light the headline on dark
   surfaces so we don't get black-on-violet / black-on-noir. */
.section.dark  .s-title { color: var(--c-blanc-chamallow); }
.section.noir  .s-title { color: var(--c-blanc-chamallow); }
.section.dark .s-title em { color: var(--c-rose-poudre); }
.section.rose .s-title em { color: var(--c-violet-cosmos); }

.s-lede {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.48;
  color: var(--fg-2);
  max-width: 480px;
}
.section.dark .s-lede { color: var(--c-lavande); }
.section.noir .s-lede { color: var(--c-lavande); }

/* ============================================================
   UNIVERS — three columns
   ============================================================ */
.univers {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px;
}
.univers-col { grid-column: span 4; }
.univers-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--c-framboise);
  margin-bottom: 18px;
}
.univers-h {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.univers-p {
  font-size: 15px; line-height: 1.62; color: var(--fg-2);
  font-family: var(--font-body);
}

/* ============================================================
   WORKS GRID
   ============================================================ */
.works {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px;
}
.work {
  position: relative;
  cursor: pointer;
  transition: transform .4s var(--ease-gallery);
}
.work-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--c-noir-encre-soft);
  box-shadow: 0 0 0 1px rgba(14,11,16,.16);
}
.work-img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover; display: block;
  background: var(--c-noir-encre-soft);
  transition: transform .8s var(--ease-gallery);
}
.work:hover .work-img { transform: scale(1.04); }
.work.tall .work-img { aspect-ratio: 3/4; }
.work.wide .work-img { aspect-ratio: 16/11; }
.work.square .work-img { aspect-ratio: 1/1; }
.work.portrait .work-img { aspect-ratio: 4/5; }

.work-meta {
  margin-top: 18px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.work-name {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 28px; line-height: 1; letter-spacing: -0.018em;
}
.work-info {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500; text-align: right;
  display: flex; flex-direction: column; gap: 4px;
}
.work-info .yr { color: var(--fg-2); }
.work-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--c-blanc-chamallow); color: var(--c-noir-encre);
  padding: 5px 9px; font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
  z-index: 2;
}
.work-tag.new { background: var(--c-vert-pomme); }
.work-tag.sold { background: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.work-tag.shop { background: var(--c-framboise); color: var(--c-blanc-chamallow); }

.work.span-3 { grid-column: span 3; }
.work.span-4 { grid-column: span 4; }
.work.span-5 { grid-column: span 5; }
.work.span-6 { grid-column: span 6; }
.work.span-7 { grid-column: span 7; }
.work.span-8 { grid-column: span 8; }
.work.span-12 { grid-column: span 12; }

.works-foot {
  margin-top: 56px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(14,11,16,.12);
  padding-top: 24px;
}
.works-foot .meta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3);
}
.section.dark .works-foot {
  border-color: rgba(198,169,224,.2);
}
.section.dark .works-foot .meta {
  color: var(--c-lavande-2);
}

.placeholder-tag {
  position: absolute; bottom: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  background: rgba(14,11,16,.7); color: var(--c-vert-pomme);
  padding: 3px 8px;
  border-radius: 2px;
  z-index: 5;
}

/* ============================================================
   COLLAGE PLACEHOLDERS (CSS / SVG)
   ============================================================ */
.collage {
  position: absolute; inset: 0;
  overflow: hidden;
}
.collage svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   PROJECTS — series strip
   ============================================================ */
.projects {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px;
}
.project {
  grid-column: span 4;
  position: relative;
  cursor: pointer;
}
.project.large { grid-column: span 6; }
.project-img {
  aspect-ratio: 4/5; overflow: hidden;
  background: var(--c-violet-cosmos);
  position: relative;
}
.project-img > * { transition: transform .8s var(--ease-gallery); }
.project-img > img { width: 100%; height: 100%; object-fit: cover; }
.project:hover .project-img > * { transform: scale(1.04); }
.project-num {
  position: absolute; top: 20px; left: 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--c-blanc-chamallow);
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.project-meta { margin-top: 22px; }
.project-name {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 36px; line-height: 1; letter-spacing: -0.022em;
  margin-bottom: 10px;
}
.project-desc {
  font-size: 14px; line-height: 1.6;
  color: var(--c-lavande);
  max-width: 36ch;
}
.section .project-desc { color: var(--fg-2); }
/* The rule above kills contrast on dark surfaces; bring the description
   back to lavande on violet/noir. */
.section.dark .project-desc { color: var(--c-lavande); }
.section.noir .project-desc { color: var(--c-lavande); }
.project-info {
  margin-top: 14px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500;
}
.section.dark .project-info { color: var(--c-lavande-2); }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement-wrap {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center;
}
.statement-portrait {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-art);
}
.statement-portrait img { width: 100%; height: 100%; object-fit: cover; }
.statement-text {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  font-size: 44px; line-height: 1.28; letter-spacing: -0.012em;
  color: var(--c-violet-cosmos);
  margin: 20px 0 0;
}
.statement-text em { color: var(--c-framboise); }
.statement-sig {
  font-family: var(--font-hand); font-weight: 500;
  font-size: 42px; color: var(--c-violet-cosmos);
  margin-top: 24px;
}

/* ============================================================
   COLLAGE LAB TEASER
   ============================================================ */
.lab-teaser {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.lab-teaser-content { padding: 24px 0; }
.lab-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  background: var(--c-vert-pomme); color: var(--c-noir-encre);
  padding: 6px 12px; font-weight: 700;
  border-radius: 999px;
}
.lab-tag .pulse { width: 6px; height: 6px; background: var(--c-noir-encre); border-radius: 50%; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.lab-title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 92px; line-height: 1.0; letter-spacing: -0.035em;
  margin: 28px 0 24px;
  color: var(--c-blanc-chamallow);
}
.lab-title em { color: var(--c-vert-pomme); }
.lab-lede {
  font-family: var(--font-editorial); font-style: italic;
  font-size: 22px; line-height: 1.48; color: var(--c-lavande);
  max-width: 460px;
}
.lab-cta-row { margin-top: 36px; display: flex; gap: 12px; align-items: center; }

.lab-preview {
  position: relative;
  aspect-ratio: 5/6;
  background: var(--c-blanc-chamallow);
  overflow: hidden;
  transform: rotate(1.5deg);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.6);
}
.lab-preview::before {
  content: "atelier";
  position: absolute; top: 14px; left: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(14,11,16,.5);
  z-index: 5;
}
.lab-frag {
  position: absolute;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.4);
}
/* Lab teaser visual = a real collage example. Container is portrait (5/6)
   and overflow-hidden, so a landscape image naturally crops on left + right. */
.lab-preview-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* ============================================================
   SHOP STRIP
   ============================================================ */
.shop-strip {
  display: grid; grid-template-columns: 1fr auto;
  gap: 64px; align-items: center;
  padding: 80px 56px;
  background: var(--c-noir-encre);
  color: var(--c-blanc-chamallow);
  position: relative;
  overflow: hidden;
}
.shop-strip::before {
  content:""; position: absolute; right: -100px; top: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--c-framboise) 0%, transparent 60%);
  opacity: .35;
  pointer-events: none;
}
.shop-strip > * { position: relative; }
.shop-strip-h {
  font-family: var(--font-display); font-style: italic;
  font-size: 72px; line-height: 0.98; letter-spacing: -0.03em;
  margin: 20px 0 0;
  color: var(--c-blanc-chamallow);
}
.shop-strip-h em { color: var(--c-vert-pomme); }
.shop-strip-p {
  margin-top: 18px; max-width: 50ch;
  font-family: var(--font-editorial); font-style: italic;
  font-size: 20px; line-height: 1.45;
  color: var(--c-lavande);
}
.shop-strip-cta {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}

/* ============================================================
   COLLAB
   ============================================================ */
.collab {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  padding: 100px 56px;
  background: var(--c-rose-poudre);
  color: var(--c-noir-encre);
}
.collab-h {
  font-family: var(--font-display); font-style: italic;
  font-size: 76px; line-height: 0.96; letter-spacing: -0.03em;
  margin: 20px 0 0;
  color: var(--c-violet-cosmos);
}
.collab-h em { color: var(--c-framboise); }
.collab-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.collab-item { padding: 20px 0; border-top: 1px solid rgba(14,11,16,.18); }
.collab-item:nth-child(-n+2) { border-top: 0; }
.collab-item h4 {
  margin: 0 0 6px;
  font-family: var(--font-body); font-weight: 600; font-style: normal;
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--c-violet-cosmos);
}
.collab-item p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.collab-cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 88px 56px 36px;
  background: var(--c-noir-encre);
  color: var(--c-lavande);
  position: relative;
}
.footer::before {
  content:""; position: absolute; left: 56px; right: 56px; top: 0;
  height: 1px; background: rgba(198,169,224,.18);
}
.footer-top {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px;
  padding-bottom: 48px;
}
.footer-mark {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 130px; line-height: 0.98; letter-spacing: -0.04em;
  color: var(--c-blanc-chamallow);
  margin: 0;
}
.footer-mark em { color: var(--c-rose-poudre); }
.footer-tag {
  margin-top: 18px;
  font-family: var(--font-editorial); font-style: italic;
  font-size: 20px; color: var(--c-lavande);
  max-width: 36ch;
}
.footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-self: end;
}
.footer-cols h5 {
  margin: 0 0 14px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-blanc-chamallow); font-weight: 600;
}
.footer-cols a {
  display: block; padding: 4px 0; color: var(--c-lavande);
  text-decoration: none; font-size: 14px;
}
.footer-cols a:hover { color: var(--c-vert-pomme); }
/* "(en cours)" marker — same layout as the column links, muted, non-clickable */
.footer-cols .footer-soon {
  display: block; padding: 4px 0;
  color: rgba(198,169,224,.45);
  font-size: 14px; font-style: italic;
}
.footer-base {
  border-top: 1px solid rgba(198,169,224,.15);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(198,169,224,.55);
}
/* Discreet authorship signature — present, never loud. */
.footer-credit { color: rgba(198,169,224,.38); letter-spacing: 0.2em; }
.footer-credit:hover { color: rgba(198,169,224,.62); }

/* ============================================================
   BACK TO TOP — discreet, appears on scroll
   ============================================================ */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-noir-encre); color: var(--c-blanc-chamallow);
  border: 1px solid rgba(248,243,236,.2);
  display: grid; place-items: center; cursor: pointer; font-size: 17px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  box-shadow: 0 14px 32px -14px rgba(0,0,0,.55);
  transition: opacity .4s var(--ease-gallery), transform .4s var(--ease-gallery), background .3s ease, color .3s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-framboise); color: var(--c-blanc-chamallow); }
@media (max-width: 720px) { .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* ============================================================
   HOME — Actualités teaser (keeps the home feeling alive)
   ============================================================ */
.home-news { background: var(--c-blanc-chamallow); }
.home-news-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.home-news-item {
  display: block; text-decoration: none; color: inherit;
  padding: 34px; border: 1px solid rgba(14,11,16,.12);
  background: var(--c-blanc-chamallow-2);
  transition: transform .45s var(--ease-gallery, ease), border-color .45s var(--ease-gallery, ease), box-shadow .45s var(--ease-gallery, ease);
}
.home-news-item:hover { transform: translateY(-4px); border-color: var(--c-noir-encre); box-shadow: var(--shadow-art); }
.home-news-item .hn-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-framboise); margin-bottom: 14px;
}
.home-news-item h3 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 32px; line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--fg-1);
}
.home-news-item p {
  font-family: var(--font-editorial); font-style: italic; font-size: 17px; line-height: 1.5;
  color: var(--fg-2); margin: 0;
}
@media (max-width: 720px) {
  .home-news-row { grid-template-columns: 1fr; gap: 16px; }
  .home-news-item { padding: 24px; }
  .home-news-item h3 { font-size: 26px; }
}

/* ============================================================
   COLLAGE LAB PAGE
   ============================================================ */
.lab {
  background: var(--c-blanc-chamallow);
  color: var(--c-noir-encre);
  min-height: 100vh;
  min-height: 100dvh; /* mobile: account for the browser address bar */
  display: flex; flex-direction: column;
}
.lab-bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 40px;
  border-bottom: 1px solid rgba(14,11,16,.12);
  background: var(--c-blanc-chamallow);
}
.lab-bar-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-2); text-decoration: none; font-weight: 600;
}
.lab-bar-back:hover { color: var(--c-framboise); }
.lab-bar-title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 26px; letter-spacing: -0.02em; text-align: center;
}
.lab-bar-title .l { color: var(--c-framboise); }
.lab-bar-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* Lang toggle was designed for the dark navbar; recolor it for the light lab
   bar so it doesn't look like an alien black pill. */
.lab-bar .lang-toggle {
  background: var(--c-blanc-chamallow-2);
  border-color: rgba(14,11,16,.18);
}
.lab-bar .lang-toggle button { color: var(--fg-2); }
.lab-bar .lang-toggle button.active {
  background: var(--c-noir-encre); color: var(--c-blanc-chamallow);
}

.lab-actions-btn {
  padding: 8px 14px;
  background: transparent; border: 1px solid rgba(14,11,16,.15);
  border-radius: 999px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-1); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .24s var(--ease-gallery);
}
.lab-actions-btn:hover { background: var(--c-noir-encre); color: var(--c-blanc-chamallow); border-color: var(--c-noir-encre); }
.lab-actions-btn.danger:hover { background: var(--c-framboise); border-color: var(--c-framboise); color: var(--c-blanc-chamallow); }
.lab-actions-btn:disabled { opacity: .4; cursor: not-allowed; }

.lab-body {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 240px;
  min-height: 0;
}

.lab-side {
  border-right: 1px solid rgba(14,11,16,.1);
  background: var(--c-blanc-chamallow-2);
  padding: 24px 20px;
  overflow-y: auto;
  max-height: calc(100vh - 78px);
}
.lab-side h6 {
  margin: 0 0 14px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline;
}
.lab-side h6 .count { color: var(--c-framboise); font-family: var(--font-mono); }

.lab-cats { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.lab-cat {
  padding: 5px 10px;
  background: transparent; border: 1px solid rgba(14,11,16,.18);
  border-radius: 999px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 600; cursor: pointer;
}
.lab-cat.active { background: var(--c-noir-encre); border-color: var(--c-noir-encre); color: var(--c-blanc-chamallow); }

.lab-frags-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.lab-frag-tile {
  aspect-ratio: 1;
  cursor: grab;
  position: relative;
  background: var(--c-blanc-chamallow);
  border: 1px solid rgba(14,11,16,.1);
  overflow: hidden;
  transition: transform .2s var(--ease-gallery), box-shadow .2s var(--ease-gallery);
}
/* Collage pieces are portrait A4 — give their tiles the same ratio so the
   image fits without letterbox or crop. */
.lab-frag-tile[data-cat="paper"] { aspect-ratio: 594/842; }
.lab-frag-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-framboise); }
.lab-frag-tile:active { cursor: grabbing; }
.lab-frag-tile img, .lab-frag-tile svg { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lab-frag-tile > div { width: 100%; height: 100%; }

.lab-canvas-wrap {
  position: relative;
  background: var(--c-blanc-chamallow);
  overflow: hidden;
  min-height: calc(100vh - 78px);
}
.lab-canvas {
  position: absolute; inset: 24px;
  background: var(--c-blanc-chamallow-2);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(43,27,61,.04), transparent 70%),
    repeating-linear-gradient(0deg, rgba(14,11,16,.02) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(14,11,16,.02) 0 1px, transparent 1px 24px);
  border: 1px dashed rgba(14,11,16,.15);
  overflow: hidden;
  touch-action: none; /* fingers compose on the canvas instead of scrolling */
}
/* Touch: let fingers drag / rotate / resize pieces instead of panning the page */
.lab-piece,
.lab-piece-rot,
.lab-piece-resize { touch-action: none; }
.lab-frag-tile { touch-action: manipulation; }
.lab-canvas[data-bg="paper"]  { background-color: var(--c-papier); }
.lab-canvas[data-bg="violet"] { background-color: var(--c-violet-cosmos); }
.lab-canvas[data-bg="rose"]   { background-color: var(--c-rose-poudre); }

.lab-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.lab-empty-h {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 38px; letter-spacing: -0.025em; color: rgba(14,11,16,.32);
}
.lab-empty-p {
  font-family: var(--font-editorial); font-style: italic;
  font-size: 16px; color: rgba(14,11,16,.45);
}

.lab-piece {
  position: absolute;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  transition: box-shadow .14s, outline .14s;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.lab-piece:active { cursor: grabbing; }
.lab-piece.selected { outline-color: var(--c-framboise); box-shadow: 0 14px 28px -10px rgba(0,0,0,.35); }
/* Only stretch the visual fragment (always the first child). The selection
   tools (.lab-piece-tools, .lab-piece-rot) are appended after and must keep
   their own size + remain interactive. */
.lab-piece > :first-child { width: 100%; height: 100%; pointer-events: none; }

.lab-piece-tools {
  position: absolute;
  top: -38px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--c-noir-encre);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.lab-piece-tools button {
  width: 28px; height: 28px;
  background: transparent; border: 0; color: var(--c-blanc-chamallow);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  cursor: pointer;
}
.lab-piece-tools button:hover { background: rgba(255,255,255,.12); }
.lab-piece-tools button.danger:hover { background: var(--c-framboise); }

.lab-piece-rot {
  position: absolute;
  bottom: -28px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-vert-pomme);
  border: 2px solid var(--c-noir-encre);
  cursor: grab;
}
.lab-piece-rot:active { cursor: grabbing; }
.lab-piece-rot::after {
  content:""; position: absolute; left: 50%; top: -16px;
  width: 1px; height: 14px; background: var(--c-noir-encre);
  transform: translateX(-50%);
}

.lab-piece-resize {
  position: absolute;
  bottom: -10px; right: -10px;
  width: 18px; height: 18px;
  background: var(--c-framboise);
  border: 2px solid var(--c-blanc-chamallow);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: nwse-resize;
  user-select: none;
}
.lab-piece-resize:active { cursor: nwse-resize; }
.lab-piece-resize::before {
  content: "⤡";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-blanc-chamallow);
  font-size: 12px; line-height: 1;
}

.lab-rail {
  border-left: 1px solid rgba(14,11,16,.1);
  background: var(--c-blanc-chamallow);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 28px;
  font-size: 13px; line-height: 1.5; color: var(--fg-2);
}
.lab-rail h6 {
  margin: 0 0 12px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 600;
}
.lab-rail .bg-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lab-rail .bg-swatch {
  aspect-ratio: 5/3;
  border: 1px solid rgba(14,11,16,.18);
  cursor: pointer;
  position: relative;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2); font-weight: 600;
  display: flex; align-items: flex-end;
  padding: 6px;
  transition: outline .14s;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.lab-rail .bg-swatch.active { outline-color: var(--c-framboise); }
.lab-rail .bg-swatch[data-bg="grid"]   { background: var(--c-blanc-chamallow-2); }
.lab-rail .bg-swatch[data-bg="paper"]  { background: var(--c-papier); }
.lab-rail .bg-swatch[data-bg="violet"] { background: var(--c-violet-cosmos); color: var(--c-blanc-chamallow); }
.lab-rail .bg-swatch[data-bg="rose"]   { background: var(--c-rose-poudre); }

.lab-rail .tip {
  padding: 14px;
  background: var(--c-blanc-chamallow-2);
  border-left: 2px solid var(--c-framboise);
  font-family: var(--font-editorial); font-style: italic;
  font-size: 14px; line-height: 1.45;
  color: var(--fg-1);
}

.lab-rail .stat-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
  padding: 6px 0;
  border-bottom: 1px solid rgba(14,11,16,.08);
}
.lab-rail .stat-row b { color: var(--fg-1); font-weight: 700; }

/* ============================================================
   COLLAGE LAB — dark editorial chrome override
   The canvas (work surface) stays cream so it reads as a bright
   "table" posée sur le bureau sombre de l'atelier.
   ============================================================ */
.lab { background: var(--c-violet-cosmos); color: var(--c-blanc-chamallow); }

.lab-bar { background: var(--c-violet-cosmos); border-bottom-color: rgba(198,169,224,.18); }
.lab-bar-back { color: rgba(198,169,224,.7); }
.lab-bar-back:hover { color: var(--c-vert-pomme); }
.lab-bar-title { color: var(--c-blanc-chamallow); }
.lab-bar-title .l { color: var(--c-vert-pomme); }

.lab-bar .lang-toggle { background: rgba(14,11,16,.3); border-color: rgba(198,169,224,.3); }
.lab-bar .lang-toggle button { color: rgba(198,169,224,.65); }
.lab-bar .lang-toggle button.active { background: var(--c-blanc-chamallow); color: var(--c-noir-encre); }

.lab-actions-btn { border-color: rgba(198,169,224,.3); color: var(--c-blanc-chamallow); }
.lab-actions-btn:hover { background: var(--c-blanc-chamallow); color: var(--c-noir-encre); border-color: var(--c-blanc-chamallow); }

.lab-side { background: var(--c-violet-cosmos); border-right-color: rgba(198,169,224,.18); }
.lab-side h6 { color: rgba(198,169,224,.6); }

.lab-cat { border-color: rgba(198,169,224,.3); color: rgba(198,169,224,.7); }
.lab-cat.active { background: var(--c-blanc-chamallow); border-color: var(--c-blanc-chamallow); color: var(--c-noir-encre); }

/* Fragment tiles stay light so the fragment preview pops on the dark side panel */
.lab-frag-tile { background: var(--c-blanc-chamallow); border-color: rgba(198,169,224,.15); }
.lab-frag-tile:hover { border-color: var(--c-vert-pomme); }

.lab-canvas-wrap { background: var(--c-violet-cosmos); }
/* .lab-canvas keeps its cream/papier base — intentionally bright as the work surface. */

.lab-rail {
  background: var(--c-violet-cosmos);
  border-left-color: rgba(198,169,224,.18);
  color: rgba(198,169,224,.75);
}
.lab-rail h6 { color: rgba(198,169,224,.6); }
.lab-rail .bg-swatch { border-color: rgba(198,169,224,.25); color: rgba(198,169,224,.65); }
.lab-rail .tip {
  background: rgba(14,11,16,.3);
  color: rgba(248,243,236,.85);
  border-left-color: var(--c-vert-pomme);
}
.lab-rail .stat-row { border-bottom-color: rgba(198,169,224,.15); color: rgba(198,169,224,.7); }
.lab-rail .stat-row b { color: var(--c-blanc-chamallow); }

/* ============================================================
   COLLAGE LAB — Tool toggle (Collage / Pinceau) + brush controls
   ============================================================ */
.lab-tool-toggle, .lab-brush-layer-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 12px;
}
.lab-tool-btn, .lab-brush-layer {
  padding: 8px 6px; background: transparent;
  border: 1px solid rgba(198,169,224,.3);
  color: rgba(198,169,224,.7);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: all .18s ease;
}
.lab-tool-btn:hover, .lab-brush-layer:hover { color: var(--c-blanc-chamallow); border-color: var(--c-vert-pomme); }
.lab-tool-btn.is-active, .lab-brush-layer.is-active {
  background: var(--c-blanc-chamallow); color: var(--c-noir-encre); border-color: var(--c-blanc-chamallow);
}
.lab-brush-sizes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px;
}
.lab-brush-size {
  aspect-ratio: 1; background: transparent;
  border: 1px solid rgba(198,169,224,.25); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.lab-brush-size span { background: rgba(198,169,224,.7); border-radius: 50%; display: block; }
.lab-brush-size.is-active { background: rgba(198,169,224,.18); border-color: var(--c-vert-pomme); }
.lab-brush-size.is-active span { background: var(--c-blanc-chamallow); }

.lab-brush-colors {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 10px;
}
.lab-brush-color {
  aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(198,169,224,.25); cursor: pointer; padding: 0;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .18s ease;
}
.lab-brush-color.is-active { outline-color: var(--c-vert-pomme); }

.lab-brush-clear {
  width: 100%; padding: 9px 8px; background: transparent;
  border: 1px solid rgba(214,59,107,.45); color: var(--c-framboise);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: background .18s ease;
}
.lab-brush-clear:hover { background: rgba(214,59,107,.15); }

/* When brushing, pieces shouldn't intercept clicks + crosshair cursor */
body.is-brush .lab-piece { pointer-events: none; }
body.is-brush .lab-canvas, body.is-brush .lab-canvas * { cursor: crosshair; }
/* Eraser mode — distinct cursor so it's clear the brush now removes paint. */
body.is-brush.is-erasing .lab-canvas, body.is-brush.is-erasing .lab-canvas * { cursor: cell; }

/* Dedicated MOVE handle on selected pieces — explicit grab target,
   especially helpful for tablet / phone touch where dragging the piece body
   can be fiddly. */
.lab-piece-move {
  position: absolute;
  top: 50%; left: -40px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--c-violet-cosmos);
  color: var(--c-blanc-chamallow);
  border: 1px solid var(--c-blanc-chamallow);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(14,11,16,.4);
  cursor: move;
  user-select: none;
  touch-action: none;
  z-index: 2;
}
.lab-piece-move svg { width: 16px; height: 16px; pointer-events: none; }
.lab-piece-move:active { cursor: grabbing; background: var(--c-framboise); }

/* ============================================================
   COLLAGE LAB — letter creator (shown when the "Letters" category is active)
   ============================================================ */
.lab-letter-creator {
  grid-column: 1 / -1; /* full width inside the 2-col library grid */
  display: flex; flex-direction: column; gap: 10px;
  padding: 6px 2px 0;
}
.lab-letter-label {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(198,169,224,.55); font-weight: 600; margin-top: 6px;
}
#lab-letter-input {
  font-family: var(--font-display); font-style: italic;
  font-size: 38px; line-height: 1; text-align: center;
  padding: 10px 8px;
  background: rgba(14,11,16,.35);
  border: 1px solid rgba(198,169,224,.25);
  color: var(--c-blanc-chamallow);
  outline: none;
  caret-color: var(--c-vert-pomme);
}
#lab-letter-input:focus { border-color: var(--c-vert-pomme); }
.lab-letter-fonts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.lab-letter-font {
  padding: 8px 6px;
  background: transparent;
  border: 1px solid rgba(198,169,224,.25);
  color: rgba(198,169,224,.7);
  font-size: 14px; cursor: pointer;
  transition: all .18s var(--ease-gallery, ease);
}
.lab-letter-font:hover { border-color: var(--c-vert-pomme); color: var(--c-blanc-chamallow); }
.lab-letter-font.is-active {
  background: var(--c-blanc-chamallow); color: var(--c-noir-encre);
  border-color: var(--c-blanc-chamallow);
}
.lab-letter-colors {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.lab-letter-color {
  aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(198,169,224,.25); cursor: pointer;
  padding: 0; outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .18s var(--ease-gallery, ease);
}
.lab-letter-color.is-active { outline-color: var(--c-vert-pomme); }
.lab-letter-add {
  margin-top: 10px;
  padding: 11px 14px;
  background: var(--c-vert-pomme); color: var(--c-noir-encre);
  border: 0; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.lab-letter-add:hover { background: var(--c-blanc-chamallow); }
.lab-letter-preview {
  margin-top: 14px;
  aspect-ratio: 1;
  background: rgba(14,11,16,.4);
  border: 1px dashed rgba(198,169,224,.2);
  display: grid; place-items: center;
}

/* Mobile lab — banner instead of full atelier */
.lab-mobile-banner {
  display: none;
  padding: 88px 28px 80px;
  background: var(--c-violet-cosmos);
  color: var(--c-blanc-chamallow);
  text-align: center;
  border-top: 1px solid rgba(198,169,224,.2);
  border-bottom: 1px solid rgba(198,169,224,.2);
}
.lab-mobile-banner h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 8.5vw, 52px);
  line-height: 1.05; margin: 18px 0 22px;
  color: var(--c-blanc-chamallow);
}
.lab-mobile-banner p {
  font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(18px, 4.4vw, 22px); line-height: 1.55;
  color: var(--c-lavande); margin: 0 auto; max-width: 36ch;
}
.lab-mobile-banner .btn { margin-top: 24px; color: var(--c-vert-pomme); border-color: var(--c-vert-pomme); }
.lab-mobile-banner .s-eye { justify-content: center; color: var(--c-vert-pomme); }

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.page-hero {
  background: var(--c-violet-cosmos);
  color: var(--c-blanc-chamallow);
  padding: 96px 56px 72px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  /* Photo / texture overlay disabled — hero shows just the violet base. */
  display: none;
}
.page-hero > * { position: relative; }
.page-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: end; }
.page-hero-eye {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--c-vert-pomme); font-weight: 500;
  display: inline-flex; gap: 10px; align-items: center; margin-bottom: 28px;
}
.page-hero-eye::before { content:""; width: 28px; height: 1px; background: var(--c-vert-pomme); }
.page-hero-title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(64px, 10vw, 156px); line-height: 0.98; letter-spacing: -0.04em;
  margin: 0;
  font-variation-settings: "opsz" 144;
  color: var(--c-blanc-chamallow);
}
.page-hero-title em { color: var(--c-rose-poudre); font-style: italic; }
.page-hero-lede {
  font-family: var(--font-editorial); font-style: italic;
  font-size: 22px; line-height: 1.45; color: var(--c-lavande);
  max-width: 460px; margin-top: 12px;
}
.page-hero-meta-row {
  display: flex; gap: 48px; margin-top: 48px;
  border-top: 1px solid rgba(198,169,224,.18); padding-top: 28px;
  flex-wrap: wrap;
}
.page-hero-meta-row .item {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-lavande-2); font-weight: 500;
}
.page-hero-meta-row .item b {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 22px; letter-spacing: -0.02em; color: var(--c-blanc-chamallow);
  text-transform: none;
}

/* ============================================================
   PAGE HERO — variants par page principale (Schéma D : audacieux)
   ============================================================ */

/* Présentation — lavande, accent violet cosmos (même famille, plus profond) */
.page-hero--lavande { background: var(--c-lavande); color: var(--c-noir-encre); }
.page-hero--lavande .page-hero-eye        { color: var(--c-violet-cosmos); }
.page-hero--lavande .page-hero-eye::before{ background: var(--c-violet-cosmos); }
.page-hero--lavande .page-hero-title      { color: var(--c-noir-encre); }
.page-hero--lavande .page-hero-title em   { color: var(--c-violet-cosmos); }
.page-hero--lavande .page-hero-lede       { color: rgba(14,11,16,.72); }
.page-hero--lavande .page-hero-meta-row   { border-top-color: rgba(14,11,16,.18); }
.page-hero--lavande .page-hero-meta-row .item   { color: rgba(14,11,16,.55); }
.page-hero--lavande .page-hero-meta-row .item b { color: var(--c-noir-encre); }

/* Collections — framboise, accent rose poudré (écho doux, même famille) */
.page-hero--framboise { background: var(--c-framboise); color: var(--c-blanc-chamallow); }
.page-hero--framboise .page-hero-eye        { color: var(--c-rose-poudre); }
.page-hero--framboise .page-hero-eye::before{ background: var(--c-rose-poudre); }
.page-hero--framboise .page-hero-title      { color: var(--c-blanc-chamallow); }
.page-hero--framboise .page-hero-title em   { color: var(--c-rose-poudre); }
.page-hero--framboise .page-hero-lede       { color: rgba(248,243,236,.88); }
.page-hero--framboise .page-hero-meta-row   { border-top-color: rgba(248,243,236,.25); }
.page-hero--framboise .page-hero-meta-row .item   { color: rgba(248,243,236,.62); }
.page-hero--framboise .page-hero-meta-row .item b { color: var(--c-blanc-chamallow); }

/* Actualités — vert pomme, accent violet cosmos (palette signature) */
.page-hero--lime { background: var(--c-vert-pomme); color: var(--c-noir-encre); }
.page-hero--lime .page-hero-eye        { color: var(--c-violet-cosmos); }
.page-hero--lime .page-hero-eye::before{ background: var(--c-violet-cosmos); }
.page-hero--lime .page-hero-title      { color: var(--c-noir-encre); }
.page-hero--lime .page-hero-title em   { color: var(--c-violet-cosmos); }
.page-hero--lime .page-hero-lede       { color: rgba(14,11,16,.72); }
.page-hero--lime .page-hero-meta-row   { border-top-color: rgba(14,11,16,.2); }
.page-hero--lime .page-hero-meta-row .item   { color: rgba(14,11,16,.55); }
.page-hero--lime .page-hero-meta-row .item b { color: var(--c-noir-encre); }

/* ============================================================
   NAV — flows seamlessly with the hero color of the current page.
   Driven by body classes set in margousha_body_class() (functions.php).
   ============================================================ */

/* Présentation — lavande nav, dark text, dark logo */
.has-hero-lavande .nav {
  background: var(--c-lavande);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--c-noir-encre);
}
/* Présentation (lavande) shows the COLORED logo too — no invert filter needed. */
.has-hero-lavande .nav-logo-svg.nav-logo-svg--white { display: none; }
.has-hero-lavande .nav-logo-svg.nav-logo-svg--color { display: block; }
.has-hero-lavande .nav-links a { color: rgba(14,11,16,.7); }
.has-hero-lavande .nav-links a:hover,
.has-hero-lavande .nav-links a.is-current { color: var(--c-violet-cosmos); border-bottom-color: var(--c-violet-cosmos); }
.has-hero-lavande .lang-toggle { border-color: rgba(14,11,16,.25); background: transparent; }
.has-hero-lavande .lang-toggle button { color: rgba(14,11,16,.5); }
.has-hero-lavande .lang-toggle button.active { background: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.has-hero-lavande .nav-burger { border-color: rgba(14,11,16,.3); color: var(--c-noir-encre); }
.has-hero-lavande .btn-shop { background: var(--c-noir-encre); border-color: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.has-hero-lavande .btn-shop:hover { background: var(--c-blanc-chamallow); border-color: var(--c-noir-encre); color: var(--c-noir-encre); }

/* Collections — framboise nav, white text, white logo (no filter) */
.has-hero-framboise .nav {
  background: var(--c-framboise);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--c-blanc-chamallow);
}
.has-hero-framboise .nav-links a { color: rgba(248,243,236,.78); }
.has-hero-framboise .nav-links a:hover,
.has-hero-framboise .nav-links a.is-current { color: var(--c-rose-poudre); border-bottom-color: var(--c-rose-poudre); }
.has-hero-framboise .lang-toggle { border-color: rgba(248,243,236,.3); background: transparent; }
.has-hero-framboise .lang-toggle button { color: rgba(248,243,236,.65); }
.has-hero-framboise .lang-toggle button.active { background: var(--c-blanc-chamallow); color: var(--c-framboise); }
.has-hero-framboise .nav-burger { border-color: rgba(248,243,236,.4); color: var(--c-blanc-chamallow); }
.has-hero-framboise .btn-shop { background: var(--c-noir-encre); border-color: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.has-hero-framboise .btn-shop:hover { background: var(--c-blanc-chamallow); border-color: var(--c-blanc-chamallow); color: var(--c-framboise); }

/* Actualités — vert pomme nav, dark text, dark logo */
.has-hero-lime .nav {
  background: var(--c-vert-pomme);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--c-noir-encre);
}
/* Actualités (lime) shows the COLORED logo instead of the inverted white one. */
.has-hero-lime .nav-logo-svg--white { display: none; }
.has-hero-lime .nav-logo-svg--color { display: block; }
.has-hero-lime .nav-links a { color: rgba(14,11,16,.7); }
.has-hero-lime .nav-links a:hover,
.has-hero-lime .nav-links a.is-current { color: var(--c-violet-cosmos); border-bottom-color: var(--c-violet-cosmos); }
.has-hero-lime .lang-toggle { border-color: rgba(14,11,16,.25); background: transparent; }
.has-hero-lime .lang-toggle button { color: rgba(14,11,16,.5); }
.has-hero-lime .lang-toggle button.active { background: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.has-hero-lime .nav-burger { border-color: rgba(14,11,16,.3); color: var(--c-noir-encre); }
.has-hero-lime .btn-shop { background: var(--c-noir-encre); border-color: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.has-hero-lime .btn-shop:hover { background: var(--c-blanc-chamallow); border-color: var(--c-noir-encre); color: var(--c-noir-encre); }

/* Contact — rose poudré nav, dark text, dark logo (invited / warm) */
.has-hero-rose .nav {
  background: var(--c-rose-poudre);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--c-noir-encre);
}
/* Contact (rose) shows the COLORED logo instead of the inverted white one. */
.has-hero-rose .nav-logo-svg--white { display: none; }
.has-hero-rose .nav-logo-svg--color { display: block; }
.has-hero-rose .nav-links a { color: rgba(14,11,16,.7); }
.has-hero-rose .nav-links a:hover,
.has-hero-rose .nav-links a.is-current { color: var(--c-framboise); border-bottom-color: var(--c-framboise); }
.has-hero-rose .lang-toggle { border-color: rgba(14,11,16,.25); background: transparent; }
.has-hero-rose .lang-toggle button { color: rgba(14,11,16,.5); }
.has-hero-rose .lang-toggle button.active { background: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.has-hero-rose .nav-burger { border-color: rgba(14,11,16,.3); color: var(--c-noir-encre); }
.has-hero-rose .btn-shop { background: var(--c-noir-encre); border-color: var(--c-noir-encre); color: var(--c-blanc-chamallow); }
.has-hero-rose .btn-shop:hover { background: var(--c-blanc-chamallow); border-color: var(--c-noir-encre); color: var(--c-noir-encre); }
/* Sync the cream left half of contact-wrap with the rose nav (no demarcation) */
.has-hero-rose .contact-wrap { background: var(--c-rose-poudre); }

/* ============================================================
   RESPONSIVE — Mobile (≤ 720px)
   ============================================================ */
@media (max-width: 720px) {
  .nav { padding: 14px 18px; grid-template-columns: 1fr auto auto; gap: 10px; }
  .nav-links { display: none; }
  .nav-logo { font-size: 22px; }
  .lang-toggle button { padding: 4px 8px; font-size: 9px; }
  .nav-burger { display: inline-flex; }
  .nav-right .btn { display: none; }

  /* Mobile menu drawer */
  .nav-drawer {
    display: none;
    position: fixed; inset: 0;
    z-index: 100;
    background: var(--c-violet-cosmos);
    color: var(--c-blanc-chamallow);
    padding: 80px 32px 32px;
    overflow-y: auto;
  }
  .nav-drawer.is-open { display: block; }
  .nav-drawer .close {
    position: absolute; top: 18px; right: 18px;
    width: 36px; height: 36px;
    border: 1px solid rgba(198,169,224,.3);
    background: transparent;
    color: var(--c-blanc-chamallow);
    border-radius: 999px;
    font-size: 18px;
  }
  .nav-drawer ul { list-style: none; padding: 0; margin: 0; }
  .nav-drawer ul a {
    display: block; padding: 12px 0;
    font-family: var(--font-display); font-style: italic;
    font-size: 38px; letter-spacing: -0.02em;
    color: var(--c-blanc-chamallow);
    text-decoration: none;
    border-bottom: 1px solid rgba(198,169,224,.12);
  }
  .nav-drawer ul a:hover { color: var(--c-vert-pomme); }
  .nav-drawer .drawer-cta { margin-top: 28px; }

  .hero { padding: 60px 22px 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; min-height: auto; }
  .hero-title { font-size: 76px; line-height: .92; }
  .hero-title .name2 { padding-left: 24px; }
  .hero-baseline { font-size: 19px; margin-top: 28px; max-width: none; }
  .hero-meta { gap: 24px; flex-wrap: wrap; margin-top: 32px; }
  .hero-meta-item b { font-size: 18px; }
  .hero-art { min-height: 360px; margin-top: 12px; }
  .hero-art-img { max-width: 280px; }
  .hero-frame-decor-1 { width: 70px; height: 90px; }
  .hero-frame-decor-2 { width: 60px; height: 80px; }
  .hero-ctas { margin-top: 32px; }

  .marquee { padding: 12px 0; }
  .marquee-track { font-size: 20px; }

  .section { padding: 64px 22px; }
  .s-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .s-title { font-size: 48px; max-width: none; }
  .s-lede { font-size: 17px; max-width: none; }

  .univers { gap: 24px; }
  .univers-col { grid-column: span 12; }
  .univers-h { font-size: 28px; }

  .works { gap: 18px; }
  .work,
  .work.span-3, .work.span-4, .work.span-5,
  .work.span-6, .work.span-7, .work.span-8 {
    grid-column: span 12;
  }
  .work-name { font-size: 22px; }

  .projects { gap: 24px; }
  .project, .project.large { grid-column: span 12; }
  .project-name { font-size: 28px; }

  .statement-wrap { grid-template-columns: 1fr; gap: 36px; }
  .statement-text { font-size: 26px; }
  .statement-portrait { max-width: 240px; margin: 0 auto; }

  .lab-teaser { grid-template-columns: 1fr; gap: 32px; }
  .lab-title { font-size: 56px; }
  .lab-lede { font-size: 17px; }

  .shop-strip { grid-template-columns: 1fr; padding: 56px 22px; gap: 28px; }
  .shop-strip-h { font-size: 44px; }
  .shop-strip-cta { align-items: flex-start; }

  .collab { grid-template-columns: 1fr; gap: 32px; padding: 56px 22px; }
  .collab-h { font-size: 44px; }
  .collab-list { grid-template-columns: 1fr; }
  .collab-item:nth-child(2) { border-top: 1px solid rgba(14,11,16,.18); }

  .footer { padding: 56px 22px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-mark { font-size: 76px; }
  .footer::before { left: 22px; right: 22px; }
  .footer-base { flex-direction: column; gap: 8px; }

  .page-hero { padding: 60px 22px 48px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-hero-title { font-size: 64px; }
  .page-hero-lede { font-size: 17px; }
  .page-hero-meta-row { gap: 24px; flex-wrap: wrap; }

  /* Lab on mobile — show banner, hide atelier */
  .lab-body { display: none; }
  .lab-mobile-banner { display: block; }
  .lab-bar { padding: 14px 18px; }
  .lab-bar-title { font-size: 20px; }
  .lab-actions-btn { padding: 6px 10px; font-size: 9px; }
}

/* Tablet narrow tweaks */
@media (max-width: 1024px) and (min-width: 721px) {
  .hero { padding: 72px 40px; }
  .hero-grid { gap: 40px; min-height: 600px; }
  .section { padding: 96px 40px; }
  .footer { padding: 64px 40px 28px; }
  .footer::before { left: 40px; right: 40px; }
  .shop-strip, .collab { padding: 64px 40px; }
  .lab-body { grid-template-columns: 220px 1fr 200px; }
}

/* ============================================================
   TABLET + MOBILE — collapse the full nav into a burger menu.
   6 nav items + logo + lang toggle + Boutique CTA don't fit
   alongside each other below 1024px without overlapping.
   ============================================================ */
@media (max-width: 1024px) {
  .nav { padding: 16px 24px; grid-template-columns: 1fr auto auto; gap: 12px; }
  .nav-logo { height: 56px; }
  .nav-logo-svg { height: 50px; max-width: 220px; }
  .nav-logo-svg--color { transform: scale(1.15); transform-origin: left center; }
  .nav-links { display: none; }            /* hide the inline links */
  .nav-burger { display: inline-flex; }    /* show the burger trigger */
  .nav-right .btn { display: none; }       /* Boutique CTA goes into the drawer */
  .lang-toggle button { padding: 4px 8px; font-size: 9px; letter-spacing: 0.18em; }

  /* Drawer (lateral menu) — was scoped to ≤720px, also needed for tablet now. */
  .nav-drawer {
    position: fixed; inset: 0; z-index: 100;
    background: var(--c-violet-cosmos);
    color: var(--c-blanc-chamallow);
    padding: 80px 32px 32px;
    overflow-y: auto;
  }
  .nav-drawer.is-open { display: block; }
  .nav-drawer .close {
    position: absolute; top: 18px; right: 18px;
    width: 36px; height: 36px;
    border: 1px solid rgba(198,169,224,.3);
    background: transparent;
    color: var(--c-blanc-chamallow);
    border-radius: 999px;
    font-size: 18px;
  }
  .nav-drawer ul { list-style: none; padding: 0; margin: 0; }
  .nav-drawer ul a {
    display: block; padding: 14px 0;
    font-family: var(--font-display); font-style: italic;
    font-size: 36px; letter-spacing: -0.02em;
    color: var(--c-blanc-chamallow);
    text-decoration: none;
    border-bottom: 1px solid rgba(198,169,224,.12);
  }
  .nav-drawer .drawer-cta { margin-top: 28px; display: inline-flex; }
}

/* Landscape phones (real lab shows above 720px): fit the limited height —
   compact bar + side panels, but keep ALL three panes (library / canvas /
   options + brush) accessible. */
@media (min-width: 721px) and (max-height: 560px) and (orientation: landscape) {
  .lab-bar { padding: 10px 14px; }
  .lab-bar-title { font-size: 18px; }
  .lab-body { grid-template-columns: 130px 1fr 140px; }
  .lab-side, .lab-rail {
    padding: 10px 8px; gap: 18px;
    max-height: calc(100dvh - 56px); overflow-y: auto;
    font-size: 11px;
  }
  .lab-canvas { inset: 10px; }
  .lab-actions-btn span:not(:first-child) { display: none; } /* icon-only buttons */

  /* Compact brush + options to fit the narrow right rail */
  .lab-rail h6 { font-size: 9px; letter-spacing: 0.22em; margin-bottom: 8px; }
  .lab-tool-toggle, .lab-brush-layer-toggle { gap: 4px; margin-bottom: 8px; }
  .lab-tool-btn, .lab-brush-layer { padding: 6px 3px; font-size: 9px; letter-spacing: 0.14em; }
  .lab-brush-sizes { gap: 4px; margin-bottom: 6px; }
  .lab-brush-colors { gap: 3px; margin-bottom: 6px; }
  .lab-brush-clear { padding: 6px 4px; font-size: 9px; letter-spacing: 0.14em; }
  .lab-rail .bg-options { gap: 4px; }
  .lab-rail .bg-swatch { font-size: 8px; }
  .lab-rail .stat-row { font-size: 11px; padding: 4px 0; }
  .lab-rail .tip { font-size: 12px; padding: 10px; line-height: 1.4; }

  /* Library categories: keep pills tight */
  .lab-cat { padding: 4px 7px; font-size: 8px; letter-spacing: 0.14em; }
}

/* ============================================================
   ATELIER HOME — additions (2026 rework)
   Logo SVG, giant artist name, atelier triptych, shop gateway,
   reveal-on-scroll, subtle parallax helpers.
   Loaded after the base file so it overrides without surprise.
   ============================================================ */

/* ---- nav logo: SVG, no distortion, sized for dark header ---- */
.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 84px;
}
.nav-logo-svg {
  display: block;
  height: 80px;
  width: auto;
  max-width: 440px;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--c-blanc-chamallow);
  line-height: 1;
}
.nav-logo-text .dot { color: var(--c-framboise); }

/* Smaller text in nav links — keep 5 items + CTA balanced */
.nav-links { gap: 24px; }

/* Drawer lock for the body when open */
body.no-scroll { overflow: hidden; }

/* ---- reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 700ms var(--ease-gallery),
    transform 700ms var(--ease-gallery);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-revealed,
  [data-parallax] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   HOME — HERO ATELIER (giant artist name)
   ============================================================ */
.home-hero {
  position: relative;
  background:
    radial-gradient(900px 600px at 12% 100%, rgba(214,59,107,.10), transparent 60%),
    radial-gradient(800px 700px at 100% 0%, rgba(196,229,56,.06), transparent 65%),
    var(--c-violet-cosmos);
  color: var(--c-blanc-chamallow);
  padding: 120px 56px 96px;
  overflow: hidden;
  isolation: isolate;
}
.home-hero::after {
  /* Photo overlay disabled — hero shows just the violet base. */
  display: none;
}

/* Micheline — "Hors collection n°4" sits to the right of the artist name,
   mirrored horizontally + transparent, like a faded apparition. */
.home-hero-micheline {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 80%; max-width: 1280px;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: flex-end;
  pointer-events: none;
  z-index: 0;
}
.home-hero-micheline img {
  width: 100%; height: 100%;
  /* "cover" makes the image fill the whole block (no empty margins). It crops
     the overflow, but the mask + low opacity keep it reading as a soft ghost. */
  object-fit: cover; object-position: right center;
  /* "screen" + grayscale = the image fades into the violet as a soft ghost
     instead of staying as a coloured photo darkened. The mask feathers the
     left/top/bottom edges so the ghost dissolves into the violet rather than
     ending on a visible rectangular edge. */
  opacity: 0.26;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  transform: scaleX(-1);
  -webkit-mask-image:
    linear-gradient(to left, transparent 0%, #000 42%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to left, transparent 0%, #000 42%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
@media (max-width: 720px) {
  .home-hero-micheline { width: 84%; }
  .home-hero-micheline img { opacity: 0.3; }
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}
.home-hero-eye {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-vert-pomme);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.home-hero-eye::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--c-vert-pomme);
}

/* Giant name — the page's exhibition poster */
.home-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 13.5vw, 240px);
  line-height: 0.96; /* was 0.88 — too tight: 'l' of Klukowski touched 'g' of Margousha */
  letter-spacing: -0.045em;
  color: var(--c-blanc-chamallow);
  margin: 0;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.home-name-first { display: block; }
.home-name-last {
  display: block;
  color: var(--c-blanc-chamallow);
  margin-top: 0.06em;
  /* both names flush left now that Klukowski sits on top */
}
.home-name-dot { color: var(--c-blanc-chamallow); }

.home-hero-sub {
  margin: 36px 0 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.32;
  color: var(--c-lavande);
  max-width: 720px;
}
.home-hero-lede {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-lavande-2);
  max-width: 540px;
}
.home-hero-ctas {
  margin-top: 44px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.home-hero-ctas .btn-glyph { margin-left: 4px; }

/* Decorative floating paper shapes behind the name */
.home-hero-floats { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.home-hero-float {
  position: absolute;
  opacity: .55;
  filter: blur(0.4px);
}
.home-hero-float.f-1 {
  top: 18%; right: 6%;
  width: 220px; height: 280px;
  background: var(--c-framboise);
  transform: rotate(8deg);
}
.home-hero-float.f-2 {
  bottom: 8%; left: 4%;
  width: 180px; height: 240px;
  background: var(--c-rose-poudre);
  transform: rotate(-6deg);
  opacity: .35;
}
.home-hero-float.f-3 {
  top: 8%; left: 38%;
  width: 120px; height: 150px;
  background: var(--c-vert-pomme);
  transform: rotate(-12deg);
  opacity: .22;
}

/* ============================================================
   HOME — ATELIER TRIPTYCH (coller / peindre / composer)
   ============================================================ */
.atelier-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.atelier-card {
  padding: 28px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hair);
  position: relative;
  transition: transform .4s var(--ease-gallery), box-shadow .4s var(--ease-gallery);
}
.atelier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.atelier-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-framboise);
  margin-bottom: 14px;
}
.atelier-h {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--c-violet-cosmos);
}
.atelier-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-2);
}

/* ============================================================
   HOME — CONTACT short CTA
   ============================================================ */
.home-contact {
  padding: 96px 56px;
  background: var(--c-rose-poudre);
  color: var(--c-noir-encre);
  text-align: center;
}
.home-contact-inner {
  max-width: 760px;
  margin: 0 auto;
}
.home-contact .s-eye {
  justify-content: center;
  color: var(--c-violet-cosmos);
}
.home-contact-h {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 14px 0 28px;
  color: var(--c-violet-cosmos);
}
.home-contact-h em { color: var(--c-framboise); }

/* ============================================================
   SHOP GATEWAY page — replaces the fake e-commerce
   ============================================================ */
.shop-gateway-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 120px 56px 96px;
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(214,59,107,.10), transparent 60%),
    var(--c-violet-cosmos);
  color: var(--c-blanc-chamallow);
  overflow: hidden;
}
.shop-gateway-hero .s-eye { color: var(--c-vert-pomme); }
.shop-gateway-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 18px 0 0;
  color: var(--c-blanc-chamallow);
  font-variation-settings: "opsz" 144;
}
.shop-gateway-title .dot { color: var(--c-framboise); }
.shop-gateway-sub {
  margin: 22px 0 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--c-rose-poudre);
}
.shop-gateway-lede {
  margin: 14px 0 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-lavande);
}
.shop-gateway-ctas {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.shop-gateway-primary {
  padding: 14px 26px;
  font-size: 12px;
}
.shop-gateway-meta {
  margin-top: 48px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(198, 169, 224, .2);
  padding-top: 28px;
}
.shop-gateway-meta .item {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-lavande-2);
  font-weight: 500;
}
.shop-gateway-meta .item b {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--c-blanc-chamallow);
  text-transform: none;
}
.shop-gateway-art {
  margin: 0;
  aspect-ratio: 4/5;
  background: var(--c-noir-encre-soft);
  overflow: hidden;
  position: relative;
  transform: rotate(-2deg);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.6);
}
.shop-gateway-art img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.shop-gateway-end {
  padding: 96px 56px;
  text-align: center;
  background: var(--c-blanc-chamallow);
  color: var(--c-noir-encre);
}
.shop-gateway-end-text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.32;
  color: var(--c-violet-cosmos);
  max-width: 720px;
  margin: 0 auto 32px;
}

/* ============================================================
   HOME — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .home-hero { padding: 96px 40px 72px; }
  .home-name-last { padding-left: 4vw; }
  .atelier-triptych { gap: 22px; }
  .shop-gateway-hero { padding: 96px 40px 72px; gap: 40px; }
}

@media (max-width: 768px) {
  .home-hero { padding: 72px 22px 56px; }
  .home-hero-eye { margin-bottom: 22px; }
  .home-hero-sub { margin-top: 24px; }
  .home-hero-ctas { margin-top: 28px; gap: 10px; }
  .home-name-last { padding-left: 18px; }
  .home-hero-float.f-1 { width: 120px; height: 160px; right: -10px; }
  .home-hero-float.f-2 { width: 100px; height: 140px; left: -10px; }
  .home-hero-float.f-3 { display: none; }

  .atelier-triptych { grid-template-columns: 1fr; gap: 16px; }
  .atelier-card { padding: 22px; }
  .atelier-h { font-size: 28px; }

  .projects-preview { grid-template-columns: 1fr; }

  .home-contact { padding: 64px 22px; }

  .shop-gateway-hero {
    grid-template-columns: 1fr;
    padding: 72px 22px 56px;
    gap: 32px;
  }
  .shop-gateway-meta { gap: 24px; padding-top: 20px; margin-top: 32px; }
  .shop-gateway-art { transform: rotate(-1deg); max-width: 320px; margin: 0 auto; }
  .shop-gateway-end { padding: 56px 22px; }
}

@media (max-width: 480px) {
  .home-name { font-size: clamp(56px, 16vw, 88px); }
  .home-hero-ctas .btn { width: 100%; justify-content: center; }
  .shop-gateway-ctas .btn { width: 100%; justify-content: center; }
}

/* Nav logo scaling on small screens (overrides mobile rules above) */
@media (max-width: 720px) {
  .nav-logo { height: 60px; }
  .nav-logo-svg { height: 56px; max-width: 260px; }
  .nav-logo-text { font-size: 22px; }
}