/* THE PF LAB — project.css — project pages grids & overrides */

/* ═══════════════════════════════
   PJ-GRID — Editorial system (unified)
═══════════════════════════════ */
.pj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 1.2rem;
}
/* First item featured — landscape hero */
.pj-grid .pj-med:first-child {
  grid-column: span 2;
  aspect-ratio: 4/3;
}
/* Default cell */
.pj-med {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: rgba(13,12,10,.04);
  cursor: zoom-in;
}
.pj-med--portrait { aspect-ratio: 2/3 !important; }
.pj-med--p34 { aspect-ratio: 3/4 !important; }
.pj-med--p45 { aspect-ratio: 4/5 !important; }
.pj-med--landscape { aspect-ratio: 4/3 !important; }
.pj-med--video {
  grid-column: span 2;
  aspect-ratio: 16/9 !important;
  cursor: default;
}
.pj-med--wide {
  grid-column: span 3;
  aspect-ratio: 21/9 !important;
}

.pj-med-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,1,.36,1), filter .35s cubic-bezier(.22,1,.36,1);
}
.pj-med:hover .pj-med-img {
  transform: scale(1.04);
  filter: brightness(.9);
}
.pj-med-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pj-med-lbl {
  position: absolute; bottom: .6rem; left: .7rem;
  font-family: var(--mono); font-size: .42rem;
  letter-spacing: .14em; color: rgba(245,242,236,.8);
  text-transform: uppercase; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.pj-med:hover .pj-med-lbl { opacity: 1; }
.pj-med-zoom {
  position: absolute; top: .6rem; right: .7rem;
  font-size: .62rem; color: rgba(245,242,236,.7);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.pj-med:hover .pj-med-zoom { opacity: 1; }

/* Responsive */
@media (max-width: 900px) {
  .pj-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pj-grid .pj-med:first-child { grid-column: span 2; aspect-ratio: 16/9; }
  .pj-med--wide { grid-column: span 2 !important; }
}
@media (max-width: 480px) {
  .pj-grid { grid-template-columns: 1fr !important; gap: 3px; }
  .pj-grid .pj-med:first-child { grid-column: span 1 !important; aspect-ratio: 4/3; }
  .pj-med--video { grid-column: span 1 !important; }
  .pj-med--wide { grid-column: span 1 !important; aspect-ratio: 4/3 !important; }
}


/* ═══════════════════════════════
   NAMED MEDIA GRIDS — base layouts
═══════════════════════════════ */

/* Shared grid base */
.cmedia-numero,
.cmedia-3portrait,
.cmedia-krug,
.cmedia-lveb-r3,
.cmedia-lveb-r2,
.cmedia-unix-photos,
.cmedia-unix-videos,
.cmedia-mugler-photos {
  display: grid !important;
  gap: 3px !important;
  padding: 0 2rem 2rem !important;
}

/* Numéro — 6 portraits 4/6 → 3 cols desktop */
.cmedia-numero { grid-template-columns: repeat(3, 1fr) !important; }

/* Schön — 3 portraits → always 3 cols */
.cmedia-3portrait { grid-template-columns: repeat(3, 1fr) !important; }

/* Krug / LCM — squares → 4 cols desktop */
.cmedia-krug { grid-template-columns: repeat(4, 1fr) !important; }

/* LVEB row of 3 (3 squares) */
.cmedia-lveb-r3 { grid-template-columns: repeat(3, 1fr) !important; }

/* LVEB row of 2 (2 squares) */
.cmedia-lveb-r2 { grid-template-columns: repeat(2, 1fr) !important; }

/* UNIX photos — squares → 3 cols */
.cmedia-unix-photos { grid-template-columns: repeat(3, 1fr) !important; }

/* UNIX videos — 16:9 → 2 cols */
.cmedia-unix-videos { grid-template-columns: repeat(2, 1fr) !important; }

/* Mugler photos — squares → 3 cols */
.cmedia-mugler-photos { grid-template-columns: repeat(3, 1fr) !important; }

/* Wrapper containers — just vertical stack */
.cmedia-lveb,
.cmedia-mugler,
.cmedia-unix {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ── CBODY-BELOW — for carousel projects ── */
.cbody-below {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 2.5rem 40px !important;
}

/* ── CAROUSEL — ccarousel-wrap ── */
.ccarousel-wrap {
  display: grid !important;
  grid-template-columns: 1fr 140px !important;
  grid-template-rows: 1fr !important;
  height: clamp(320px, 52vh, 640px) !important;
  border: 1px solid rgba(13,12,10,.08) !important;
  margin: 0 2rem 2rem !important;
  overflow: hidden !important;
  background: rgba(13,12,10,.02) !important;
}
.ccar-main {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}
.ccar-stage {
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background: rgba(13,12,10,.015) !important;
}
.ccar-stage img,
.ccar-stage video {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
.ccar-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-top: 1px solid rgba(13,12,10,.08) !important;
  flex-shrink: 0 !important;
}
.ccar-arrow {
  font-family: var(--mono) !important;
  font-size: .6rem !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(13,12,10,.5) !important;
  padding: 4px 8px !important;
  transition: color .15s !important;
}
.ccar-arrow:hover { color: var(--v) !important; }
.ccar-nav-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}
.ccar-nav-cnt {
  font-family: var(--mono) !important;
  font-size: .46rem !important;
  letter-spacing: .12em !important;
  color: rgba(13,12,10,.5) !important;
}
.ccar-nav-fmt {
  font-family: var(--mono) !important;
  font-size: .38rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(13,12,10,.3) !important;
}
.ccar-thumbs {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-left: 1px solid rgba(13,12,10,.08) !important;
}
.ccar-thumb {
  flex: 0 0 auto !important;
  width: 140px !important;
  height: 90px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(13,12,10,.06) !important;
  position: relative !important;
  opacity: .55 !important;
  transition: opacity .18s !important;
  background: rgba(13,12,10,.04) !important;
}
.ccar-thumb.active,
.ccar-thumb:hover { opacity: 1 !important; }
.ccar-thumb img,
.ccar-thumb video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none !important;
}
.ccar-thumb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid transparent !important;
  transition: border-color .18s !important;
}
.ccar-thumb.active::after {
  border-color: var(--v) !important;
}

