/* ─────────────────────────────────────────────────────────────────────────
   UX Days 2026 — Antoine Pezé · v12 web
   Aesthetic : editorial brutalism · Swiss precision · NYer × Pentagram
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --cream:        #F7F3EE;
  --cream-deep:   #F0EAE0;
  --dark-bg:      #0F0F10;
  --dark-bg-deep: #060607;
  --red:          #D73537;
  --red-deep:     #B82A2C;
  --dark:         #1B4D61;
  --dark-soft:    #2B5C71;
  --ink:          #1A1A1A;
  --ink-soft:     #4A4A4A;
  --muted:        #757575;
  --muted-soft:   #9A9182;
  --hairline:     #C4B7A0;
  --hairline-soft: #D9D0BD;
  --white:        #FFFFFF;

  --serif: 'Source Serif 4', 'Times New Roman', serif;
  --sans:  'Source Sans 3', system-ui, sans-serif;
  --mono:  'Source Code Pro', 'SF Mono', monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html, body {
  width: 100%;
  height: 100%;
  background: #050505;
  overflow: hidden;
  font-family: var(--serif);
  font-feature-settings: 'kern', 'liga', 'onum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--ink);
}

/* ─── Stage : the 16:9 letterboxed canvas ──────────────────────────── */

.deck {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: var(--cream);
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 22px 70px -10px rgba(0,0,0,.45);
}

/* Paper grain — extremely faint multiply layer */
.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─── Chrome ───────────────────────────────────────────────────────── */

.chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.mark {
  position: absolute;
  top: 2.6cqw;
  left: 4.5cqw;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-soft);
  transition: color .35s var(--ease), opacity .35s var(--ease);
}

.counter {
  position: absolute;
  top: 2.6cqw;
  right: 4.5cqw;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78cqw;
  letter-spacing: 0.18em;
  color: var(--muted-soft);
  display: flex;
  gap: 0.6cqw;
  align-items: baseline;
  transition: color .35s var(--ease);
}
.counter-slash { color: var(--hairline); }
#total { color: var(--hairline); }

.progress-track {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.18cqw;
  background: transparent;
}
.progress-fill {
  width: 0%;
  height: 100%;
  background: var(--red);
  transition: width .55s var(--ease-out);
}

/* ─── Slides — base layer ─────────────────────────────────────────── */

.slide {
  position: absolute;
  inset: 0;
  padding: 7.2cqw 6.5cqw 6.4cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  transition: opacity .42s var(--ease), transform .55s var(--ease-out), visibility 0s linear .42s;
  z-index: 1;
}
.slide.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  z-index: 5;
  transition: opacity .42s var(--ease), transform .55s var(--ease-out), visibility 0s linear 0s;
}
.slide.prev { z-index: 2; }

/* Hide chrome (mark/counter) on cover & dark slides — scoped to real stage only,
   pas aux clones dans la vue d'ensemble */
