/* ══════════════════════════════════════════════════════
   NH.CSS — Design system unifié
   Nils Hiestand portfolio — nilshiestand.com
   nh-core.css + nh-system.css → fusionnés & dédupliqués
   ══════════════════════════════════════════════════════ */

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100vh;
  background: #F5F5F3;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #111110;
  overflow: hidden;
}

/* ══ VARIABLES ══ */
:root {
  --gap:              48px;
  --gap-sm:           24px;
  --gap-xl:           48px;
  --inset-m:          24px;
  --space-s:          24px;
  --space-m:          48px;
  --space-l:          72px;
  --slider-h:         320px;
  --slider-gap:       6px;
  --nh-unit:          60px;
  --rule-thick:       10px;
  --caption-block-w:  320px;
}

/* ══ LAYOUT 3 COLONNES ══ */
.page {
  position: absolute;
  top: 20px; bottom: 20px; left: 20px; right: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
}

/* ── Colonne gauche : logo + nav ── */
.col-left {
  flex-shrink: 0;
  flex-grow: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 100;
  overflow: visible;
}

.logo {
  font-weight: 900;
  font-size: 92px;
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: #111110;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: -6px;
}

nav.desktop-nav {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

nav.desktop-nav > a,
nav.desktop-nav > .nav-work-wrap {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111110;
  text-decoration: none;
  line-height: 2;
  padding: 0; margin: 0;
  cursor: pointer;
  white-space: nowrap;
  display: block;
  position: relative;
}
nav.desktop-nav > a:hover { opacity: 0.5; }
nav.desktop-nav > a.current { opacity: 0.35; }

.nav-work-wrap { position: relative; }

.nav-work-label {
  display: block;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111110;
  line-height: 2;
  cursor: pointer;
}

.nav-panel-1 {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 16px);
  background: #fff;
  min-width: 200px;
  z-index: 300;
  border-left: 0.5px solid rgba(17,17,16,0.12);
  padding: 0 0 0 14px;
}
.nav-panel-1.open { display: block; animation: fadeIn 0.15s ease; }

.nav-cat-item {
  display: block;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111110;
  line-height: 1;
  padding: 6px 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav-cat-item:hover,
.nav-cat-item.active { opacity: 0.5; }

.nav-panel-2 {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 16px);
  background: #fff;
  min-width: 200px;
  z-index: 400;
  border-left: 0.5px solid rgba(17,17,16,0.12);
  padding: 0 0 0 14px;
}
.nav-panel-2.open { display: block; animation: fadeIn 0.15s ease; }

.nav-sub-link {
  display: block;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(17,17,16,0.5);
  text-decoration: none;
  line-height: 1;
  padding: 5px 0;
  white-space: nowrap;
}
.nav-sub-link.current { color: #111110; font-weight: 700; }
.nav-sub-link:hover   { color: #111110; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Colonne centre ── */
.col-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.col-center::-webkit-scrollbar { display: none; }
.col-center img { max-width: 100%; height: auto; display: block; }

/* Cache blanc haut/bas (effet marie-louise au scroll) */
.col-center::before,
.col-center::after {
  content: '';
  position: sticky;
  display: block;
  height: 8px;
  background: #F5F5F3;
  flex-shrink: 0;
  z-index: 2;
  pointer-events: none;
}
.col-center::before { top: 0;    margin-bottom: -8px; }
.col-center::after  { bottom: 0; margin-top: -8px; }

/* ── Colonne droite : nom vertical ── */
.col-right {
  flex-shrink: 0;
  flex-grow: 0;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  height: 100%;
}

.vert-name {
  font-weight: 900;
  font-size: 10px;
  letter-spacing: -0.025em;
  color: #111110;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  writing-mode: vertical-lr;
}

/* ── Mobile nav (masquée par défaut) ── */
.mobile-nav { display: none; }

/* ══ SPACER & SECTION INTRO ══ */
.spacer  { height: calc(92px * 0.86 + 5px); flex-shrink: 0; }
.s-intro { padding: 72px 0 48px; }

/* Padding intro calé sous le dernier lien nav */
.s-intro.mod-intro-page { padding: calc(92px * 0.86 + 85px) 0 0; }
.mod-intro-page .t-micro  { margin-bottom: 7px; }
.mod-intro-page .t-label,
.mod-intro-page .t-intro-page { margin-bottom: 3px; }

/* ══ TYPOGRAPHIE ══ */
.t-micro {
  display: block;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17,17,16,0.28);
}

.t-intro-page,
.t-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(17,17,16,0.60);
}

.t-label-sm {
  display: block;
  font-size: 9px;
  line-height: 1.50;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(17,17,16,0.60);
}

.t-body {
  font-size: 11px;
  line-height: 1.50;
  font-weight: 300;
  color: rgba(17,17,16,0.55);
  max-width: 310px;
  overflow-wrap: break-word;
}