/* Dark mode carousel */
body.dark .ccarousel-wrap {
  background: rgba(232,228,220,.02) !important;
  border-color: rgba(232,228,220,.07) !important;
}
body.dark .ccar-nav { border-top-color: rgba(232,228,220,.07) !important; }
body.dark .ccar-arrow { color: rgba(232,228,220,.4) !important; }
body.dark .ccar-arrow:hover { color: var(--v2) !important; }
body.dark .ccar-thumbs { border-left-color: rgba(232,228,220,.07) !important; }
body.dark .ccar-thumb { background: rgba(232,228,220,.04) !important; border-bottom-color: rgba(232,228,220,.05) !important; }
body.dark .ccar-nav-cnt { color: rgba(232,228,220,.45) !important; }
body.dark .ccar-nav-fmt { color: rgba(232,228,220,.28) !important; }

/* ── DARK MODE CMED ── */
body.dark .cmed { background: rgba(232,228,220,.03) !important; border-color: rgba(232,228,220,.07) !important; }
body.dark .cmed:hover { background: rgba(155,95,232,.07) !important; border-color: rgba(155,95,232,.3) !important; }
body.dark .cmed-icon { color: rgba(232,228,220,.12) !important; }
body.dark .cmed-type { color: rgba(232,228,220,.25) !important; }
body.dark .cmed-hover { background: rgba(155,95,232,.1) !important; }
body.dark .cmed-hover span { color: var(--v2) !important; }


/* ═══════════════════════════════
   FINAL OVERRIDES — cascade garantie
═══════════════════════════════ */

/* ── CASE-H ── */
#case-h {
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 48px 2.5rem 18px !important;
  overflow: hidden !important;
  transition:
    height .45s cubic-bezier(.4,0,.2,1),
    padding .45s cubic-bezier(.4,0,.2,1),
    opacity .3s ease,
    border-color .3s ease !important;
}
#case-h.collapsed {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border-bottom-color: transparent !important;
}