.slide[data-type="cover"] ~ .chrome,
body:has(#stage > .slide.active[data-type="cover"]) .mark,
body:has(#stage > .slide.active[data-type="cover"]) .counter,
body:has(#stage > .slide.active[data-type="cover"]) .progress-track { opacity: 0; }

body:has(#stage > .slide.active[data-type="dark-climax"]) .mark,
body:has(#stage > .slide.active[data-type="dark-climax"]) .counter { color: rgba(255,255,255,.35); }

body:has(#stage > .slide.active[data-type="whisper"]) .mark,
body:has(#stage > .slide.active[data-type="whisper"]) .counter { opacity: 0.4; }

body:has(#stage > .slide.active[data-type="app-loud"]) .mark { opacity: 0; }
body:has(#stage > .slide.active[data-type="app-loud"]) .counter { color: var(--dark); }

/* Generic accent — used by .accent within climax/etc */
.accent { color: var(--red); }
.accent-quiet { color: var(--ink-soft); font-style: italic; font-weight: 600; }

/* Beautiful French quote-marks */
.quote-mark-l, .quote-mark-r {
  color: var(--red);
  font-feature-settings: 'kern';
}

/* ───────────────────────────────────────────────────────────────────
   01 · COVER
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="cover"] {
  padding: 0;
}
.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}
.cover-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.78) 100%);
}
.cover-rule {
  position: absolute;
  left: 4.5cqw;
  top: 4.5cqw;
  width: 8cqw;
  height: 0.12cqw;
  background: rgba(255,255,255,.85);
}
.cover-eyebrow {
  position: absolute;
  left: 4.5cqw;
  top: 5.4cqw;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05cqw;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
}
.cover-title {
  position: absolute;
  left: 4.5cqw;
  right: 4.5cqw;
  bottom: 13cqw;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 7.4cqw;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--white);
  font-feature-settings: 'kern', 'liga', 'ss01';
}
.cover-meta {
  position: absolute;
  left: 4.5cqw;
  right: 4.5cqw;
  bottom: 5.5cqw;
  display: flex;
  align-items: baseline;
  gap: 1.8cqw;
  color: var(--white);
}
.cover-byline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.15cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cover-meta::before {
  content: '';
  display: inline-block;
  width: 1.6cqw;
  height: 0.12cqw;
  background: var(--white);
  margin-right: -0.6cqw;
  margin-bottom: 0.3cqw;
}
.cover-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25cqw;
  color: rgba(255,255,255,.78);
}

/* ───────────────────────────────────────────────────────────────────
   02 · DROP CAP OPENER — Paula Scher / NYer
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="drop-cap"] { padding: 7.2cqw 6.5cqw 5.5cqw; }
.dc-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-end;
  gap: 2.4cqw;
  height: 100%;
}
.dc-cap {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28cqw;
  line-height: 0.88;
  color: var(--red);
  letter-spacing: -0.04em;
  font-feature-settings: 'kern';
}
.dc-body {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 4.6cqw;
  line-height: 1.12;
  color: var(--dark);
  letter-spacing: -0.012em;
  padding-bottom: 2cqw;
}

/* ───────────────────────────────────────────────────────────────────
   03/41/42/46/55 · BEAT
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="beat"] { justify-content: center; }
.beat-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5cqw;
  line-height: 1.18;
  color: var(--dark);
  letter-spacing: -0.012em;
  max-width: 88%;
}
.beat-text--smaller { font-size: 4.2cqw; }

/* ───────────────────────────────────────────────────────────────────
   04/21/25/28/31/32/39/46/49/52/53/56 · CLIMAX
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="climax"] { justify-content: center; }
.climax-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.2cqw;
  line-height: 1.16;
  color: var(--dark);
  letter-spacing: -0.015em;
  max-width: 92%;
}
.climax-text--smaller { font-size: 4cqw; line-height: 1.22; }
.climax-text--xl { font-size: 8cqw; line-height: 1.02; letter-spacing: -0.025em; }

/* Sub italic mute under a climax (ex : sous « (re)devenez DA. ») */
.climax-after {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4cqw;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 2cqw;
  letter-spacing: -0.005em;
}
.climax-aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2cqw;
  color: var(--muted);
  letter-spacing: -0.005em;
  display: inline-block;
  margin: 0.4cqw 0 0.6cqw;
}

/* ───────────────────────────────────────────────────────────────────
   05 · QUIET BEAT
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="quiet"] {
  justify-content: center;
  padding-left: 14cqw;
}
.quiet-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.5cqw;
  line-height: 1.36;
  color: var(--ink-soft);
  max-width: 64%;
}

/* ───────────────────────────────────────────────────────────────────
   06 · PHOTO OVERLAY
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="photo-overlay"] { padding: 0; }
.photo-veil-strip {
  position: absolute;
  inset: 26% 0 28% 0;
  background: rgba(0,0,0,.62);
}
.photo-eyebrow {
  position: absolute;
  top: 31%;
  left: 6.5cqw;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
}
.photo-eyebrow::after {
  content: '';
  display: inline-block;
  width: 4cqw;
  height: 0.1cqw;
  background: rgba(255,255,255,.55);
  margin-left: 1.2cqw;
  vertical-align: middle;
}
.photo-text {
  position: absolute;
  left: 6.5cqw;
  right: 6.5cqw;
  top: 37%;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.4cqw;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────────────────────────────
   07/11/17/24/29/33/40/44/48/51 · ASIDE
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="aside"] {
  justify-content: center;
  padding-left: 14cqw;
}
.aside-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.2cqw;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 68%;
  font-weight: 400;
}
.aside-text--smaller { font-size: 2.8cqw; line-height: 1.45; }
.aside-text--centered { text-align: center; margin: 0 auto; }
.aside-text em { color: var(--red); font-style: italic; font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────
   08/09/10 · DOUTE — roman numeral + statement
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="doute"] { justify-content: center; align-items: flex-start; }
.doute-roman {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 6cqw;
  line-height: 1;
  color: var(--red);
  letter-spacing: -0.04em;
}
.doute-rule {
  width: 18cqw;
  height: 0.12cqw;
  background: var(--hairline);
  margin: 1.4cqw 0 2.2cqw;
}
.doute-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.2cqw;
  line-height: 1.1;
  color: var(--dark);
  letter-spacing: -0.018em;
  max-width: 88%;
}

/* ───────────────────────────────────────────────────────────────────
   12/15/19/20/27/36/37 · STORY
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="story"] { justify-content: center; }
.story-text {
  font-family: var(--serif);
  font-size: 3.3cqw;
  line-height: 1.36;
  color: var(--ink);
  max-width: 78%;
  font-weight: 400;
}
.story-text em { font-style: italic; color: var(--dark); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────
   13/30/35 · DISCOVERY ANCHOR — chapter-title page
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="discovery"] {
  justify-content: center;
  align-items: flex-start;
  background: var(--cream-deep);
}
.discovery-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12cqw;
  line-height: 0.88;
  color: var(--hairline);
  letter-spacing: -0.02em;
  position: absolute;
  top: 4cqw;
  right: 6cqw;
  z-index: 1;
}
.discovery-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2cqw;
  color: var(--muted);
  margin-bottom: 1.6cqw;
  z-index: 2;
  position: relative;
}
.discovery-rule {
  width: 20cqw;
  height: 0.12cqw;
  background: var(--red);
  margin-bottom: 2cqw;
  position: relative;
  z-index: 2;
}
.discovery-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.2cqw;
  line-height: 1.14;
  color: var(--dark);
  letter-spacing: -0.018em;
  max-width: 92%;
  position: relative;
  z-index: 2;
}

/* ───────────────────────────────────────────────────────────────────
   14/18/26 · TRANSITION — "Premier truc"
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="transition"] { justify-content: center; }
.trans-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.3em;
  color: var(--red);
  margin-bottom: 1.4cqw;
}
.trans-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 6.4cqw;
  line-height: 1;
  color: var(--muted);
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────────────────────────────
   16 · CODE CHOICE — Bret Victor
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="code-choice"] {
  justify-content: flex-start;
  padding: 6.5cqw 6.5cqw 5.5cqw;
}
.code-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4cqw;
  color: var(--ink-soft);
  margin-bottom: 3cqw;
}
.code-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 4.5cqw;
  flex: 1;
}
.code-divider {
  background: var(--hairline);
  width: 1px;
}
.code-col { display: flex; flex-direction: column; }
.code-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.28em;
  color: var(--red);
  margin-bottom: 0.5cqw;
  text-transform: uppercase;
}
.code-rule {
  width: 4cqw;
  height: 0.12cqw;
  background: var(--ink);
  margin-bottom: 1.8cqw;
}
.code-body {
  font-family: var(--mono);
  font-size: 1.7cqw;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
  white-space: pre;
}
.code-body .ln {
  display: inline-block;
  width: 1.4cqw;
  color: var(--hairline);
  font-size: 0.95cqw;
  text-align: right;
  margin-right: 1.2cqw;
  user-select: none;
  vertical-align: baseline;
  position: relative;
  top: -0.15cqw;
}
.code-question {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 2.1cqw;
  color: var(--dark);
  margin-top: 1.8cqw;
}

/* ───────────────────────────────────────────────────────────────────
   22/23 · GIANT NUMBER — Paula Scher type-as-image
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="giant-number"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.giant-top {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6cqw;
  color: var(--muted);
  margin-bottom: -0.5cqw;
  letter-spacing: 0.02em;
  z-index: 2;
  position: relative;
}
.giant-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
.giant-num {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-feature-settings: 'lnum', 'kern';
}
.giant-num--solid {
  font-size: 30cqw;
  color: var(--ink);
  position: relative;
  z-index: 2;
}
.giant-num--ghost {
  position: absolute;
  font-size: 30cqw;
  -webkit-text-stroke: 0.06cqw var(--hairline);
  color: transparent;
  transform: translate(0.6cqw, -0.6cqw);
  z-index: 1;
}
.giant-num--red {
  color: var(--red);
  font-size: 34cqw;
}
.giant-num--ghost-red {
  -webkit-text-stroke: 0.08cqw rgba(215, 53, 55, .25);
  font-size: 34cqw;
}
.giant-bottom {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4cqw;
  color: var(--muted);
  margin-top: -0.5cqw;
  z-index: 2;
  position: relative;
}

/* ───────────────────────────────────────────────────────────────────
   34 · DARK CLIMAX — Sagmeister / Maeda inversion
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="dark-climax"] {
  background: var(--dark-bg);
  justify-content: center;
  align-items: flex-end;
  padding: 7cqw 7cqw 6cqw;
}
.dark-corner-mark {
  position: absolute;
  top: 4cqw;
  left: 5cqw;
  font-size: 4cqw;
  color: var(--red);
  line-height: 0.5;
}
.dark-climax-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.6cqw;
  line-height: 1.14;
  color: var(--white);
  letter-spacing: -0.02em;
  text-align: right;
  max-width: 78%;
}
.dark-accent { color: var(--red); }

/* ───────────────────────────────────────────────────────────────────
   38 · MIXED STAT — 100 / 2000
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="mixed-stat"] {
  justify-content: center;
  align-items: flex-start;
}
.ms-line { font-family: var(--serif); }
.ms-line--quiet {
  font-size: 3.2cqw;
  font-weight: 600;
  color: var(--ink-soft);
  font-style: italic;
}
.ms-gap { height: 1.5cqw; }
.ms-line--loud { display: block; }
.ms-big {
  display: inline-block;
  font-size: 7.6cqw;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.025em;
  line-height: 1;
}
.ms-tail {
  display: inline-block;
  font-size: 2.6cqw;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  margin-top: 0.6cqw;
}

/* ───────────────────────────────────────────────────────────────────
   43 · MIXED STATEMENT — "ce qui coûte, c'est de mal cadrer"
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="mixed-statement"] { justify-content: center; }
.mixed-statement-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 6cqw;
  line-height: 1.16;
  color: var(--dark);
  letter-spacing: -0.02em;
}
.red-italic {
  font-style: italic;
  color: var(--red);
  font-weight: 600;
  font-size: 1.04em;
}

/* ───────────────────────────────────────────────────────────────────
   45 · PULL QUOTE — NYer editorial
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="pull-quote"] {
  justify-content: center;
  padding: 6cqw 10cqw 5cqw 10cqw;
  position: relative;
}
.pq-decor-l, .pq-decor-r {
  position: absolute;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22cqw;
  line-height: 1;
  color: var(--hairline-soft);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.pq-decor-l { top: 1cqw; left: 2.5cqw; }
.pq-decor-r { bottom: -3cqw; right: 2.5cqw; }
.pq-rule-top {
  width: 14cqw;
  height: 0.15cqw;
  background: var(--red);
  margin-bottom: 2cqw;
  position: relative;
  z-index: 1;
}
.pq-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.9cqw;
  line-height: 1.42;
  color: var(--dark);
  font-weight: 400;
  position: relative;
  z-index: 1;
  max-width: 92%;
}
.pq-rule-bot {
  width: 14cqw;
  height: 0.08cqw;
  background: var(--hairline);
  margin: 2.2cqw 0 1.2cqw;
  position: relative;
  z-index: 1;
}
.pq-attr {
  position: relative;
  z-index: 1;
}
.pq-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6cqw;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pq-role {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85cqw;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.4cqw;
}

/* ───────────────────────────────────────────────────────────────────
   47 · QUESTION FINALE
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="question"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.q-rule {
  width: 6cqw;
  height: 0.12cqw;
  background: var(--red);
  margin: 0 auto 3cqw;
}
.q-rule--bot { margin: 3cqw auto 0; background: var(--hairline); }
.q-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.2cqw;
  line-height: 1.2;
  color: var(--dark);
  letter-spacing: -0.018em;
  max-width: 84%;
}

/* ───────────────────────────────────────────────────────────────────
   50 · PERSONAL STAT — 5 mois sans Figma
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="personal-stat"] {
  justify-content: center;
  align-items: flex-start;
}
.ps-eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2.2cqw;
}
.ps-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.4cqw;
  line-height: 1.1;
  color: var(--dark);
  letter-spacing: -0.018em;
  max-width: 96%;
  margin-bottom: 2cqw;
}
.ps-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4cqw;
  color: var(--muted);
}

/* ───────────────────────────────────────────────────────────────────
   54 · PRINCIPLES — 3 livrables
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="principles"] {
  justify-content: center;
  padding: 6.5cqw 6.5cqw 6cqw;
}
.pr-header {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  margin-bottom: 3.6cqw;
}
.pr-header-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
}
.pr-header-rule {
  flex: 1;
  height: 0.08cqw;
  background: var(--hairline);
}
.pr-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
}
.pr-item {
  display: grid;
  grid-template-columns: 4cqw 1fr;
  gap: 1.8cqw;
  align-items: baseline;
}
.pr-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.2em;
  color: var(--red);
  border-top: 0.08cqw solid var(--red);
  padding-top: 0.6cqw;
}
.pr-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 3cqw;
  line-height: 1.18;
  color: var(--dark);
  letter-spacing: -0.012em;
}

/* ───────────────────────────────────────────────────────────────────
   57 · WHISPER — Kenya Hara silence
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="whisper"] {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 6.5cqw 6.5cqw 6cqw;
}
.whisper-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45cqw;
  color: var(--muted);
  font-weight: 400;
}

/* ───────────────────────────────────────────────────────────────────
   58 · APP LOUD — J'ai fait l'app.
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="app-loud"] {
  justify-content: center;
  background: var(--cream);
}
.app-loud-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14.5cqw;
  line-height: 0.92;
  color: var(--dark);
  letter-spacing: -0.038em;
  position: relative;
}
.app-loud-text::after {
  content: '';
  position: absolute;
  bottom: -2cqw;
  left: 0;
  width: 8cqw;
  height: 0.4cqw;
  background: var(--red);
}

/* ───────────────────────────────────────────────────────────────────
   59 · APP CLOSING
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="app-closing"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ac-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95cqw;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2cqw;
}
.ac-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 8.2cqw;
  line-height: 1;
  color: var(--dark);
  letter-spacing: -0.025em;
}
.fc-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2cqw;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 1.8cqw;
  max-width: 70%;
  text-align: center;
}
.fc-sub {
  font-family: var(--serif);
  font-size: 1.9cqw;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 1.8cqw;
  max-width: 75%;
  text-align: center;
}
.ac-stores {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.2cqw;
  letter-spacing: 0.22em;
  color: var(--ink);
  margin-top: 2.4cqw;
  text-transform: none;
}
.ac-rule {
  width: 12cqw;
  height: 0.1cqw;
  background: var(--hairline);
  margin: 3.6cqw 0 2cqw;
}
.ac-thanks {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6cqw;
  color: var(--ink-soft);
}
.ac-credit {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95cqw;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-top: 2cqw;
  text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────────────
   60+ · PIVOT / UX MANAGER / OUVERTURE / AXES / CONCLUSION
   ─────────────────────────────────────────────────────────────────── */

/* 61 · APP NAME — UX Manager reveal (visual rhyme with app-loud) */
.slide[data-type="app-name"] {
  justify-content: center;
  align-items: flex-start;
}
.app-name-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12cqw;
  line-height: 0.94;
  color: var(--dark);
  letter-spacing: -0.034em;
  position: relative;
}
.app-name-text::after {
  content: '';
  display: block;
  width: 8cqw;
  height: 0.38cqw;
  background: var(--red);
  margin-top: 1.6cqw;
}

/* 62 · STATS LIST — UX Manager chiffres (NYer almanac feel) */
.slide[data-type="stats-list"] {
  justify-content: center;
  align-items: flex-start;
}
.sl-eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 3.2cqw;
}
.sl-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.sl-item {
  display: grid;
  grid-template-columns: 11cqw 1fr;
  align-items: baseline;
  gap: 2.5cqw;
  border-top: 0.08cqw solid var(--hairline);
  padding: 1.8cqw 0;
}
.sl-item:last-child { border-bottom: 0.08cqw solid var(--hairline); }
.sl-number {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 4.8cqw;
  line-height: 1;
  color: var(--dark);
  letter-spacing: -0.022em;
  font-feature-settings: 'lnum';
}
.sl-number--text {
  font-size: 2.4cqw;
  letter-spacing: 0.05em;
  color: var(--red);
  font-weight: 700;
  align-self: center;
}
.sl-label {
  font-family: var(--serif);
  font-size: 2.4cqw;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
}

/* 62 · GIFT — « Pour vous. » (P4 — une seule hairline en bas) */
.slide[data-type="gift"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.gift-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 12cqw;
  color: var(--red);
  letter-spacing: -0.025em;
  line-height: 1;
  position: relative;
}
.gift-text::after {
  content: '';
  display: block;
  width: 5cqw;
  height: 0.15cqw;
  background: var(--red);
  margin: 2.5cqw auto 0;
}

/* 13 · PORTRAIT — éditorial NYer pour intro speaker */
.slide[data-type="portrait"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5cqw;
  padding: 7cqw;
}
.portrait-photo {
  width: 22cqw;
  height: 22cqw;
  object-fit: cover;
  filter: grayscale(.95) contrast(1.08) brightness(1.02);
  box-shadow: 0 4px 22px -6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
}
.portrait-text {
  display: flex;
  flex-direction: column;
  max-width: 40cqw;
}
.portrait-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 6.4cqw;
  line-height: 0.95;
  color: var(--dark);
  letter-spacing: -0.022em;
  margin-bottom: 1.4cqw;
}
.portrait-rule {
  width: 5cqw;
  height: 0.12cqw;
  background: var(--red);
  margin-bottom: 1.8cqw;
}
.portrait-bio {
  font-family: var(--serif);
  font-size: 1.9cqw;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.6cqw;
}
.portrait-tag {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85cqw;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.8cqw;
}

/* 14 · RIFTMANAGER VISUAL (G4 — planter le décor, pas un climax) */
.slide[data-type="riftmanager-visual"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.rmv-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2cqw;
  color: var(--muted);
  margin-bottom: 1.4cqw;
}
.rmv-rule {
  width: 5cqw;
  height: 0.1cqw;
  background: var(--hairline);
  margin: 0 auto 2.4cqw;
}
.rmv-image {
  width: 55%;
  max-width: 55cqw;
  height: auto;
  box-shadow: 0 8px 36px -8px rgba(0,0,0,0.32);
}

/* 18 · CARD GRID (G4 — 4 cartes côte à côte) */
.slide[data-type="card-grid"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cg-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2cqw;
  color: var(--muted);
  margin-bottom: 1.4cqw;
}
.cg-rule {
  width: 5cqw;
  height: 0.1cqw;
  background: var(--hairline);
  margin: 0 auto 3cqw;
}
.cg-images {
  display: flex;
  gap: 2cqw;
  align-items: center;
  justify-content: center;
  margin-bottom: 3cqw;
}
.cg-images img {
  width: 14cqw;
  height: auto;
  box-shadow: 0 6px 22px -4px rgba(0,0,0,0.25);
  border-radius: 0.6cqw;
}
.cg-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.8cqw;
  color: var(--ink-soft);
  text-align: center;
  max-width: 60%;
  margin: 0 auto;
  line-height: 1.4;
}

/* 56-58 · GESTE (G3 — 3 slides de gestes à renforcer, une par slide) */
.slide[data-type="geste"] {
  justify-content: center;
  align-items: flex-start;
}
.geste-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1cqw;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
}
.geste-rule {
  width: 14cqw;
  height: 0.1cqw;
  background: var(--hairline);
  margin: 1.6cqw 0 2.8cqw;
}
.geste-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 6.2cqw;
  line-height: 1.06;
  color: var(--dark);
  letter-spacing: -0.022em;
  margin-bottom: 1.8cqw;
}
.geste-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6cqw;
  line-height: 1.3;
  color: var(--muted);
  margin-bottom: 3.2cqw;
}
.geste-example {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7cqw;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 70%;
  border-left: 0.18cqw solid var(--hairline);
  padding-left: 1.4cqw;
}
.geste-example em {
  color: var(--ink-soft);
  font-style: italic;
}

/* 64 · OPENING CHAPTER — Chapter break for ouverture */
.slide[data-type="opening-chapter"] {
  justify-content: center;
  align-items: flex-start;
  background: var(--cream-deep);
}
.opening-corner {
  position: absolute;
  top: 4.5cqw;
  right: 6.5cqw;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 10cqw;
  line-height: 0.88;
  color: var(--hairline);
  z-index: 1;
}
.opening-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2cqw;
  color: var(--muted);
  margin-bottom: 1.6cqw;
  z-index: 2;
  position: relative;
}
.opening-rule {
  width: 20cqw;
  height: 0.12cqw;
  background: var(--red);
  margin-bottom: 2cqw;
  position: relative;
  z-index: 2;
}
.opening-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5.2cqw;
  line-height: 1.14;
  color: var(--dark);
  letter-spacing: -0.018em;
  max-width: 92%;
  position: relative;
  z-index: 2;
}