.t-title,
.t-headline,
.t-section-title {
  font-size: clamp(27px, 3.6vw, 57px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #111110;
}

.t-title-right,
.t-headline-right,
.t-section-title-right { text-align: right; }

.t-italic { font-style: italic; font-weight: 300; }

.t-mixed-soft {
  font-size: clamp(26px, 3.6vw, 48px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #111110;
}

.t-mixed-bold {
  font-size: clamp(26px, 3.6vw, 48px);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #111110;
}

/* TYPE B : ligne titre mixte inline (italic léger + bold net) */
.t-mixed-line {
  font-size: clamp(26px, 3.6vw, 48px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #111110;
  white-space: nowrap;
}
.t-mixed-line strong {
  font-weight: 500;
  font-style: normal;
}

.t-caption {
  font-size: 11px;
  line-height: 1.50;
  font-weight: 300;
  color: rgba(17,17,16,0.60);
}

.t-credits,
.t-micro-credit {
  display: block;
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(17,17,16,0.28);
  line-height: 1.6;
}

/* ══ RÈGLES & SÉPARATEURS ══ */
hr.rule {
  display: block;
  flex-shrink: 0;
  border: none;
  border-top: var(--rule-thick) solid #111110;
}
hr.rule-main { width: 66.666%; margin: 48px 0 20px auto; }
hr.rule-sub  { width: var(--nh-unit); margin-top: 20px; }

hr.end-rule {
  border: none;
  border-top: var(--rule-thick) solid #111110;
  width: var(--nh-unit);
  margin: var(--gap) 0 var(--gap) 0;
  flex-shrink: 0;
  display: block;
}

hr.brand-rule {
  border: none;
  border-top: var(--rule-thick) solid #111110;
  width: 66.666%;
  margin: var(--gap) 0 var(--gap) auto;
  flex-shrink: 0;
  display: block;
}

.nh-rule {
  display: block;
  border: none;
  border-top: var(--rule-thick) solid #111110;
  flex-shrink: 0;
  margin-top: 20px;
  width: var(--nh-unit);
}
.nh-rule--right  { margin-left: auto; }
.nh-rule--left   { margin-right: auto; }
.nh-rule--center { margin-left: auto; margin-right: auto; margin-bottom: var(--gap); }

/* Title block : shrinks to text width, rule inside = 100% text width */
.nh-title-block {
  display: flex;
  flex-direction: column;
  width: fit-content;
}
.nh-title-block--left   { margin-right: auto; }
.nh-title-block--right  { margin-left: auto; }
.nh-title-block--center { margin-left: auto; margin-right: auto; }

/* ══ ESPACEMENT ══ */
.space-0 { height: 0; flex-shrink: 0; }
.space-s { height: var(--space-s); flex-shrink: 0; }
.space-m { height: var(--space-m); flex-shrink: 0; }
.space-l { height: var(--space-l); flex-shrink: 0; }
.sp-s    { margin-bottom: var(--space-s); }
.sp-m    { margin-bottom: var(--space-m); }
.sp-l    { margin-bottom: var(--space-l); }

/* ══ BRAND ATOMS ══ */
.brand-block  { margin-bottom: 80px; }
.brand-header { text-align: right; margin-bottom: var(--gap); }
.brand-name   { font-weight: 900; font-size: clamp(28px, 4vw, 52px); letter-spacing: -0.025em; line-height: 0.88; text-transform: uppercase; }
.brand-hero   { width: 100%; background: #111110; overflow: hidden; }
.brand-hero img { width: 100%; display: block; object-fit: cover; }

.brand-text        { font-size: 11px; line-height: 1.65; color: rgba(17,17,16,0.6); font-weight: 300; }
.brand-text em     { font-style: italic; }
.brand-credits     { font-size: 8px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(17,17,16,0.28); line-height: 2.1; margin-top: 10px; }
.brand-label       { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #111110; margin-bottom: 6px; }
.brand-caption     { display: flex; flex-direction: column; gap: 8px; }
.brand-caption-bottom { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }

.lp-credits {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,17,16,0.28);
  line-height: 2.2;
  margin-top: 8px;
}

/* ══ CAPTION WRAPPERS ══ */
.caption-left    { text-align: left; max-width: 360px; }
.caption-right   { text-align: right; max-width: 320px; margin-left: auto; }
.cap-row         { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-sm); }
.cap-left        { max-width: 360px; }
.cap-right       { text-align: right; flex-shrink: 0; max-width: 280px; }
.cap-right-only  { text-align: right; max-width: 320px; margin-left: auto; }

.mod-cap         { width: var(--caption-block-w); padding-top: 14px; margin: 0; }
.mod-cap .t-label-sm { margin-bottom: 6px; }
.mod-cap-left    { text-align: left; }
.mod-cap-right   { text-align: right; }
.mod-cap-cg      { margin-left: 0; }
.mod-cap-cg25    { margin-left: 25%; }
.mod-cap-cg33    { margin-left: 33.3333%; }
.mod-cap-cg50    { margin-left: 50%; }
.mod-cap-cg66    { margin-left: 66.6666%; }
.mod-cap-cd      { margin-left: auto; margin-right: 0; }
.mod-cap-cd25    { margin-left: auto; margin-right: 25%; }
.mod-cap-cd33    { margin-left: auto; margin-right: 33.3333%; }
.mod-cap-cd50    { margin-left: auto; margin-right: 50%; }
.mod-cap-cd66    { margin-left: auto; margin-right: 66.6666%; }

/* ══ GRILLES GÉNÉRIQUES ══ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; width: 100%; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; }
.grid-2-6040 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gap); align-items: start; }
.grid-2-4060 { display: grid; grid-template-columns: 2fr 3fr; gap: var(--gap); align-items: start; }
.grid-2x2    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3-spaced { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }

.grid-4 video, .grid-3 video, .grid-2 video { width: 100%; display: block; }
.grid-4 img,   .grid-3 img,   .grid-2 img   { width: 100%; display: block; object-fit: cover; }

/* ══ MODULES MEDIA ══ */
/* Ratios utilitaires */
.ph-4x5, .img-4x5   { aspect-ratio: 4/5;   width: 100%; }
.ph-sq,  .img-1x1   { aspect-ratio: 1/1;   width: 100%; }
.ph-wide,.img-16x9  { aspect-ratio: 16/9;  width: 100%; }
.ph-thumb,.img-3x2  { aspect-ratio: 3/2;   width: 100%; }
.ph-port, .img-3x4  { aspect-ratio: 3/4;   width: 100%; }

/* Conteneur vidéo dimensionné */
.video-916 { aspect-ratio: 9/16;  overflow: hidden; position: relative; }
.video-169 { aspect-ratio: 16/9;  overflow: hidden; position: relative; }
.video-sq  { aspect-ratio: 1/1;   overflow: hidden; position: relative; }
.video-916 video, .video-169 video, .video-sq video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* media-frame : conteneur générique avec fallback */
.media-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #EDECE8;
}
.media-frame.media-169    { aspect-ratio: 16/9; }
.media-frame.media-916    { aspect-ratio: 9/16; }
.media-frame.media-square { aspect-ratio: 1/1; }
.media-frame.media-45     { aspect-ratio: 4/5; }
.media-frame img.media-item  { width: 100%; height: auto; display: block; }
.media-frame video.media-item { width: 100%; height: 100%; object-fit: contain; display: block; }

/* media (Campaign) */
.media { position: relative; width: 100%; overflow: hidden; background: #f3f2ef; }
.media.square    { aspect-ratio: 1/1; }
.media.landscape { aspect-ratio: 16/9; }
.media.portrait  { aspect-ratio: 9/16; }
.media img, .media video {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center; background: #f3f2ef;
}

/* Fallback overlay — invisible par défaut, jamais de trame */
.media-fallback, .fallback {
  display: none;
}

/* media-16x9 (brand-vision) */
.media-16x9 { aspect-ratio: 16/9; width: 100%; overflow: hidden; background: #111110; }
.media-16x9 img, .media-16x9 video {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #111110;
}

/* ══ VIDEO COVER (click-to-play) ══ */
.mc3-cover-wrap { position: relative; width: 100%; cursor: pointer; background: #000; }
.mc3-cover-img  { width: 100%; display: block; object-fit: cover; position: relative; z-index: 1; }
.mc3-video-overlay {
  position: absolute; inset: 0; background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease; z-index: 2; overflow: hidden;
}
.mc3-video-overlay video {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: calc(100% * 1080/787);
  transform: translate(-50%,-50%);
  object-fit: contain; background: #000;
}
.mc3-video-overlay.playing { opacity: 1; pointer-events: auto; }
.mc3-play-overlay {
  position: absolute; bottom: var(--gap); left: 0; right: 0;
  display: flex; justify-content: center;
  transition: opacity 0.3s ease; z-index: 3;
}
.mc3-play-overlay.hidden { opacity: 0; pointer-events: none; }
.mc3-play-btn {
  font-size: 8px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.6); cursor: pointer;
  transition: color 0.2s;
}
.mc3-play-btn:hover { color: #fff; }

/* ══ WIDESCREEN VIDEO WRAP ══ */
.mc3-video-wrap,
.pj-video-wrap { aspect-ratio: 1920/810; width: 100%; overflow: hidden; position: relative; background: #F5F5F3; }
.mc3-video-wrap video { position: absolute; top: 50%; left: 50%; width: 100%; height: calc(100% * 1080/810); transform: translate(-50%,-50%); object-fit: fill; }
.pj-video-wrap  video { position: absolute; top: 50%; left: 50%; width: 100%; height: calc(100% * 1080/782); transform: translate(-50%,-50%); object-fit: fill; }

/* ══ SLIDESHOW ══ */
.slideshow      { position: relative; margin-top: var(--gap); width: calc(62.5% - 6px); }
.slide          { display: none; }
.slide.active   { display: block; }
.slide img      { width: 100%; display: block; object-fit: cover; }
.slideshow-nav  { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0; }
.s-arrows       { display: flex; gap: 24px; }
.s-arrow        { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17,17,16,0.35); cursor: pointer; transition: color 0.2s; user-select: none; }
.s-arrow:hover  { color: #111110; }
.s-count        { font-size: 9px; letter-spacing: 0.1em; color: rgba(17,17,16,0.25); }

/* LP slideshow */
.lp-slideshow           { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-top: 0; }
.lp-slideshow .slide    { height: 100%; }
.lp-slideshow .slide img{ width: 100%; height: 100%; object-fit: contain; }
.lp-caption             { margin-top: var(--gap); display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--gap); }
.lp-text-col            { max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.lp-credits-col         { flex-shrink: 0; text-align: right; }

/* MC3 slideshow */
.mc3-text-slide-row     { margin-top: var(--gap); display: flex; flex-direction: row; align-items: flex-end; gap: var(--gap); }
.mc3-caption            { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.mc3-caption .brand-credits { margin-top: 0; }
.mc3-slideshow-wrap     { width: 60%; flex-shrink: 0; }
.mc3-slideshow          { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.mc3-slideshow .slide   { height: 100%; }
.mc3-slideshow .slide img { width: 100%; height: 100%; object-fit: cover; }
.mc3-text { font-size: 11px; line-height: 1.8; color: rgba(17,17,16,0.6); font-weight: 300; }

/* ══ COMPOSANTS LAYOUT ══ */
/* 4-col brand grid */
.brand-cols4     { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); margin-top: var(--gap); align-items: end; }
.brand-col-text  { display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; }
.brand-col-gif   { background: #EDECE8; overflow: hidden; }
.brand-col-gif img { width: 100%; display: block; object-fit: contain; }

/* Krug image + texte */
.krug-sp-wrap    { margin-top: var(--gap); display: flex; flex-direction: row; align-items: stretch; gap: var(--gap); }
.krug-sp-img     { width: 37.5%; flex-shrink: 0; }
.krug-sp-img img { width: 100%; display: block; object-fit: contain; }
.krug-sp-text    { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* Routin caption row */
.routin-caption               { margin-top: calc(var(--gap)*0.4); display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--gap); }
.routin-caption .brand-text   { max-width: 340px; }
.routin-caption .brand-credits{ text-align: right; flex-shrink: 0; }

/* Duo/grid/mood */
.mc3-duo           { margin-top: var(--gap); display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mc3-duo-img img   { width: 100%; display: block; object-fit: cover; }
.mc3-grid3         { margin-top: var(--gap); display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); width: 60%; margin-left: auto; margin-right: auto; }
.mc3-grid3 img     { width: 100%; display: block; object-fit: cover; }
.mc3-mood-wrap     { margin-top: var(--gap); width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.mc3-mood-wrap img { width: 100%; display: block; object-fit: cover; }
.mc3-mood-center   { grid-column: 2; grid-row: 1; }

/* Trio */
.mc3-trio      { margin-top: var(--gap); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; align-items: center; }
.mc3-trio-text { text-align: center; padding: 0 var(--gap); }
.mc3-trio-text p { font-weight: 300; font-style: italic; font-size: clamp(14px,1.8vw,28px); letter-spacing: -0.02em; line-height: 0.9; text-transform: uppercase; color: #111110; }

/* Rose block */
.rose-block  { margin-top: var(--gap); display: flex; flex-direction: row; align-items: flex-end; width: 100%; }
.rose-text   { flex-shrink: 0; width: 62.5%; text-align: right; margin-right: -0.18em; position: relative; z-index: 1; }
.rose-text p { font-weight: 300; font-style: italic; font-size: clamp(28px,4vw,52px); letter-spacing: -0.025em; line-height: 0.88; text-transform: uppercase; color: #111110; }
.rose-img    { width: 37.5%; flex-shrink: 0; background: #EDECE8; }
.rose-img img{ width: 100%; display: block; object-fit: contain; }

/* PJ key visual */
.pj-kv-wrap    { width: 100%; background: #000; display: flex; flex-direction: row; align-items: flex-end; }
.pj-kv-text    { width: 25%; flex-shrink: 0; padding: var(--gap); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.pj-kv-img-wrap{ width: 85%; flex-shrink: 0; margin-left: -10%; }
.pj-kv-img     { width: 100%; height: auto; display: block; }
.pj-label      { color: #fff; }
.pj-text       { font-size: 11px; line-height: 1.8; color: rgba(255,255,255,0.85); font-weight: 300; }
.pj-credits    { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); line-height: 2.2; }

/* Typographic phrase */
.brand-typo-wrap                              { padding: var(--gap) 0; display: flex; }
.brand-typo-wrap.brand-typo-left              { justify-content: flex-start; }
.brand-typo-wrap.brand-typo-center            { justify-content: center; }
.brand-typo-wrap.brand-typo-right             { justify-content: flex-end; }
.brand-typo-text                              { width: 62.5%; }
.brand-typo-wrap.brand-typo-left   .brand-typo-text { text-align: left; }
.brand-typo-wrap.brand-typo-center .brand-typo-text { text-align: center; }
.brand-typo-wrap.brand-typo-right  .brand-typo-text { text-align: right; }
.brand-typo-text p,
.brand-typo-wrap > p { font-weight: 300; font-style: italic; font-size: clamp(28px,4vw,52px); letter-spacing: -0.025em; line-height: 0.88; text-transform: uppercase; color: #111110; }
.brand-typo-wrap--center { justify-content: center; }

/* Quote block */
.quote-block { width: 62.5%; margin-left: auto; margin-right: auto; padding: 16px 0 8px; }
.quote-block p { font-weight: 300; font-style: italic; font-size: clamp(28px,4vw,52px); letter-spacing: -0.025em; line-height: 0.92; color: #111110; }
.quote-credit  { margin-top: 16px; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17,17,16,0.32); line-height: 2.2; }
.lp-quote      { font-weight: 300; font-style: italic; font-size: clamp(28px,4vw,52px); letter-spacing: -0.025em; line-height: 0.88; text-transform: uppercase; color: #111110; margin: 60px 0 20px; }
.lp-quote cite { display: block; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; color: rgba(17,17,16,0.25); margin-top: 18px; font-weight: 300; }

/* Reveal copy */
.reveal-copy            { width: 62.5%; margin-left: auto; padding-top: 6px; }
.reveal-copy p          { font-weight: 300; font-style: italic; font-size: clamp(24px,3vw,40px); letter-spacing: -0.02em; line-height: 0.95; color: #111110; max-width: 540px; }
.reveal-copy .small     { margin-top: 16px; font-size: 11px; line-height: 1.8; color: rgba(17,17,16,0.55); font-style: normal; max-width: 300px; }

/* Caption row */
.caption-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); margin-top: calc(var(--gap)*0.45); }

/* Section header */
.section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); margin-bottom: var(--gap); }

/* Duo topo */
.duo-topo { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: start; }
.duo-topo.inverse { grid-template-columns: 1fr 2fr; }
.duo-topo.inverse .left { order: 2; }
.duo-topo.inverse .right { order: 1; }

/* Alt lines */
.alt-lines { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.alt-line   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.alt-line.reverse .l { order: 2; }
.alt-line.reverse .r { order: 1; }

/* Mixed headline */
.mixed-headline       { margin: var(--gap) 0; display: flex; flex-direction: column; gap: 2px; }
.mixed-headline-soft  { font-weight: 300; font-style: italic; font-size: clamp(20px,2.4vw,36px); letter-spacing: -0.02em; line-height: 0.9; text-transform: uppercase; color: #111110; }
.mixed-headline-bold  { font-weight: 900; font-size: clamp(24px,3vw,44px); letter-spacing: -0.03em; line-height: 0.88; text-transform: uppercase; color: #111110; }

/* Dark bandeau */
.brand-bandeau   { background: #111110; padding: var(--gap) calc(var(--gap)*2); margin-top: var(--gap); text-align: center; }
.brand-bandeau p { color: #F5F5F3; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* Section separators */
.lp-section     { margin-bottom: 80px; }
.campaign-sep   { margin: 80px 0 48px; border: none; border-top: 0.5px solid rgba(17,17,16,0.12); padding-top: 48px; }

/* LP atoms */
.lp-eyebrow  { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17,17,16,0.22); font-weight: 300; margin-bottom: 12px; }
.lp-label    { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #111110; margin-bottom: 4px; }
.lp-text     { font-size: 11px; line-height: 1.9; color: rgba(17,17,16,0.55); font-weight: 300; }
.lp-text-sm  { font-size: 9px; line-height: 1.8; color: rgba(17,17,16,0.4); font-weight: 300; letter-spacing: 0.02em; }

/* Caption index */
.caption          { padding-top: 10px; flex-shrink: 0; }
.caption-title    { font-weight: 700; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: #111110; margin-bottom: 8px; }
.caption-block    { max-width: 420px; }
.caption-line     { font-weight: 400; font-size: 11px; color: rgba(17,17,16,0.6); line-height: 1.45; }
.caption-line em  { font-style: italic; }
.caption-spacer   { margin-top: 0.9em; }

/* Misc */
.img-full       { width: 100%; display: block; object-fit: cover; }
.grid-spacious  { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 20px 0 40px; }
.grid-spacious img { width: 100%; display: block; object-fit: contain; background: #fff; padding: 12px; }

/* ══ SLIDER AUTOMATIQUE ══ */
.slider-outer, .mod-auto-slider {
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.slider-outer:active,
.mod-auto-slider:active { cursor: grabbing; }

.slider-track, .auto-slider-track {
  display: flex;
  align-items: stretch;
  gap: var(--slider-gap);
  width: max-content;
  will-change: transform;
}

.slider-item         { height: var(--slider-h); flex-shrink: 0; }
.slider-item img     { height: 100%; width: auto; object-fit: contain; display: block; }
.auto-slider-item    { flex-shrink: 0; height: var(--slider-h); background: transparent; display: flex; align-items: stretch; }
.auto-slider-frame   { width: auto; height: 100%; display: flex; align-items: stretch; justify-content: center; background: transparent; overflow: visible; }
.auto-slider-frame img { width: auto; height: 100%; max-width: none; object-fit: contain; object-position: center; display: block; }

/* ══ REVEAL AU SCROLL ══ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ══ DOOR REVEAL ══ */
.door-wrap    { position: relative; background: #E8E8E4; overflow: hidden; }
.door-videos  { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.door-panel   { position: absolute; top: 0; height: 100%; width: 50%; background: #E8E8E4; z-index: 10; transition: transform 1.3s cubic-bezier(0.76,0,0.24,1); }
.door-panel.left  { left: 0; }
.door-panel.right { right: 0; }
.door-wrap.open .door-panel.left  { transform: translateX(-100%); }
.door-wrap.open .door-panel.right { transform: translateX(100%); }

/* ══ LIGHTBOX ══ */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(17,17,16,0.96); z-index: 2000; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox video { max-width: 90vw; max-height: 90vh; }
.lightbox-close { position: absolute; top: 28px; right: 32px; color: rgba(255,255,255,0.5); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; cursor: pointer; background: none; border: none; font-family: inherit; transition: color 0.2s; }
.lightbox-close:hover { color: #fff; }

/* ══ TABLEAU CLIQUABLE ══ */
.tableau-item { position: relative; cursor: pointer; overflow: hidden; }
.tableau-item video { width: 100%; display: block; }
.tableau-item::after { content: ''; position: absolute; inset: 0; background: transparent; transition: background 0.3s; }
.tableau-item:hover::after { background: rgba(17,17,16,0.07); }

/* ══ CYCLE D'IMAGES ══ */
.cycle-cell     { position: relative; overflow: hidden; aspect-ratio: 3/2; }
.cycle-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; }
.cycle-cell img.active { opacity: 1; }

/* ══ HOVER CELL ══ */
.hover-cell              { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.hover-cell > .base-img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.4s ease; }
.hover-cell .hover-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
.hover-cell .hover-layer img, .hover-cell .hover-layer video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hover-cell:hover > .base-img  { opacity: 0; }
.hover-cell:hover .hover-layer { opacity: 1; }

/* ══ FILM COVER (nh-system) ══ */
.film-cover         { position: relative; width: 100%; overflow: hidden; background: #111110; }
.film-cover-image   { display: block; width: 100%; height: auto; }
.film-cover-layer   { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 2; overflow: hidden; }
.film-cover-layer video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.film-cover-layer.playing { opacity: 1; pointer-events: auto; }
.film-cover-trigger { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity 0.3s ease; z-index: 3; }
.film-cover-trigger.hidden { opacity: 0; pointer-events: none; }
.film-cover-button  { background: none; border: none; font-size: 8px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.88); cursor: pointer; }
.film-cover-note    { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); line-height: 1; }

/* ══ PHONE SOCIAL ══ */
.phone-wrap     { display: flex; justify-content: center; padding: 60px 0; gap: 40px; align-items: flex-start; }
.phone-frame    { width: 300px; height: 600px; border: 1.5px solid rgba(17,17,16,0.15); border-radius: 36px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,0.18); flex-shrink: 0; }
.phone-screen   { height: 100%; overflow-y: auto; scrollbar-width: none; }
.phone-screen::-webkit-scrollbar { display: none; }
.phone-post     { width: 100%; background: #fff; border-bottom: 1px solid #f0f0f0; }
.phone-header   { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.phone-avatar   { width: 24px; height: 24px; border-radius: 50%; background: #111110; flex-shrink: 0; overflow: hidden; }
.phone-username { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: #111110; flex: 1; }
.phone-time     { font-size: 8px; color: rgba(17,17,16,0.35); }
.phone-media img, .phone-media video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* ══ BACKGROUNDS ══ */
.bg-mauve    { background: #B8A8BC; }
.bg-mauve-dk { background: #7A5880; }
.bg-navy     { background: #182038; }
.bg-navy-mid { background: #243258; }
.bg-navy-lt  { background: #3A5280; }
.bg-wine     { background: #4E1E38; }
.bg-wine-lt  { background: #7A2E52; }
.bg-forest   { background: #2C3C2C; }
.bg-slate    { background: #7A8898; }
.bg-stone    { background: #9A9088; }
.bg-silver   { background: #C0C8D0; }
.bg-black    { background: #111110; }

/* ══ 4-COLUMN MODULES ══ */
.mod4-2img-text-right, .mod4-text-left-2img,
.mod4-2img-text-right-inset, .mod4-text-left-2img-inset,
.mod4-3img-caption-right, .mod4-caption-left-3img,
.mod4-3img-caption-right-inset, .mod4-caption-left-3img-inset,
.mod4-4img, .mod4-4img-inset, .mod4-2img, .mod4-2img-inset,
.mod4-video-169-left, .mod4-video-169-right,
.mod4-2img-gap, .mod4-4sq-left, .mod4-4sq-right,
.mod-16x9-full, .mod-auto-slider { width: 100%; margin: 0; }

.mod4-2img-text-right, .mod4-text-left-2img,
.mod4-2img-text-right-inset, .mod4-text-left-2img-inset { display: grid; align-items: flex-end; }
.mod4-2img-text-right, .mod4-2img-text-right-inset { grid-template-columns: 50% 1fr; gap: var(--gap-xl); }
.mod4-text-left-2img, .mod4-text-left-2img-inset    { grid-template-columns: 1fr 50%; gap: var(--gap-xl); }

.mod4-3img-caption-right, .mod4-caption-left-3img,
.mod4-3img-caption-right-inset, .mod4-caption-left-3img-inset { display: grid; align-items: end; }
.mod4-3img-caption-right, .mod4-3img-caption-right-inset { grid-template-columns: 75% 1fr; gap: var(--gap-sm); }
.mod4-caption-left-3img, .mod4-caption-left-3img-inset   { grid-template-columns: 1fr 75%; gap: var(--gap-sm); }

.mod4-2img-text-right-inset .grid-2, .mod4-text-left-2img-inset .grid-2 { gap: var(--inset-m); }
.mod4-3img-caption-right-inset .grid-3, .mod4-caption-left-3img-inset .grid-3,
.mod4-4img-inset .grid-4, .mod4-2img-inset .grid-2, .mod4-2img-gap .grid-2 { gap: var(--inset-m); }

.mod4-video-169-left  { display: grid; grid-template-columns: 3fr 1fr; align-items: start; gap: 0; }
.mod4-video-169-right { display: grid; grid-template-columns: 1fr 3fr; align-items: start; gap: 0; }
.mod4-4sq-left  { display: grid; grid-template-columns: 50% 1fr; align-items: start; gap: var(--gap-sm); }
.mod4-4sq-right { display: grid; grid-template-columns: 1fr 50%; align-items: start; gap: var(--gap-sm); }
.mod4-4sq-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); width: 100%; }
.mod4-4sq-grid img { width: 100%; display: block; }

/* ══ 3-COLUMN MODULES ══ */
.mod3-2img-text-right, .mod3-text-left-2img,
.mod3-2img-text-right-inset, .mod3-text-left-2img-inset,
.mod3-3img, .mod3-3img-inset,
.mod3-video-169-left, .mod3-video-169-right { width: 100%; margin: 0; }

.mod3-2img-text-right, .mod3-text-left-2img,
.mod3-2img-text-right-inset, .mod3-text-left-2img-inset { display: grid; align-items: flex-end; }
.mod3-2img-text-right, .mod3-2img-text-right-inset { grid-template-columns: 66.6666% 1fr; gap: var(--gap-xl); }
.mod3-text-left-2img, .mod3-text-left-2img-inset   { grid-template-columns: 1fr 66.6666%; gap: var(--gap-xl); }
.mod3-2img-text-right-inset .grid-2, .mod3-text-left-2img-inset .grid-2, .mod3-3img-inset .grid-3 { gap: var(--inset-m); }

.mod3-video-169-left  { display: grid; grid-template-columns: 2fr 1fr; align-items: start; gap: 0; }
.mod3-video-169-right { display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: 0; }

/* Mixed title stack */
.mod-mixed-title  { min-width: 0; display: flex; flex-direction: column; }
.mod-mixed-stack  { display: flex; flex-direction: column; gap: 4px; }

.mod4-2img-text-right .mod-mixed-title, .mod4-2img-text-right-inset .mod-mixed-title { text-align: left; align-items: flex-start; }
.mod4-text-left-2img  .mod-mixed-title, .mod4-text-left-2img-inset  .mod-mixed-title { text-align: right; align-items: flex-end; }
.mod3-2img-text-right .mod-mixed-title, .mod3-2img-text-right-inset .mod-mixed-title { text-align: left; align-items: flex-start; }
.mod3-text-left-2img  .mod-mixed-title, .mod3-text-left-2img-inset  .mod-mixed-title { text-align: right; align-items: flex-end; }

.mod4-3img-caption-right .caption-right, .mod4-3img-caption-right-inset .caption-right { text-align: left; margin-left: 0; max-width: 320px; }
.mod4-caption-left-3img  .caption-left,  .mod4-caption-left-3img-inset  .caption-left  { text-align: right; margin-left: auto; max-width: 320px; }
.mod4-3img-caption-right .caption-right, .mod4-3img-caption-right-inset .caption-right,
.mod4-caption-left-3img  .caption-left,  .mod4-caption-left-3img-inset  .caption-left  { display: flex; flex-direction: column; justify-content: flex-end; align-self: end; height: 100%; gap: 6px; }

/* ══ CINEMA MODE (nh-video.js) ══ */
.nh-play-wrap { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px; pointer-events: none; z-index: 10; }
.nh-play-wrap.gone { display: none; }
.nh-play-btn {
  pointer-events: all;
  background: rgba(17,17,16,0.55);
  color: #F5F5F3;
  border: 1px solid rgba(245,245,243,0.35);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 14px; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s;
}
.nh-play-btn:hover { background: rgba(17,17,16,0.8); }

.nh-cinema {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.nh-cinema.open { opacity: 1; pointer-events: all; }
.nh-cinema-inner {
  position: relative; width: min(90vw,1200px); max-height: 90vh;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.nh-cinema-close {
  background: transparent;
  border: none;
  color: rgba(245,245,243,0.35);
  font-size: 22px;
  line-height: 1;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
  font-family: inherit;
}
.nh-cinema-close:hover { color: rgba(245,245,243,0.85); }
.nh-cinema-video { width: 100%; max-height: calc(90vh - 50px); object-fit: contain; display: block; background: #000; }

/* ══ INDEX — VIDEO LAYOUT ══ */
.video-outer { overflow: hidden; background: #111110; position: relative; flex-shrink: 0; }
.video-outer video {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100%; height: 100%;
  object-fit: cover;
}
.nh-rule.nh-rule--left { margin-right: auto; }

/* ══ MOBILE — PORTRAIT ══ */
@media (orientation: portrait), (max-width: 812px) {
  html, body { overflow-y: auto; height: auto; }

  .page {
    position: relative; top: auto; bottom: auto; left: auto; right: auto;
    padding: 20px; flex-direction: column; gap: 0; min-height: 100vh;
  }

  .col-left {
    position: fixed; top: 0; left: 0; right: 0;
    flex-shrink: 0; background: #F5F5F3; z-index: 100;
    display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start;
    gap: 16px; padding: 20px 20px 14px 20px;
  }
  .logo { font-size: 72px; }
  nav.desktop-nav { display: none; }

  .mobile-nav {
    display: flex !important;
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 16px; margin-top: 0; position: relative; z-index: 200;
  }
  .mobile-nav a, .mobile-nav .mob-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: #111110; text-decoration: none; white-space: nowrap; cursor: pointer;
    padding: 0; margin: 0; line-height: 1;
  }
  .mobile-nav a:hover { opacity: 0.4; }

  .mob-work-wrap { position: relative; }
  .mob-panel-1 {
    display: none; position: absolute; top: 100%; left: 0; right: auto;
    background: #F5F5F3; border: 0.5px solid rgba(17,17,16,0.12);
    min-width: 200px; z-index: 500; padding: 6px 0; white-space: nowrap;
  }
  .mob-panel-1.open { display: block; animation: fadeIn 0.2s ease; }
  .mob-cat-item { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #111110; padding: 18px 14px; cursor: pointer; line-height: 1; text-decoration: none; }
  .mob-cat-item.active { opacity: 0.5; }
  .mob-panel-2 { display: none; padding: 6px 0 12px 14px; border-top: 0.5px solid rgba(17,17,16,0.08); }
  .mob-panel-2.open { display: block; animation: fadeIn 0.2s ease; }
  .mob-sub-link { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(17,17,16,0.75); text-decoration: none; padding: 18px 0; line-height: 1; }

  .col-center { flex: none; margin-top: 86px; padding-bottom: 80px; }
  .spacer     { display: none; }
  .video-outer { width: 100%; aspect-ratio: 1/1; overflow: hidden; }

  .col-right {
    position: fixed; bottom: 0; left: 0; right: 0; height: auto; width: auto;
    background: #F5F5F3; display: flex; justify-content: flex-end; align-items: center;
    padding: 14px 20px; z-index: 100;
  }
  .vert-name {
    writing-mode: horizontal-tb; font-weight: 900; font-size: 22px !important;
    letter-spacing: -0.025em; line-height: 0.88; text-align: right; white-space: nowrap;
  }

  /* Content responsive */
  .s-intro { padding: 20px 0 40px; }
  .s-intro.mod-intro-page { padding: 20px 0 0; }
  .brand-cols4       { grid-template-columns: 1fr 1fr; }
  .brand-col-text    { grid-column: 1/-1; }
  .slideshow         { width: 100%; }
  .krug-sp-wrap      { flex-direction: column; }
  .krug-sp-img       { width: 100%; }
  .mc3-text-slide-row{ flex-direction: column; }
  .mc3-caption       { order: -1; text-align: center; align-items: center; width: 100%; }
  .mc3-slideshow-wrap{ width: 100%; }
  .mc3-duo           { grid-template-columns: 1fr; }
  .mc3-grid3         { grid-template-columns: 1fr 1fr; width: 100%; }
  .mc3-mood-wrap     { grid-template-columns: 1fr; }
  .mc3-trio          { grid-template-columns: 1fr; }
  .mc3-trio-text     { padding: var(--gap) 0; text-align: left; }
  .rose-block        { flex-direction: column; }
  .rose-text         { width: 100%; margin-right: 0; }
  .rose-img          { width: 100%; }
  .pj-kv-wrap        { flex-direction: column; }
  .pj-kv-text        { width: 100%; }
  .pj-kv-img-wrap    { width: 100%; margin-left: 0; }
  .brand-typo-wrap   { justify-content: flex-start !important; }
  .brand-typo-text   { width: 100%; text-align: left !important; }
  .lp-caption        { flex-direction: column; align-items: flex-start; }
  .lp-credits-col    { text-align: left; }
  .routin-caption    { flex-direction: column; align-items: flex-start; }
  .routin-caption .brand-credits { text-align: left; }
  .quote-block, .reveal-copy { width: 100%; margin-left: 0; }
  .caption-row, .section-header { display: block; }
  .duo-topo, .duo-topo.inverse { display: block; }
  .duo-topo > *, .duo-topo.inverse > * { margin-bottom: var(--gap); }
  .alt-line, .alt-line.reverse { display: block; }
  .alt-line > * { margin-bottom: 12px; }
  .grid-2x2 { display: block; }
  .grid-2x2 > * { margin-bottom: var(--gap); }
  .grid-4   { grid-template-columns: repeat(2,1fr); }
  .grid-3   { grid-template-columns: repeat(2,1fr); }
  .auto-slider-item { height: 200px; }

  .mod4-2img-text-right, .mod4-text-left-2img,
  .mod4-2img-text-right-inset, .mod4-text-left-2img-inset,
  .mod4-3img-caption-right, .mod4-caption-left-3img,
  .mod4-3img-caption-right-inset, .mod4-caption-left-3img-inset,
  .mod4-video-169-left, .mod4-video-169-right,
  .mod4-4sq-left, .mod4-4sq-right,
  .mod3-2img-text-right, .mod3-text-left-2img,
  .mod3-2img-text-right-inset, .mod3-text-left-2img-inset,
  .mod3-video-169-left, .mod3-video-169-right,
  .cap-row { display: block; }

  .mod4-4sq-left > *, .mod4-4sq-right > * { margin-bottom: var(--space-s); }

  .t-body, .caption-left, .caption-right,
  .cap-left, .cap-right, .cap-right-only, .mod-cap {
    max-width: 100%; width: 100%; margin-left: 0; margin-right: 0;
  }
}

/* ══════════════════════════════════════════════════════
   VMENU — Navigation verticale dépliante
   Inspiration : vmenu original, adapté au système NH
   ══════════════════════════════════════════════════════ */

.vmenu {
  margin-top: 5px;
}

.vmenu__list,
.vmenu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vmenu__item {
  position: relative;
}

/* Liens */
.vmenu__link {
  display: inline-block;
  padding: 0;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111110;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease, font-style 0.2s ease;
  line-height: 2;
  white-space: nowrap;
}

.vmenu__link:hover,
.vmenu__link:focus-visible {
  opacity: 0.45;
  outline: none;
}

/* Catégories niveau 2 (Agency, Global Brand) */
.vmenu__link--cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.55;
  line-height: 1.6;
}

/* Feuilles niveau 3 */
.vmenu__link--leaf {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: rgba(17,17,16,0.5);
  line-height: 1.6;
}
.vmenu__link--leaf:hover { color: #111110; opacity: 1; }



/* Lien actif */
.vmenu__link.current,
.vmenu__link--leaf.current {
  color: #111110;
  font-weight: 700;
  opacity: 1;
}

/* Sous-menus — fermés par défaut */
.vmenu__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  padding-left: 0;
}

.vmenu__sub.open {
  max-height: 600px;
}

/* Items : fade + micro-glissement vers le bas */
.vmenu__sub > .vmenu__item {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.vmenu__sub.open > .vmenu__item {
  opacity: 1;
  transform: translateY(0);
}

/* Cascade légère à l'ouverture */
.vmenu__sub.open > .vmenu__item:nth-child(1) { transition-delay: 0.05s; }
.vmenu__sub.open > .vmenu__item:nth-child(2) { transition-delay: 0.10s; }
.vmenu__sub.open > .vmenu__item:nth-child(3) { transition-delay: 0.15s; }
.vmenu__sub.open > .vmenu__item:nth-child(4) { transition-delay: 0.20s; }
.vmenu__sub.open > .vmenu__item:nth-child(5) { transition-delay: 0.25s; }
.vmenu__sub.open > .vmenu__item:nth-child(6) { transition-delay: 0.30s; }
.vmenu__sub.open > .vmenu__item:nth-child(7) { transition-delay: 0.35s; }
.vmenu__sub.open > .vmenu__item:nth-child(8) { transition-delay: 0.40s; }

/* Fermeture : reset immédiat */
.vmenu__sub:not(.open) > .vmenu__item {
  transition-delay: 0s;
  transition-duration: 0.15s;
}

/* Espacements */
.vmenu__list > .vmenu__item { margin-top: 2px; }
.vmenu__list > .vmenu__item:first-child { margin-top: 0; }

.vmenu__sub > .vmenu__item { margin-top: 2px; }
.vmenu__sub .vmenu__sub > .vmenu__item { margin-top: 0; }

/* Indentation niveau 2 */
.vmenu__list > .vmenu__item > .vmenu__sub {
  padding-left: 0;
}

/* Indentation niveau 3 */
.vmenu__list > .vmenu__item > .vmenu__sub > .vmenu__item > .vmenu__sub {
  padding-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .vmenu__sub,
  .vmenu__link { transition: none !important; }
}

/* Mobile : vmenu caché, remplacé par mobile-nav */
@media (orientation: portrait), (max-width: 812px) {
  .vmenu { display: none; }
}

/* ══════════════════════════════════════════════════════
   MOBILE — Adaptation responsive complète
   Stratégie : conserver le maximum d'éléments graphiques,
   2 colonnes quand lisible, 1 colonne pour texte+image,
   typographie réduite mais proportionnée
   ══════════════════════════════════════════════════════ */

@media (orientation: portrait), (max-width: 812px) {

  /* ── Variables ── */
  :root {
    --gap:    20px;
    --gap-sm: 12px;
    --gap-xl: 20px;
  }

  /* ════════════════════════════
     LAYOUT GÉNÉRAL
  ════════════════════════════ */

  .col-left {
    padding: 14px 16px 10px 16px;
    gap: 12px;
  }
  .logo { font-size: 56px; }

  .col-center {
    margin-top: 78px;
    padding: 0 0 70px 0;
    overflow-x: hidden;
  }

  .col-right {
    padding: 10px 16px;
  }
  .vert-name {
    font-size: 18px !important;
  }

  /* ════════════════════════════
     TYPOGRAPHIE
  ════════════════════════════ */

  .t-mixed-line {
    font-size: clamp(18px, 5.5vw, 32px);
    white-space: normal;
    word-break: break-word;
  }
  .t-mixed-soft,
  .t-mixed-bold   { font-size: clamp(18px, 5.5vw, 32px); }
  .t-section-title,
  .t-title,
  .t-headline      { font-size: clamp(22px, 6.5vw, 40px); }
  .brand-name      { font-size: clamp(22px, 6.5vw, 40px); padding-bottom: 40px; }
  .lp-quote        { font-size: clamp(20px, 5vw, 32px); }
  .quote-block p   { font-size: clamp(20px, 5vw, 32px); }
  .reveal-copy p   { font-size: clamp(18px, 4.5vw, 28px); }
  .innov-quote     { font-size: clamp(18px, 4.5vw, 28px); width: 100%; margin-left: 0; }

  /* ════════════════════════════
     RÈGLES ET SÉPARATEURS
  ════════════════════════════ */

  hr.rule-main  { width: 100%; margin-left: 0; margin-right: 0; }
  .quote-block  { width: 100%; margin-left: 0; margin-right: 0; }
  .reveal-copy  { width: 100%; margin-left: 0; }
  .nh-rule--right { margin-left: 0; }
  .nh-rule--center { margin-left: 0; margin-right: 0; }

  /* ════════════════════════════
     BRAND-BLOCK SPACING
  ════════════════════════════ */

  .brand-block  { margin-bottom: 48px; }
  .s-intro      { padding: 20px 0 32px; }
  .s-intro.mod-intro-page { padding-top: 16px; }

  /* ════════════════════════════
     GRILLES INLINE — RESET GLOBAL
     Toutes les grilles style="display:grid"
     passent en flex colonne par défaut
  ════════════════════════════ */

  .col-center [style*="display:grid"],
  .col-center [style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gap) !important;
  }

  /* ════════════════════════════
     EXCEPTIONS — 2 COLONNES CONSERVÉES
     Portraits, carrés, petits éléments
  ════════════════════════════ */

  /* Grilles 3 colonnes → 2 colonnes (portraits, still life) */
  .col-center [style*="grid-template-columns:1fr 1fr 1fr"],
  .col-center [style*="grid-template-columns: 1fr 1fr 1fr"],
  .col-center [style*="grid-template-columns:repeat(3,1fr)"],
  .col-center [style*="grid-template-columns: repeat(3, 1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap-sm) !important;
  }

  /* Grilles 4 colonnes → 2 colonnes */
  .col-center [style*="grid-template-columns:repeat(4,1fr)"],
  .col-center [style*="grid-template-columns: repeat(4, 1fr)"],
  .col-center [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap-sm) !important;
  }

  /* Grilles 2 colonnes symétriques → garder 2 colonnes si images */
  .col-center [style*="grid-template-columns:1fr 1fr"],
  .col-center [style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap-sm) !important;
  }

  /* Classes CSS existantes */
  .brand-cols4   { grid-template-columns: 1fr 1fr !important; }
  .grid-4        { grid-template-columns: 1fr 1fr !important; }
  .grid-3        { grid-template-columns: 1fr 1fr !important; }
  .mc3-duo       { grid-template-columns: 1fr 1fr !important; }
  .mc3-grid3     { grid-template-columns: 1fr 1fr !important; width: 100%; }

  /* ════════════════════════════
     COMPOSANTS SPÉCIFIQUES
  ════════════════════════════ */

  /* Images — toujours pleine largeur dans leur conteneur */
  .col-center img { max-width: 100%; height: auto; }

  /* Vidéos cover */
  .mc3-cover-wrap { width: 100%; }

  /* Slideshows */
  .slideshow            { width: 100% !important; }
  .lp-slideshow         { width: 100%; }
  .mc3-slideshow-wrap   { width: 100%; }
  .mc3-text-slide-row   { flex-direction: column; }
  .mc3-caption          { width: 100%; text-align: left; align-items: flex-start; }

  /* Sliders continus */
  .auto-slider-item  { height: 180px; }
  .slider-item       { height: 180px; }
  .hs-wrap           { cursor: grab; }

  /* Krug */
  .krug-sp-wrap { flex-direction: column; }
  .krug-sp-img  { width: 100%; }

  /* Rose block (La Verrerie) */
  .rose-block { flex-direction: column; }
  .rose-text  { width: 100%; margin-right: 0; }
  .rose-img   { width: 100%; }

  /* PJ Key Visual */
  .pj-kv-wrap    { flex-direction: column; background: #000; }
  .pj-kv-text    { width: 100%; }
  .pj-kv-img-wrap{ width: 100%; margin-left: 0; }

  /* MC3 Trio */
  .mc3-trio      { grid-template-columns: 1fr; }
  .mc3-trio-text { padding: var(--gap) 0; }

  /* MC3 Mood */
  .mc3-mood-wrap { grid-template-columns: 1fr 1fr; }

  /* Captions et sections */
  .caption-row,
  .section-header,
  .lp-caption,
  .routin-caption { flex-direction: column; gap: 12px; }

  .lp-credits-col    { text-align: left; }
  .routin-caption .brand-credits { text-align: left; }

  /* Typo align */
  .brand-typo-wrap  { justify-content: flex-start !important; }
  .brand-typo-text  { width: 100%; text-align: left !important; }

  /* Quote et reveal */
  .quote-block,
  .reveal-copy { width: 100%; margin-left: 0; }

  /* Duo layouts */
  .duo-topo,
  .duo-topo.inverse { display: block; }
  .duo-topo > *,
  .duo-topo.inverse > * { margin-bottom: var(--gap); }

  /* Alt lines */
  .alt-line,
  .alt-line.reverse { display: block; }
  .alt-line > * { margin-bottom: 12px; }

  /* Grid 2x2 */
  .grid-2x2 { grid-template-columns: 1fr 1fr !important; }

  /* Cap row */
  .cap-row { display: block; }
  .cap-left, .cap-right, .cap-right-only,
  .t-body, .caption-left, .caption-right,
  .mod-cap {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* ── CV About ── */
  .cv-wrap { grid-template-columns: 1fr !important; }

  /* ── Contact ── */
  .contact-wrap { grid-template-columns: 1fr !important; }
  .form-row     { grid-template-columns: 1fr !important; }

  /* ── Production ── */
  .prod-grid  { grid-template-columns: 1fr !important; }
  .pige-cycler{ aspect-ratio: 4/3 !important; }

  /* ── Innovation ── */
  .innov-grid { grid-template-columns: 1fr !important; }
  .innov-quote { width: 100%; margin-left: 0; }

  /* ── Brand-vision ── */
  .media-frame.media-45 { aspect-ratio: 4/5; }

  /* ── Modules 4-col et 3-col ── */
  .mod4-2img-text-right, .mod4-text-left-2img,
  .mod4-2img-text-right-inset, .mod4-text-left-2img-inset,
  .mod4-3img-caption-right, .mod4-caption-left-3img,
  .mod4-3img-caption-right-inset, .mod4-caption-left-3img-inset,
  .mod4-video-169-left, .mod4-video-169-right,
  .mod4-4sq-left, .mod4-4sq-right,
  .mod3-2img-text-right, .mod3-text-left-2img,
  .mod3-2img-text-right-inset, .mod3-text-left-2img-inset,
  .mod3-video-169-left, .mod3-video-169-right { display: block; }

  .mod4-4sq-left > *,
  .mod4-4sq-right > * { margin-bottom: var(--space-s); }

  /* ── vmenu caché, mobile-nav visible ── */
  .vmenu { display: none; }

  .mobile-nav {
    display: flex !important;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 0;
    position: relative;
    z-index: 200;
  }
  .mobile-nav a,
  .mobile-nav .mob-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: #111110; text-decoration: none;
    white-space: nowrap; cursor: pointer; padding: 0; margin: 0; line-height: 1;
  }

}