/* ── BOUTON BACK ── */
#cbk, .cbk {
  position: absolute !important;
  top: 14px !important;
  left: 2.5rem !important;
}

/* ── HEADER PROJET — typos ── */
#case-h .cs-ey {
  font-family: var(--mono) !important;
  font-size: .52rem !important;
  letter-spacing: .22em !important;
  color: var(--v) !important;
  margin-bottom: 10px !important;
  display: block !important;
}
#case-h .cs-h1 {
  font-family: var(--cond) !important;
  font-size: clamp(2.4rem, 7vw, 7rem) !important;
  font-weight: 100 !important;
  line-height: .84 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
#case-h .cs-h1 b {
  font-family: var(--cond) !important;
  font-weight: 900 !important;
  color: var(--v) !important;
  display: block !important;
  line-height: .82 !important;
}
.cs-ml {
  font-family: var(--mono) !important;
  font-size: .5rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(13,12,10,.45) !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.cs-mv {
  font-family: var(--mono) !important;
  font-size: .58rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* ── BRIEF TYPOS ── */
.cbt h3 {
  font-family: var(--cond) !important;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem) !important;
  font-weight: 200 !important;
  line-height: 1.0 !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
}
.cbt h3 b {
  font-family: var(--cond) !important;
  font-weight: 800 !important;
  color: var(--v) !important;
}
.cbt p {
  font-family: var(--mono) !important;
  font-size: .58rem !important;
  line-height: 1.9 !important;
  color: rgba(13,12,10,.5) !important;
  max-width: 540px !important;
}
.sc h4 {
  font-family: var(--cond) !important;
  font-size: clamp(1rem, 2vw, 1.6rem) !important;
  font-weight: 300 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}
.sc p {
  font-family: var(--mono) !important;
  font-size: .54rem !important;
  line-height: 1.8 !important;
  color: rgba(13,12,10,.46) !important;
}
.scn {
  font-family: var(--mono) !important;
  font-size: .46rem !important;
  letter-spacing: .18em !important;
  color: var(--v) !important;
  opacity: .65 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* ── GRILLES MÉDIAS — height auto + aspect-ratio ── */
.cmedia-numero .cmed,
.cmedia-3portrait .cmed,
.cmedia-krug .cmed,
.cmedia-lveb-r3 .cmed,
.cmedia-lveb-r2 .cmed,
.cmedia-unix-photos .cmed,
.cmedia-unix-videos .cmed,
.cmedia-mugler-photos .cmed {
  height: auto !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}
.cmedia-numero .cmed        { aspect-ratio: 4/6 !important; }
.cmedia-3portrait .cmed     { aspect-ratio: 4/6 !important; }
.cmedia-krug .cmed          { aspect-ratio: 1/1 !important; }
.cmedia-lveb-r3 .cmed       { aspect-ratio: 1/1 !important; }
.cmedia-lveb-r2 .cmed       { aspect-ratio: 1/1 !important; }
.cmedia-unix-photos .cmed   { aspect-ratio: 1/1 !important; }
.cmedia-unix-videos .cmed   { aspect-ratio: 16/9 !important; }
.cmedia-mugler-photos .cmed { aspect-ratio: 1/1 !important; }

/* ── NAVIGATION PROJET PREV/NEXT ── */
.cnxt {
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  border-top: 1.5px solid rgba(13,12,10,.1) !important;
  margin-top: 16px !important;
  gap: 1px !important;
  background: rgba(13,12,10,.06) !important;
}
.cnxt-spacer {
  flex: 1 !important;
  display: block !important;
  background: var(--cr) !important;
}
/* Card entière = lien de navigation */
.cnxt-card {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  background: var(--cr) !important;
  transition: background .18s !important;
  cursor: none !important;
}
.cnxt-card:hover {
  background: rgba(91,14,175,.03) !important;
}
.cnxt-card--next {
  justify-content: flex-end !important;
}
/* Vignette — pointer-events:none pour ne pas capturer le clic à la place du <a> */
.cnxt-card-thumb {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  background: rgba(13,12,10,.05) !important;
  border: 1px solid rgba(13,12,10,.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: border-color .18s, background .18s !important;
  pointer-events: none !important;
}
.cnxt-card:hover .cnxt-card-thumb {
  border-color: rgba(91,14,175,.4) !important;
  background: rgba(91,14,175,.06) !important;
}
.cnxt-card-icon {
  font-family: var(--mono) !important;
  font-size: 1rem !important;
  color: rgba(13,12,10,.28) !important;
  transition: color .18s !important;
  pointer-events: none !important;
  line-height: 1 !important;
}
.cnxt-card:hover .cnxt-card-icon {
  color: var(--v) !important;
}
/* Texte — pointer-events:none aussi */
.cnxt-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  pointer-events: none !important;
}
.cnxt-card-info--r {
  align-items: flex-end !important;
  text-align: right !important;
}
.cnxt-card-dir {
  font-family: var(--mono) !important;
  font-size: .44rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: rgba(13,12,10,.28) !important;
  display: block !important;
}
.cnxt-card-title {
  font-family: var(--cond) !important;
  font-size: clamp(.85rem, 1.4vw, 1.3rem) !important;
  font-weight: 200 !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color .18s !important;
}
.cnxt-card:hover .cnxt-card-title {
  color: var(--v) !important;
}
@media (max-width: 480px) {
  .cnxt-card { padding: 10px 12px !important; gap: 10px !important; }
  .cnxt-card-thumb { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; }
  .cnxt-card-title { font-size: clamp(.75rem, 4vw, 1rem) !important; }
}

/* ── WORK PREVIEW — pas de double rectangle ── */
.wp-tab { display: none !important; }
.wp-doc { box-shadow: 0 8px 28px rgba(13,12,10,.12) !important; }

/* ═══════════════════════════════
   EDITORIAL GRID VARIANTS — social / campaign
═══════════════════════════════ */

/* All-square — no first-child span override */
.pj-grid--sq .pj-med {
  aspect-ratio: 1/1;
}
.pj-grid--sq .pj-med:first-child {
  grid-column: span 1 !important;
  aspect-ratio: 1/1 !important;
}

/* Editorial — hero 8:5 + portrait 4:5, 3 cols */
/* Row 1: [──hero span-2 (8:5)──][portrait (4:5)]  Row 2+: equal 4:5 */
.pj-grid--editorial .pj-med {
  aspect-ratio: 4/5;
}
.pj-grid--editorial .pj-med:first-child {
  grid-column: span 2 !important;
  aspect-ratio: 8/5 !important;
}

/* Campaign wide — 2 cols, first row full-width 16:9 */
.pj-grid--wide {
  grid-template-columns: repeat(2, 1fr) !important;
}
.pj-grid--wide .pj-med {
  aspect-ratio: 4/3;
}
.pj-grid--wide .pj-med:first-child {
  grid-column: span 2 !important;
  aspect-ratio: 16/9 !important;
}

/* Hero duo — 2 cols, first-child 16:9 hero full-width, children keep native aspect.
   Double-class chaining (.pj-grid.pj-grid--hero-duo) raises specificity to 0,2,0 so it
   beats page-embedded @media overrides that declare .pj-grid (0,1,0) with !important. */
.pj-grid.pj-grid--hero-duo {
  grid-template-columns: repeat(2, 1fr) !important;
}
.pj-grid.pj-grid--hero-duo .pj-med:first-child {
  grid-column: span 2 !important;
  aspect-ratio: 16/9 !important;
}

/* Solo — single centered tile, max-width cap for breathing room */
.pj-grid.pj-grid--solo {
  grid-template-columns: 1fr !important;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.pj-grid.pj-grid--solo .pj-med {
  grid-column: 1 !important;
}
.pj-grid.pj-grid--solo .pj-med:first-child {
  grid-column: 1 !important;
  aspect-ratio: 16/9 !important;
}

/* ═══════════════════════════════
   EDITORIAL CHAPTER — narrative spacers between grids
═══════════════════════════════ */
.pj-chap {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 20px;
  align-items: baseline;
  padding: 3.2rem 0 1rem;
  border-top: 1px solid rgba(13,12,10,.08);
  margin-top: 1.8rem;
}
.pj-chap:first-of-type {
  border-top: none;
  padding-top: .6rem;
  margin-top: .2rem;
}
.pj-chap-num {
  font-family: var(--mono);
  font-size: .46rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v);
  padding-top: .45rem;
  grid-row: span 2;
  align-self: start;
}
.pj-chap-ttl {
  font-family: var(--cond);
  font-weight: 200;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.pj-chap-sub {
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(13,12,10,.42);
  margin: .45rem 0 0;
  line-height: 1.4;
}
body.dark .pj-chap { border-top-color: rgba(232,228,220,.08); }
body.dark .pj-chap-num { color: var(--v2); }
body.dark .pj-chap-ttl { color: rgba(245,242,236,.92); }
body.dark .pj-chap-sub { color: rgba(245,242,236,.42); }

/* Pullquote — typographic breather between chapters */
.pj-pull {
  margin: 3rem 0 1.2rem;
  padding: 1.8rem 0 1.8rem 1.4rem;
  border-left: 2px solid var(--v);
  max-width: 780px;
}
.pj-pull-txt {
  font-family: var(--cond);
  font-weight: 200;
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 .7rem;
}
.pj-pull-src {
  font-family: var(--mono);
  font-size: .44rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(13,12,10,.38);
}
body.dark .pj-pull-txt { color: rgba(245,242,236,.9); }
body.dark .pj-pull-src { color: rgba(245,242,236,.4); }
body.dark .pj-pull { border-left-color: var(--v2); }

@media (max-width: 768px) {
  .pj-chap { grid-template-columns: 60px 1fr; gap: 0 14px; padding: 2.2rem 0 .8rem; }
  .pj-chap-num { font-size: .42rem; padding-top: .3rem; }
  .pj-chap-ttl { font-size: clamp(1.1rem, 5vw, 1.5rem); }
  .pj-chap-sub { font-size: .48rem; }
  .pj-pull { margin: 2rem 0 .8rem; padding: 1.2rem 0 1.2rem 1rem; }
  .pj-pull-txt { font-size: clamp(1rem, 5vw, 1.3rem); }
}
@media (max-width: 480px) {
  .pj-chap { grid-template-columns: 1fr; gap: 4px; }
  .pj-chap-num { grid-row: auto; padding-top: 0; }
}

/* Format tag — platform context badge on images */
.pj-med-fmt {
  position: absolute;
  top: .55rem; left: .55rem;
  font-family: var(--mono);
  font-size: .36rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,242,236,.75);
  background: rgba(13,12,10,.38);
  padding: .18rem .42rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
  border: 1px solid rgba(245,242,236,.08);
}
body.dark .pj-med-fmt {
  background: rgba(13,12,10,.5);
  color: rgba(245,242,236,.6);
}

/* Responsive overrides for new variants */
@media (max-width: 900px) {
  .pj-grid--editorial { grid-template-columns: repeat(2, 1fr) !important; }
  .pj-grid--editorial .pj-med { aspect-ratio: 4/5; }
  .pj-grid--editorial .pj-med:first-child { grid-column: span 2 !important; aspect-ratio: 8/5 !important; }
  .pj-grid--sq { grid-template-columns: repeat(2, 1fr) !important; }
  .pj-grid.pj-grid--hero-duo { grid-template-columns: repeat(2, 1fr) !important; }
  .pj-grid.pj-grid--hero-duo .pj-med:first-child { aspect-ratio: 16/9 !important; }
  .pj-grid.pj-grid--solo { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .pj-grid--editorial { grid-template-columns: 1fr !important; }
  .pj-grid--editorial .pj-med { aspect-ratio: 4/5; }
  .pj-grid--editorial .pj-med:first-child { grid-column: span 1 !important; aspect-ratio: 4/5 !important; }
  .pj-grid--sq { grid-template-columns: 1fr 1fr !important; }
  .pj-grid--sq .pj-med:first-child { grid-column: span 1 !important; }
  .pj-grid--wide .pj-med:first-child { grid-column: span 2 !important; aspect-ratio: 4/3 !important; }
  .pj-grid.pj-grid--hero-duo { grid-template-columns: 1fr !important; }
  .pj-grid.pj-grid--hero-duo .pj-med:first-child { grid-column: span 1 !important; aspect-ratio: 16/9 !important; }
  .pj-grid.pj-grid--solo { grid-template-columns: 1fr !important; }
  .pj-grid.pj-grid--solo .pj-med:first-child { aspect-ratio: 4/3 !important; }
}

/* ════ RESPONSIVE ════ */
@media (max-width: 900px) {
  #case-h .cs-h1 { font-size: clamp(2rem, 8vw, 5rem) !important; }
  .sgrid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
  #case-h {
    padding: 48px 1.4rem 16px !important;
  }
  #cbk, .cbk { top: 12px !important; left: 1.4rem !important; }
  #case-h .cs-ey { font-size: .48rem !important; }
  #case-h .cs-h1 { font-size: clamp(1.8rem, 7vw, 4rem) !important; margin-bottom: 12px !important; }
  .cs-meta { grid-template-columns: 1fr 1fr !important; gap: 8px 0 !important; padding-top: 10px !important; }
  .cbody { padding: 16px 1.4rem 20px !important; }
  .cbody-below { padding: 16px 1.4rem 28px !important; }
  .cbrief { grid-template-columns: 1fr !important; gap: 8px !important; }
  .sgrid { grid-template-columns: 1fr 1fr !important; }
  .sc { border-right: none !important; border-bottom: 1px solid rgba(13,12,10,.08) !important; padding-bottom: 12px !important; }
  /* Grilles — colonnes */
  .cmedia-unix-videos { grid-template-columns: 1fr !important; }
  .cmedia-unix-photos { grid-template-columns: 1fr 1fr !important; }
  .cmedia-krug { grid-template-columns: 1fr 1fr !important; }
  .cmedia-lveb-r3 { grid-template-columns: 1fr 1fr !important; }
  .cmedia-lveb-r2 { grid-template-columns: 1fr 1fr !important; }
  .cmedia-numero { grid-template-columns: 1fr 1fr !important; }
  .cmedia-3portrait { grid-template-columns: repeat(3,1fr) !important; }
  .cmedia-mugler-photos { grid-template-columns: 1fr 1fr !important; }
  /* Grilles — padding mobile */
  .cmedia-numero,.cmedia-3portrait,.cmedia-krug,
  .cmedia-lveb-r3,.cmedia-lveb-r2,.cmedia-unix-photos,
  .cmedia-unix-videos,.cmedia-mugler-photos {
    padding: 0 1.4rem 1.4rem !important;
    gap: 2px !important;
  }
  .cmedia-lveb,.cmedia-mugler,.cmedia-unix { gap: 8px !important; }
  /* Carousel mobile */
  .ccarousel-wrap { margin: 0 1.4rem 1.4rem !important; }
  /* Carrousel 768px — vignettes en bas */
  .cbody-carousel>.cmedia {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: clamp(240px, 45vw, 360px) !important;
    margin: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .ccarousel-wrap { grid-template-columns: 1fr !important; grid-template-rows: 1fr 52px !important; }
  .ccar-thumbs { width: 100% !important; height: 52px !important; flex-direction: row !important; overflow-x: auto; overflow-y: hidden; border-left: none !important; border-top: 1px solid var(--rule2) !important; }
  .ccar-thumb { width: 48px !important; height: 52px !important; flex: 0 0 48px !important; border-bottom: none; border-right: 1px solid var(--rule) !important; }
  .ccar-stage { padding: 8px !important; }

}

@media (max-width: 480px) {
  #case-h {
    padding: 46px 1rem 14px !important;
  }
  #cbk, .cbk { top: 10px !important; left: 1rem !important; }
  #case-h .cs-h1 { font-size: clamp(1.5rem, 9vw, 3rem) !important; line-height: .86 !important; }
  .cs-meta { grid-template-columns: 1fr 1fr !important; }
  .cbody { padding: 12px 1rem 16px !important; }
  .cbody-below { padding: 12px 1rem 24px !important; }
  .sgrid { grid-template-columns: 1fr !important; }
  .cmedia-krug { grid-template-columns: 1fr 1fr !important; }
  .cmedia-3portrait { grid-template-columns: repeat(3,1fr) !important; }
  .cmedia-lveb-r3 { grid-template-columns: repeat(3,1fr) !important; }
  .cmedia-lveb-r2 { grid-template-columns: 1fr 1fr !important; }
  .cmedia-mugler-photos { grid-template-columns: 1fr 1fr !important; }
  .cmedia-numero,.cmedia-3portrait,.cmedia-krug,
  .cmedia-lveb-r3,.cmedia-lveb-r2,.cmedia-unix-photos,
  .cmedia-unix-videos,.cmedia-mugler-photos {
    padding: 0 1rem 1rem !important;
  }
  .ccarousel-wrap { margin: 0 1rem 1rem !important; height: clamp(260px, 48vh, 440px) !important; }
  .cbt h3 { font-size: clamp(1.3rem, 8vw, 2.4rem) !important; }

}

/* ═══════════════════════════════
   ULTRA SMALL — 420px (iPhone SE, Galaxy S)
═══════════════════════════════ */
@media (max-width: 420px) {
  #case-h {
    padding: 44px 0.8rem 12px !important;
  }
  #cbk, .cbk { top: 8px !important; left: 0.8rem !important; font-size: .46rem !important; }
  #case-h .cs-ey { font-size: .44rem !important; }
  #case-h .cs-h1 { font-size: clamp(1.3rem, 8vw, 2.4rem) !important; }
  .cs-ml { font-size: .44rem !important; }
  .cs-mv { font-size: .52rem !important; }
  .cs-meta { grid-template-columns: 1fr !important; gap: 6px !important; }
  .cbody { padding: 10px 0.8rem 14px !important; }
  .cbody-below { padding: 10px 0.8rem 20px !important; }
  .cbt p { font-size: .52rem !important; }
  .sc p { font-size: .48rem !important; }
  .scn { font-size: .42rem !important; }
  .cnxt-card { padding: 8px 10px !important; gap: 8px !important; }
  .cnxt-card-thumb { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; }
  .cnxt-card-dir { font-size: .4rem !important; }
  .cnxt-card-title { font-size: clamp(.7rem, 3.5vw, .9rem) !important; }
  /* Media grids — ultra small */
  .cmedia-numero { grid-template-columns: 1fr 1fr !important; }
  .cmedia-3portrait { grid-template-columns: 1fr 1fr 1fr !important; }
  .cmedia-numero,.cmedia-3portrait,.cmedia-krug,
  .cmedia-lveb-r3,.cmedia-lveb-r2,.cmedia-unix-photos,
  .cmedia-unix-videos,.cmedia-mugler-photos {
    padding: 0 0.8rem 0.8rem !important;
    gap: 1px !important;
  }
  .ccarousel-wrap { margin: 0 0.8rem 0.8rem !important; height: clamp(220px, 42vh, 380px) !important; }
}

/* ═══════════════════════════════
   SOCIAL-MEDIA EDITORIAL VOCABULARY
   Additive — no overrides of existing pj-* rules
═══════════════════════════════ */

/* Sequence counter — bottom-right of each .pj-med inside a chapter grid */
.pj-med .pj-seq-num {
  position: absolute;
  bottom: .55rem;
  right: .55rem;
  font-family: var(--mono);
  font-size: .38rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245,242,236,.72);
  background: rgba(13,12,10,.38);
  padding: .18rem .42rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
  border: 1px solid rgba(245,242,236,.08);
  transition: opacity .2s;
}
.pj-med:hover .pj-seq-num { opacity: .45; }
body.dark .pj-med .pj-seq-num {
  background: rgba(13,12,10,.5);
  color: rgba(245,242,236,.58);
}