/* 65-67 · AXIS — 3 axes d'ouverture */
.slide[data-type="axis"] {
  justify-content: center;
  align-items: flex-start;
}
.axis-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95cqw;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.8cqw;
  padding-bottom: 1.2cqw;
  border-bottom: 0.08cqw solid var(--hairline);
  width: 100%;
  max-width: 88%;
}
.axis-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 5cqw;
  line-height: 1.12;
  color: var(--dark);
  letter-spacing: -0.018em;
  margin-bottom: 2.4cqw;
  max-width: 92%;
}
.axis-body {
  font-family: var(--serif);
  font-size: 2.4cqw;
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 78%;
  font-weight: 400;
}
.axis-body em {
  color: var(--red);
  font-style: italic;
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────
   Reveal animation — staggered on .active
   ─────────────────────────────────────────────────────────────────── */
.slide.active > * {
  animation: revealUp .65s var(--ease-out) backwards;
}
.slide.active > *:nth-child(1) { animation-delay: .05s; }
.slide.active > *:nth-child(2) { animation-delay: .15s; }
.slide.active > *:nth-child(3) { animation-delay: .25s; }
.slide.active > *:nth-child(4) { animation-delay: .35s; }
.slide.active > *:nth-child(5) { animation-delay: .45s; }
.slide.active > *:nth-child(6) { animation-delay: .55s; }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Photo elements should never translate or fade */
.slide[data-type="cover"] > *,
.slide[data-type="photo-overlay"] > * {
  animation: none !important;
}
.slide.active[data-type="cover"] > .cover-rule,
.slide.active[data-type="cover"] > .cover-eyebrow,
.slide.active[data-type="cover"] > .cover-title,
.slide.active[data-type="cover"] > .cover-meta {
  animation: revealUp .9s var(--ease-out) backwards;
}
.slide.active[data-type="cover"] > .cover-rule { animation-delay: .25s; }
.slide.active[data-type="cover"] > .cover-eyebrow { animation-delay: .35s; }
.slide.active[data-type="cover"] > .cover-title { animation-delay: .55s; }
.slide.active[data-type="cover"] > .cover-meta { animation-delay: .85s; }

.slide.active[data-type="photo-overlay"] > .photo-eyebrow,
.slide.active[data-type="photo-overlay"] > .photo-text { animation: revealUp .7s var(--ease-out) backwards; }
.slide.active[data-type="photo-overlay"] > .photo-eyebrow { animation-delay: .3s; }
.slide.active[data-type="photo-overlay"] > .photo-text { animation-delay: .5s; }

/* Drop cap — rapide, sans clipping */
.slide.active[data-type="drop-cap"] .dc-cap {
  animation: dropCapIn .45s var(--ease-out) backwards;
  animation-delay: .05s;
}
@keyframes dropCapIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide.active[data-type="drop-cap"] .dc-body {
  animation: revealUp .45s var(--ease-out) backwards;
  animation-delay: .25s;
}
.slide.active[data-type="drop-cap"] .dc-wrap { animation: none; }

/* Giant number — special scale-in */
.slide.active[data-type="giant-number"] .giant-num--solid {
  animation: giantIn 1.2s var(--ease-out) backwards;
  animation-delay: .3s;
}
.slide.active[data-type="giant-number"] .giant-num--ghost {
  animation: ghostIn 1.4s var(--ease-out) backwards;
  animation-delay: .45s;
}
@keyframes giantIn {
  from { opacity: 0; transform: translateY(15px) scale(.97); letter-spacing: 0; }
  to { opacity: 1; transform: translateY(0) scale(1); letter-spacing: -0.05em; }
}
@keyframes ghostIn {
  from { opacity: 0; transform: translate(0, 0); }
  to { opacity: 1; transform: translate(0.6cqw, -0.6cqw); }
}

/* App loud / App name — dramatic */
.slide.active[data-type="app-loud"] .app-loud-text,
.slide.active[data-type="app-name"] .app-name-text {
  animation: appLoudIn 1s var(--ease-out) backwards;
  animation-delay: .2s;
}
@keyframes appLoudIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gift — Pour vous : dramatic entrance */
.slide.active[data-type="gift"] .gift-text {
  animation: giftIn 1.1s var(--ease-out) backwards;
  animation-delay: .25s;
}
@keyframes giftIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stats list — stagger each item */
.slide.active[data-type="stats-list"] .sl-item {
  animation: revealUp .55s var(--ease-out) backwards;
}
.slide.active[data-type="stats-list"] .sl-item:nth-child(1) { animation-delay: .25s; }
.slide.active[data-type="stats-list"] .sl-item:nth-child(2) { animation-delay: .4s; }
.slide.active[data-type="stats-list"] .sl-item:nth-child(3) { animation-delay: .55s; }
.slide.active[data-type="stats-list"] .sl-item:nth-child(4) { animation-delay: .7s; }

/* Dark climax — fade entire bg */
.slide.active[data-type="dark-climax"] {
  animation: darkFade .8s var(--ease) backwards;
}
@keyframes darkFade {
  from { background: var(--cream); }
  to { background: var(--dark-bg); }
}

/* ───────────────────────────────────────────────────────────────────
   Overview / grid mode
   ─────────────────────────────────────────────────────────────────── */
.overview {
  position: fixed;
  inset: 0;
  background: rgba(8,8,10,.94);
  z-index: 100;
  overflow-y: auto;
  padding: 4vh 4vw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2vw;
}
.overview[hidden] { display: none; }
.overview-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 — padding-bottom hack pour compat Safari grid */
  height: 0;
  background: var(--cream);
  overflow: hidden;
  cursor: pointer;
  outline: 1px solid rgba(255,255,255,.1);
  transition: outline-color .2s, transform .2s;
}
.overview-thumb:hover { outline-color: var(--red); transform: translateY(-2px); }
.overview-thumb.current { outline: 2px solid var(--red); }
.overview-thumb-num {
  position: absolute;
  bottom: 0.3vw;
  right: 0.5vw;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.7vw;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* ───────────────────────────────────────────────────────────────────
   Help overlay
   ─────────────────────────────────────────────────────────────────── */
.help {
  position: fixed;
  bottom: 1.5vw;
  left: 1.5vw;
  z-index: 50;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.help.visible { opacity: 1; }
.help-box {
  background: rgba(15, 15, 16, .92);
  color: var(--cream);
  padding: 1.2vw 1.4vw;
  font-family: var(--sans);
  font-size: 0.78vw;
  border-radius: 0;
  border-left: 2px solid var(--red);
  backdrop-filter: blur(8px);
}
.help-title {
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.8vw;
  color: var(--red);
  font-size: 0.7vw;
}
.help-row { margin: 0.25vw 0; font-weight: 400; letter-spacing: 0.04em; }
kbd {
  display: inline-block;
  font-family: var(--mono);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  padding: 0.1vw 0.4vw;
  margin: 0 0.15vw;
  font-size: 0.7vw;
  letter-spacing: 0;
}

/* ───────────────────────────────────────────────────────────────────
   Print stylesheet — export to PDF
   ─────────────────────────────────────────────────────────────────── */
@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  html, body { background: white; overflow: visible; height: auto; }
  .deck { display: block; width: 100%; height: auto; }
  .stage {
    width: 13.333in;
    height: 7.5in;
    aspect-ratio: unset;
    box-shadow: none;
    page-break-after: always;
    page-break-inside: avoid;
    position: relative;
    container-type: inline-size;
  }
  /* Print one stage per slide */
  .slide {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    page-break-after: always;
    height: 7.5in;
    width: 13.333in;
  }
  .slide * { animation: none !important; }
  .overview, .help { display: none !important; }
  .chrome { display: none; }
}

/* ───────────────────────────────────────────────────────────────────
   V15 ADDITIONS — Cover full title, image templates, doute bare
   ─────────────────────────────────────────────────────────────────── */

/* Cover : bigger readable subtitle (full title visibility) */
.cover-title--smaller {
  font-size: 5.4cqw;
  line-height: 1.02;
}
/* Cover : tail (subtitle attached to title block, same vertical column) */
.cover-title-tail {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.5cqw;
  line-height: 1.18;
  color: rgba(255,255,255,.95);
  letter-spacing: -0.005em;
  margin-top: 1.8cqw;
  max-width: 80%;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.slide[data-type="cover"] .cover-title {
  bottom: 16cqw;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
/* Stronger darkening of cover photo for white-on-image legibility */
.slide[data-type="cover"] .photo {
  filter: saturate(.55) contrast(1.06) brightness(.52);
}
.slide[data-type="cover"] .cover-veil {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.32) 28%,
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,.85) 100%);
}
.cover-title-block {
  position: absolute;
  left: 4.5cqw;
  right: 4.5cqw;
  bottom: 12cqw;
  color: var(--white);
  font-feature-settings: 'kern', 'liga', 'ss01';
}
.cover-title-block .cover-title-main {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 6.4cqw;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.cover-title-block .cover-title-colon {
  display: inline-block;
  width: 4cqw;
  height: 0.18cqw;
  background: rgba(255,255,255,.85);
  vertical-align: middle;
  margin: 0 0 1.4cqw 0;
}
.cover-title-block .cover-title-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.4cqw;
  line-height: 1.18;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.005em;
  margin-top: 1.1cqw;
}