/* Hero intent badge — funnel / purpose signal in hero meta */
.pj-hero-intent {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,242,236,.85);
  background: rgba(91,14,175,.34);
  padding: .3rem .65rem;
  border: 1px solid rgba(192,132,252,.4);
  border-radius: 2px;
}
.pj-hero-intent::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v3);
  box-shadow: 0 0 6px rgba(192,132,252,.8);
}

/* Chapter numbering — tighter social-native shorthand (01/02/03) */
.pj-chap-num {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .pj-med .pj-seq-num { font-size: .34rem; padding: .14rem .34rem; }
  .pj-hero-intent { font-size: .48rem; padding: .24rem .5rem; }
}


/* ═══════════════════════════════
   CAMP-ACT — Editorial chapter system
   Usage: project-lancome-veb.html + all campaign static pages
═══════════════════════════════ */

/* ── ACT HEADER — roman numeral + horizontal rule ── */
.camp-act {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 20px;
  align-items: start;
  padding: 3rem 0 1.2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
}
.camp-act:first-of-type {
  border-top: none;
  padding-top: .8rem;
  margin-top: 0;
}
.camp-act-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: .3rem;
}
.camp-act-num {
  font-family: var(--mono);
  font-size: .46rem;
  letter-spacing: .2em;
  color: var(--v);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  opacity: .7;
}
.camp-act-rule {
  display: block;
  width: 1px;
  flex: 1;
  min-height: 32px;
  background: linear-gradient(to bottom, var(--v), transparent);
  opacity: .3;
}
.camp-act-body {
  padding-top: .1rem;
}
.camp-act-title {
  font-family: var(--cond);
  font-weight: 200;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .5rem;
}
body.dark .camp-act-title { color: rgba(245,242,236,.9); }
.camp-act-sub {
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .1em;
  color: rgba(13,12,10,.42);
  margin: 0;
  line-height: 1.5;
}
body.dark .camp-act-sub { color: rgba(245,242,236,.4); }

/* ── CAMP-SECTION — wrapper for image grids ── */
.camp-section {
  margin-bottom: 2.4rem;
}

/* ── CAMP-EDITORIAL — diptych / triptych grids ── */
.camp-editorial {
  display: grid;
  gap: 4px;
}
.camp-editorial--diptych {
  grid-template-columns: repeat(2, 1fr);
}
.camp-editorial--triptych {
  grid-template-columns: repeat(3, 1fr);
}

/* ── CAMP-CELL — individual image tile ── */
.camp-cell {
  position: relative;
  overflow: hidden;
  background: rgba(13,12,10,.04);
  cursor: zoom-in;
  aspect-ratio: 4/5;
}
body.dark .camp-cell { background: rgba(232,228,220,.04); }

.camp-cell img,
.camp-editorial .camp-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.22,1,.36,1), filter .35s cubic-bezier(.22,1,.36,1);
}
.camp-cell:hover img {
  transform: scale(1.04);
  filter: brightness(.9);
}

/* Diptych: wider aspect ratio (landscape feel) */
.camp-editorial--diptych .camp-cell {
  aspect-ratio: 3/4;
}

/* ── CAMP-NOTES-TRIO — ingredient notes with labels ── */
.camp-notes-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.camp-note {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.camp-note-img {
  aspect-ratio: 3/4;
}
.camp-note-label {
  font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v);
  text-align: center;
  padding: .7rem 0 .4rem;
  opacity: .75;
}
body.dark .camp-note-label { color: var(--v2); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .camp-act {
    grid-template-columns: 40px 1fr;
    gap: 0 14px;
    padding: 2rem 0 1rem;
  }
  .camp-act-title { font-size: clamp(1.1rem, 5vw, 1.5rem); }
  .camp-act-num { font-size: .42rem; }
  .camp-editorial--triptych { grid-template-columns: repeat(2, 1fr); }
  .camp-notes-trio { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .camp-act { grid-template-columns: 1fr; }
  .camp-act-rail { flex-direction: row; writing-mode: initial; }
  .camp-act-num { writing-mode: initial; transform: none; font-size: .4rem; }
  .camp-act-rule { width: 32px; height: 1px; min-height: 0; flex: 0; background: linear-gradient(to right, var(--v), transparent); }
  .camp-act-body { padding-top: .6rem; }
  .camp-editorial--diptych { grid-template-columns: repeat(2, 1fr); }
  .camp-editorial--triptych { grid-template-columns: repeat(2, 1fr); }
  .camp-notes-trio { grid-template-columns: repeat(3, 1fr); }
  .camp-cell { aspect-ratio: 1/1; }
  .camp-editorial--diptych .camp-cell { aspect-ratio: 1/1; }
}