/* Doute bare — variant without roman numeral */
.slide[data-type="doute-bare"] {
  justify-content: center;
  align-items: flex-start;
}
.doute-bare-rule {
  width: 9cqw;
  height: 0.12cqw;
  background: var(--red);
  margin-bottom: 2.4cqw;
}
.doute-bare-text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 4.2cqw;
  line-height: 1.18;
  color: var(--dark);
  letter-spacing: -0.018em;
  max-width: 78%;
}
.doute-bare-text em {
  color: var(--red);
  font-weight: 600;
  font-style: italic;
}

/* Image full — a single image taking most of the slide */
.slide[data-type="image-full"] {
  justify-content: center;
  align-items: center;
  padding: 4cqw;
}
.image-full-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
}
.image-full-img {
  max-width: 92%;
  max-height: 78%;
  object-fit: contain;
  box-shadow: 0 12px 36px -8px rgba(0,0,0,0.28);
  border-radius: 0.6cqw;
}
.image-full-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.8cqw;
  color: var(--ink-soft);
  text-align: center;
  max-width: 75%;
}

/* Image caption — image + lower text */
.slide[data-type="image-caption"] {
  justify-content: center;
  align-items: center;
  padding: 3cqw 3cqw 4cqw;
  gap: 1.4cqw;
}
.image-caption-img {
  max-width: 64%;
  max-height: 62%;
  object-fit: contain;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.25);
  border-radius: 0.6cqw;
}
.image-caption-text {
  font-family: var(--serif);
  font-size: 2.4cqw;
  line-height: 1.22;
  color: var(--dark);
  text-align: center;
  max-width: 78%;
}
.image-caption-text em {
  color: var(--red);
  font-style: italic;
  font-weight: 600;
}

/* Card-grid extension: phone screenshots wider variant */
.cg-images--3 img { width: 14cqw; }
.cg-images--2 img { width: 18cqw; }
.cg-images--wide img { max-height: 60cqh; width: auto; }
.cg-text-pre {
  font-family: var(--serif);
  font-size: 2.6cqw;
  line-height: 1.22;
  color: var(--dark);
  text-align: center;
  margin-bottom: 2.4cqw;
}
.cg-text-pre em {
  color: var(--red);
  font-style: italic;
  font-weight: 600;
}

/* Climax list — slides 51, 54, 55, 76, 77, 78 with multi-line lists */
.climax-list {
  font-family: var(--serif);
  font-size: 2.4cqw;
  line-height: 1.48;
  color: var(--dark);
  text-align: center;
  margin-top: 1.6cqw;
}
.climax-list em {
  color: var(--red);
  font-style: italic;
  font-weight: 600;
}
.climax-list--left {
  text-align: left;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}

/* Overview thumbnail stage — class-based for Safari container-query compatibility */
.overview-thumb-stage {
  position: absolute;
  inset: 0;
  background: var(--cream);
  container-type: inline-size;
  overflow: hidden;
  pointer-events: none;
}
.overview-thumb-stage > .slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
.overview-thumb-stage > .slide * {
  animation: none !important;
  transition: none !important;
}

/* ───────────────────────────────────────────────────────────────────
   TRIPLE-PILLAR — three keywords with hairline separators
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="triple-pillar"] {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2.2cqw;
}
.tp-setup {
  font-family: var(--serif);
  font-size: 2.6cqw;
  line-height: 1.3;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  font-style: italic;
}
.tp-words {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8cqw;
  margin: 1cqw 0;
}
.tp-word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 5cqw;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tp-sep {
  display: inline-block;
  width: 0.14cqw;
  height: 3.4cqw;
  background: var(--hairline);
}
.tp-payoff {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 3.6cqw;
  color: var(--red);
  letter-spacing: -0.02em;
  margin-top: 1cqw;
}

/* ───────────────────────────────────────────────────────────────────
   INVENTORY — clean editorial list with hairline + payoff
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="inventory"] {
  justify-content: center;
  align-items: center;
}
.inv-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 2.5cqw;
  line-height: 1;
  color: var(--dark);
  letter-spacing: -0.005em;
  max-width: 55cqw;
}
.inv-item {
  padding: 1.1cqw 0;
  border-bottom: 0.08cqw solid var(--hairline);
  text-align: left;
  position: relative;
  padding-left: 2.4cqw;
}
.inv-item:last-child {
  border-bottom: none;
}
.inv-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.8cqw;
  height: 0.12cqw;
  background: var(--hairline);
}
.inv-rule {
  width: 6cqw;
  height: 0.16cqw;
  background: var(--hairline);
  margin: 2.6cqw auto 1.6cqw;
}
.inv-rule--red { background: var(--red); }
.inv-payoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.2cqw;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.015em;
  text-align: center;
}
.inv-payoff--accent { color: var(--red); font-style: normal; }

/* ───────────────────────────────────────────────────────────────────
   IMAGE SIZE VARIANTS (slides 6, 73)
   ─────────────────────────────────────────────────────────────────── */
.cg-images--xl-3 { gap: 2cqw; }
.cg-images--xl-3 img { width: 19cqw; }
.cg-images--xl-2 { gap: 2cqw; }
.cg-images--xl-2 img { width: 34cqw; max-width: 34cqw; }

/* ───────────────────────────────────────────────────────────────────
   IMAGE STRIP — flush images, no chrome, no shadow (slide 74)
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="image-strip"] {
  padding: 4cqw;
  justify-content: center;
  align-items: center;
}
.image-strip-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  width: 100%;
}
.image-strip-wrap img {
  width: 28cqw;
  max-height: 78cqh;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* ───────────────────────────────────────────────────────────────────
   TEXT-IMAGE PAIR — editorial 2-col (slides 15, 35)
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="text-image-pair"] {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5cqw;
  padding: 6cqw 7cqw;
}
.tip-text {
  flex: 0 1 40cqw;
  font-family: var(--serif);
  color: var(--dark);
  letter-spacing: -0.005em;
}
.tip-eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1cqw;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.4cqw;
}
.tip-rule {
  width: 6cqw;
  height: 0.12cqw;
  background: var(--hairline);
  margin-bottom: 2.4cqw;
}
.tip-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.2cqw;
  line-height: 1.22;
  color: var(--dark);
  letter-spacing: -0.012em;
}
.tip-headline em {
  color: var(--red);
  font-style: italic;
  font-weight: 700;
}
.tip-images {
  display: flex;
  gap: 2cqw;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tip-images img {
  width: 18cqw;
  height: auto;
  border-radius: 0.6cqw;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,0.28);
}
.tip-images--single img { width: 24cqw; }

/* ───────────────────────────────────────────────────────────────────
   IMAGE CAPTION reversed (text-above-image, slide 59)
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="image-caption"][data-text-position="above"] {
  flex-direction: column-reverse;
}

/* ───────────────────────────────────────────────────────────────────
   ANNEXES — slide source / chart en fin de deck
   ─────────────────────────────────────────────────────────────────── */
.slide[data-type="annexes"] {
  justify-content: flex-start;
  padding: 5.6cqw 6.5cqw 5.2cqw;
}
.annexes-eyebrow {
  font-family: var(--sans);
  font-size: 0.95cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.annexes-rule {
  width: 4cqw;
  height: 0.12cqw;
  background: var(--red);
  margin: 1cqw 0 2.4cqw;
}
.annexes-body {
  display: flex;
  flex-direction: column;
  gap: 1.8cqw;
}
.annexes-title {
  font-family: var(--serif);
  font-size: 2.8cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.annexes-figure {
  background: #fff;
  padding: 1.4cqw 1.6cqw;
  border: 0.08cqw solid var(--hairline);
  border-radius: 0.4cqw;
}
.annexes-img {
  width: 100%;
  height: auto;
  display: block;
}
.annexes-source {
  font-family: var(--sans);
  font-size: 1.05cqw;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.annexes-source em {
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
}
.annexes-url {
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.92cqw;
  color: var(--muted);
  letter-spacing: -0.01em;
}