/* Styles scopés par slide, via [data-slide="N"].
   On ajoute les blocs un par un, dans l'ordre de construction. */


/* ═══════════════════════════════════════════════════════════
   Slide 1 · Cover (fond noir)
   ═══════════════════════════════════════════════════════════ */

[data-slide="1"] {
  padding-bottom: calc(var(--pad-y) + 40px);
}

[data-slide="1"] .cover__layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding-top: 40px;
}

[data-slide="1"] .cover__eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-inverse);
  opacity: 0.7;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
}

[data-slide="1"] .cover__title {
  font-size: 180px;
  font-weight: var(--fw-extrabold);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink-inverse);
}

[data-slide="1"] .cover__subtitle {
  font-size: 48px;
  font-weight: var(--fw-regular);
  line-height: 1.25;
  color: var(--ink-inverse);
  margin-top: var(--sp-4);
}

[data-slide="1"] .cover__kicker {
  font-size: 26px;
  font-style: italic;
  color: var(--ink-muted-dark);
  margin-top: var(--sp-3);
}

[data-slide="1"] .cover__meta {
  font-family: var(--font-mono);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 20px;
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

[data-slide="1"] .cover__meta span {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}

[data-slide="1"] .cover__meta em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  font-size: 14px;
}

[data-slide="1"] .cover__signature {
  position: absolute;
  bottom: var(--pad-y);
  left: var(--pad-x);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-inverse);
}

[data-slide="1"] .cover__signature strong {
  font-weight: var(--fw-bold);
  display: block;
}

[data-slide="1"] .cover__signature span {
  color: var(--ink-muted-dark);
  font-size: 15px;
  letter-spacing: 0.02em;
}

[data-slide="1"] .cover__spaces {
  position: absolute;
  bottom: var(--pad-y);
  right: var(--pad-x);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  color: var(--ink-inverse);
}

[data-slide="1"] .slide__brand { color: var(--ink-inverse); }
[data-slide="1"] .slide__brand span:last-child { color: var(--accent-clay); }


/* Crawlers pixel art (cover) — 3 iterations qui traversent le fond en boucle */

/* ═══════════════════════════════════════════════════════════
   Crawlers pixel art (cover) — 3 iterations avec animations différentes.
   Couche décorative en arrière-plan, ne doit pas entrer en conflit
   avec la signature placée à bottom:60px.
   ═══════════════════════════════════════════════════════════ */

[data-slide="1"] .crawlers, [data-slide="60"] .crawlers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 66px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

[data-slide="1"] .crawler, [data-slide="60"] .crawler {
  position: absolute;
  bottom: 0;
  shape-rendering: crispEdges;
  image-rendering: pixelated;
}

[data-slide="1"] .crawler__body,
[data-slide="1"] .crawler__leg,
[data-slide="60"] .crawler__body,
[data-slide="60"] .crawler__leg { fill: var(--accent-clay); }
[data-slide="1"] .crawler__eye,
[data-slide="60"] .crawler__eye { fill: #0F0F0F; }

[data-slide="1"] .crawler--lg,
[data-slide="60"] .crawler--lg { width: 64px; height: 64px; }

[data-slide="1"] .crawler--md,
[data-slide="60"] .crawler--md {
  width: 50px; height: 50px; opacity: 0.92;
}
[data-slide="1"] .crawler--md .crawler__body,
[data-slide="1"] .crawler--md .crawler__leg,
[data-slide="60"] .crawler--md .crawler__body,
[data-slide="60"] .crawler--md .crawler__leg {
  fill: var(--accent-bright);
}

[data-slide="1"] .crawler--sm,
[data-slide="60"] .crawler--sm {
  width: 38px; height: 38px; opacity: 0.7;
}

/* ——— Animation 1 · walk (grand) — pattes alternées ——— */

[data-slide="1"] .crawler--walk,
[data-slide="60"] .crawler--walk {
  animation: crawl-walk 28s linear infinite;
  animation-delay: -3s;
}

[data-slide="1"] .crawler--walk .crawler__leg,
[data-slide="60"] .crawler--walk .crawler__leg {
  transform-box: fill-box;
  transform-origin: top center;
}

[data-slide="1"] .crawler--walk .crawler__leg--a,
[data-slide="60"] .crawler--walk .crawler__leg--a {
  animation: leg-step 0.45s steps(2) infinite;
}
[data-slide="1"] .crawler--walk .crawler__leg--b,
[data-slide="60"] .crawler--walk .crawler__leg--b {
  animation: leg-step 0.45s steps(2) -0.225s infinite;
}

@keyframes leg-step {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18%); }
}

/* ——— Animation 2 · hop (medium) — corps qui bondit ——— */

[data-slide="1"] .crawler--hop,
[data-slide="60"] .crawler--hop {
  animation: crawl-walk-hop 19s linear infinite;
  animation-delay: -10s;
}

@keyframes crawl-walk-hop {
  0%   { transform: translateX(-50px) translateY(0); }
  20%  { transform: translateX(400px)  translateY(-14px); }
  40%  { transform: translateX(800px)  translateY(0); }
  60%  { transform: translateX(1200px) translateY(-14px); }
  80%  { transform: translateX(1600px) translateY(0); }
  100% { transform: translateX(2000px) translateY(-10px); }
}

/* ——— Animation 3 · glide (petit) — translation fluide, sans bob ——— */

[data-slide="1"] .crawler--glide,
[data-slide="60"] .crawler--glide {
  animation: crawl-walk 13s linear infinite;
  animation-delay: -5s;
}

/* ——— Walk-cycle base (grand + petit) ——— */

@keyframes crawl-walk {
  from { transform: translateX(-50px); }
  to   { transform: translateX(2000px); }
}

/* ——— Clignement d'yeux (décalé par instance) ——— */

[data-slide="1"] .crawler__eye,
[data-slide="60"] .crawler__eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: crawl-blink 5.5s infinite;
}

[data-slide="1"] .crawler--md .crawler__eye,
[data-slide="60"] .crawler--md .crawler__eye { animation-delay: -1.8s; }
[data-slide="1"] .crawler--sm .crawler__eye,
[data-slide="60"] .crawler--sm .crawler__eye { animation-delay: -3.4s; }

@keyframes crawl-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96%, 98%      { transform: scaleY(0.12); }
}

/* Mobile : crawlers plus petits + translations en vw */
@media (max-width: 900px) {
  [data-slide="1"] .crawlers,
  [data-slide="60"] .crawlers {
    bottom: 6px;
    height: 32px;
  }
  [data-slide="1"] .crawler--lg,
  [data-slide="60"] .crawler--lg { width: 28px; height: 28px; }
  [data-slide="1"] .crawler--md,
  [data-slide="60"] .crawler--md { width: 22px; height: 22px; }
  [data-slide="1"] .crawler--sm,
  [data-slide="60"] .crawler--sm { width: 18px; height: 18px; }

  @keyframes crawl-walk {
    from { transform: translateX(-40px); }
    to   { transform: translateX(110vw); }
  }
  @keyframes crawl-walk-hop {
    0%   { transform: translateX(-40px) translateY(0); }
    25%  { transform: translateX(30vw)  translateY(-10px); }
    50%  { transform: translateX(60vw)  translateY(0); }
    75%  { transform: translateX(90vw)  translateY(-10px); }
    100% { transform: translateX(110vw) translateY(0); }
  }
}


/* Vibe loop : prompts Claude Code qui se tapent en continu sur la cover */

[data-slide="1"] .vibe-loop {
  margin-top: 72px;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 1400px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.5);
  min-height: 40px;
}

[data-slide="1"] .vibe-loop__prompt,
[data-slide="1"] .vibe-loop__user {
  color: var(--code-green);
  font-weight: var(--fw-bold);
  opacity: 0.85;
  flex-shrink: 0;
}

[data-slide="1"] .vibe-loop__user {
  opacity: 0.7;
}

[data-slide="1"] .vibe-loop__chev {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  margin: 0 2px;
  flex-shrink: 0;
}

[data-slide="1"] .vibe-loop__text {
  color: rgba(255, 255, 255, 0.65);
  min-height: 1em;
  font-style: italic;
}

[data-slide="1"] .vibe-loop__cursor {
  color: var(--accent-bright);
  font-weight: var(--fw-bold);
  animation: vibe-blink 0.9s steps(2, end) infinite;
  margin-left: -4px;
}

@keyframes vibe-blink {
  0%, 50%  { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════
   Slide 2 · Qui vous parle — Sacha Blaise + Procab Studio
   ═══════════════════════════════════════════════════════════ */

[data-slide="2"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: center;
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 80px;
  align-items: center;
}

.speaker-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  background: var(--neutral);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.speaker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.speaker-photo__logo {
  position: absolute;
  bottom: 20px;
  left: 22px;
  background: var(--bg-black);
  color: var(--ink-inverse);
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: var(--fw-bold);
  border-radius: 3px;
}

.speaker-intro {
  max-width: 1000px;
}

.speaker-intro .slide__title {
  font-size: 108px;
  font-weight: var(--fw-extrabold);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  margin-bottom: 18px;
}

.speaker-intro__role {
  font-size: 24px;
  color: var(--ink-muted);
  margin-bottom: 40px;
  line-height: 1.4;
}

.speaker-intro__role strong {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}

.speaker-intro__bio {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 48px;
  max-width: 900px;
}

.speaker-intro__bio strong {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

/* Bloc références clients (entre la bio et les liens) */

.speaker-clients {
  margin-bottom: 36px;
  padding: 20px 0;
  border-top: 1px solid var(--border-color-light);
  border-bottom: 1px solid var(--border-color-light);
}

.speaker-clients__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.speaker-clients__row {
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
}

.client-mark {
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: 0.05em;
  font-size: 20px;
  line-height: 1;
  opacity: 0.85;
}

.client-mark--porsche {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.28em;
  font-size: 18px;
  text-transform: uppercase;
  color: #000;
}

.client-mark--immobilier {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.client-mark--immobilier span {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}

.client-mark--more {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.8;
}

.client-mark--more span {
  font-weight: var(--fw-bold);
  font-style: normal;
  color: var(--ink);
  text-transform: lowercase;
}


.speaker-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.speaker-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 22px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: border-color 160ms, background 160ms, transform 160ms;
}

.speaker-link:hover {
  border-color: var(--accent-clay);
  background: rgba(217, 119, 87, 0.05);
  transform: translateY(-2px);
}

.speaker-link__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
}

.speaker-link__url {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  font-weight: var(--fw-medium);
}


/* ═══════════════════════════════════════════════════════════
   Stubs des slides non encore peuplées
   ═══════════════════════════════════════════════════════════ */

.slide--stub .slide__body {
  align-items: center;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   Slide 2 · Question numérotée (POUR COMMENCER)
   ═══════════════════════════════════════════════════════════ */

[data-slide="4"] .slide__body {
  padding-top: 140px;
  padding-bottom: 100px;
  justify-content: flex-start;
}

[data-slide="4"] .slide__title {
  font-size: 96px;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-extrabold);
  margin-bottom: 140px;
  max-width: 1500px;
}

.num-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-left: 0;
}

.num-list li {
  display: flex;
  align-items: baseline;
  gap: 64px;
}

.num-list__num {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  color: var(--accent-clay);
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 120px;
  font-feature-settings: 'tnum';
}

.num-list__text {
  font-size: 40px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════
   Slide 41 · Quiz (UN DERNIER QUIZ)
   ═══════════════════════════════════════════════════════════ */

[data-slide="56"] .slide__body {
  padding-top: 120px;
  padding-bottom: 100px;
  justify-content: flex-start;
}

[data-slide="56"] .slide__title {
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-extrabold);
  margin-bottom: 56px;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 80px;
}

.quiz-option {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  background: rgba(255, 255, 255, 0.35);
}

.quiz-option__letter {
  font-size: 56px;
  font-weight: var(--fw-extrabold);
  color: var(--accent-clay);
  line-height: 1;
  letter-spacing: -0.02em;
}

.quiz-option__text {
  font-size: 26px;
  font-weight: var(--fw-regular);
  text-align: center;
  color: var(--ink);
  line-height: 1.3;
}

.glossary {
  margin-top: auto;
}

.glossary__eyebrow {
  font-size: 13px;
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.glossary__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.glossary__row {
  display: flex;
  gap: 12px;
  font-size: 19px;
  line-height: 1.55;
  align-items: baseline;
}

.glossary__row dt {
  font-weight: var(--fw-bold);
  min-width: 56px;
  color: var(--ink);
}

.glossary__row dd {
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════
   Slide 57 · Lexique 4 colonnes
   ═══════════════════════════════════════════════════════════ */

.lexicon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 40px;
  margin-top: 32px;
  flex: 1;
}

.lexicon__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lexicon__cat {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--accent-clay);
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(217, 119, 87, 0.3);
}

.lexicon__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.lexicon__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}

.lexicon__row dt {
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-size: 14px;
}

.lexicon__row dd {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.lexicon__row dd code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(217, 119, 87, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent-clay);
}

@media (max-width: 900px) {
  .lexicon {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Chapter divider (slides 7, 11, 15)
   Exception assumée : gradient orange → magenta → violet.
   ═══════════════════════════════════════════════════════════ */

.slide--chapter {
  background: var(--gradient-chapter);
  background-size: 180% 180%;
  background-position: 50% 50%;
  color: var(--ink-inverse);
  overflow: hidden;
}

.slide--chapter .slide__brand,
.slide--chapter .slide__brand span:last-child {
  color: var(--ink-inverse);
}

.slide--chapter .chapter__layout {
  margin-top: auto;
  padding-bottom: 40px;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.slide--chapter .chapter__eyebrow {
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  font-weight: var(--fw-medium);
  opacity: 0.95;
  margin-bottom: 56px;
}

.slide--chapter .chapter__number {
  font-size: 200px;
  font-weight: var(--fw-extrabold);
  color: var(--ink-inverse);
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  font-feature-settings: 'tnum';
}

.slide--chapter .chapter__title {
  font-size: 104px;
  font-weight: var(--fw-extrabold);
  line-height: 1.02;
  color: var(--ink-inverse);
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}

.slide--chapter .chapter__kicker {
  font-size: 28px;
  font-style: italic;
  color: var(--ink-inverse);
  opacity: 0.92;
  font-weight: var(--fw-regular);
}

/* Illustration décorative sur un chapter divider (ex. slide 13 : cookie + crawler) */
.slide--chapter .chapter__illustration {
  position: absolute;
  top: 100px;
  right: 80px;
  width: 420px;
  height: auto;
  opacity: 0.85;
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;
}

/* Scène cookie + crawler (slide 13) */
.cookie-scene {
  position: absolute;
  top: 120px;
  right: 120px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 0;
  pointer-events: none;
}

.cookie-scene__cookie {
  width: 180px;
  height: auto;
  filter: invert(1) brightness(2);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.cookie-scene__crawler {
  width: 64px;
  height: 64px;
  shape-rendering: crispEdges;
}

.cookie-scene__crawler .crawler__body,
.cookie-scene__crawler .crawler__leg {
  fill: var(--ink-inverse);
  opacity: 0.85;
}

.cookie-scene__crawler .crawler__eye {
  fill: #0F0F0F;
}

.cookie-scene__crawler .crawler__leg--a {
  transform-box: fill-box;
  animation: leg-step 0.4s steps(2) infinite;
}

.cookie-scene__crawler .crawler__leg--b {
  transform-box: fill-box;
  animation: leg-step 0.4s steps(2) -0.2s infinite;
}


/* ═══════════════════════════════════════════════════════════
   Slide 14 · CONFIDENTIALITÉ simplifiée — 3 règles numérotées
   ═══════════════════════════════════════════════════════════ */

[data-slide="20"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="20"] .slide__title {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 56px;
}

.privacy-rules {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 auto;
}

.privacy-rule {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 28px 36px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
  align-items: center;
}

.privacy-rule--accent {
  border-color: var(--accent-clay);
  border-width: 2px;
  padding: 27px 35px;
  background: rgba(217, 119, 87, 0.05);
}

.privacy-rule__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-clay);
  color: var(--ink-inverse);
  font-weight: var(--fw-extrabold);
  font-size: 28px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.privacy-rule--accent .privacy-rule__num {
  background: var(--accent-bright);
}

.privacy-rule__title {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.privacy-rule__desc {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   Slide 15 · BÉNÉFICE MESURABLE — billets qui tombent en plume
   ═══════════════════════════════════════════════════════════ */

.banknotes-rain {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.banknote {
  position: absolute;
  width: 90px;
  top: -100px;
  filter: drop-shadow(0 6px 12px rgba(217, 119, 87, 0.15));
}

.banknote--1 { right: 12%; animation: banknote-fall 9s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 0s; }
.banknote--2 { right: 30%; animation: banknote-fall 11s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 2.5s; }
.banknote--3 { right: 50%; animation: banknote-fall 10s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 5s; }
.banknote--4 { right: 20%; animation: banknote-fall 12s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 7.5s; }

@keyframes banknote-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(-15deg);
    opacity: 0;
  }
  5% {
    opacity: 0.7;
  }
  25% {
    transform: translateY(28vh) translateX(-40px) rotate(25deg);
  }
  50% {
    transform: translateY(55vh) translateX(30px) rotate(-20deg);
  }
  75% {
    transform: translateY(82vh) translateX(-30px) rotate(15deg);
  }
  95% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(110vh) translateX(10px) rotate(0deg);
    opacity: 0;
  }
}


/* ═══════════════════════════════════════════════════════════
   Slide 16 · À QUI ÇA S'ADRESSE — 4 audiences
   ═══════════════════════════════════════════════════════════ */

[data-slide="22"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="22"] .slide__title {
  font-size: 68px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 14px;
}

.audiences-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  flex: 0 0 auto;
  margin-bottom: 24px;
}

.audience-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audience-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.audience-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin: 0 0 6px 0;
}

.audience-card--dark .audience-card__eyebrow {
  color: var(--accent-bright);
}

.audience-card__title {
  font-size: 26px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}

.audience-card__desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 8px 0 0 0;
}

.audience-card--dark .audience-card__desc {
  color: var(--ink-inverse);
  opacity: 0.88;
}


/* ═══════════════════════════════════════════════════════════
   Slide 19 · prompt block copy button
   ═══════════════════════════════════════════════════════════ */

.prompt-block {
  position: relative;
}

.prompt-block__copy {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 16px;
  background: var(--accent-clay);
  border: 0;
  border-radius: 3px;
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: all 160ms;
  letter-spacing: 0.02em;
}

.prompt-block__copy:hover {
  background: var(--accent-bright);
}

.prompt-block__copy.is-copied {
  background: var(--code-green);
  color: var(--bg-black);
}

.prompt-block__copy.is-copied::before { content: '✓ '; }


/* ═══════════════════════════════════════════════════════════
   Slide 21 · plante qui pousse (VUE D'ENSEMBLE)
   ═══════════════════════════════════════════════════════════ */

.cultivate-scene {
  position: absolute;
  top: 80px;
  right: 80px;
  width: 200px;
  height: 260px;
  z-index: 1;
  pointer-events: none;
}

.growing-plant {
  position: absolute;
  top: 40px;
  right: 0;
  width: 110px;
  height: 220px;
  color: var(--accent-clay);
  z-index: 1;
  pointer-events: none;
}

/* Crawler qui arrose · perché au-dessus de la plante */
.cultivate-crawler {
  position: absolute;
  top: 0;
  right: 40px;
  width: 96px;
  height: 88px;
  animation: crawler-sway 3.2s ease-in-out 3.8s infinite;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.cultivate-crawler .water-drop {
  opacity: 0;
  animation: water-fall 1.8s linear 4.2s infinite;
}
.cultivate-crawler .water-drop--1 { animation-delay: 4.2s; }
.cultivate-crawler .water-drop--2 { animation-delay: 4.7s; }
.cultivate-crawler .water-drop--3 { animation-delay: 5.2s; }

@keyframes water-fall {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(80px); }
}

@keyframes crawler-sway {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  50%      { transform: translateX(2px) rotate(1deg); }
}

@media (max-width: 900px) {
  .cultivate-scene { width: 100px; height: 140px; top: 40px; right: 20px; }
  .growing-plant { width: 58px; height: 120px; top: 22px; }
  .cultivate-crawler { width: 52px; height: 46px; right: 20px; }
}

.growing-plant .plant-stem {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: plant-stem-grow 2.5s ease-out 0.6s forwards, plant-sway 4s ease-in-out 3.5s infinite;
  transform-origin: 20px 78px;
}

.growing-plant .plant-leaf {
  opacity: 0;
  transform: scale(0);
  transform-origin: 20px 50px;
}

.growing-plant .plant-leaf--1 {
  transform-origin: 20px 55px;
  animation: plant-leaf-grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s forwards;
}

.growing-plant .plant-leaf--2 {
  transform-origin: 20px 40px;
  animation: plant-leaf-grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s forwards;
}

.growing-plant .plant-leaf--3 {
  transform-origin: 20px 22px;
  animation: plant-leaf-grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s forwards;
}

.growing-plant .plant-bud {
  opacity: 0;
  transform: scale(0);
  transform-origin: 20px 8px;
  animation: plant-bud-grow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.2s forwards, plant-bud-pulse 2.4s ease-in-out 4s infinite;
}

@keyframes plant-stem-grow {
  to { stroke-dashoffset: 0; }
}

@keyframes plant-leaf-grow {
  to { opacity: 1; transform: scale(1); }
}

@keyframes plant-bud-grow {
  to { opacity: 1; transform: scale(1); }
}

@keyframes plant-bud-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes plant-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2deg); }
}


/* ═══════════════════════════════════════════════════════════
   Slide 23 · destination cards — liens + animation float
   ═══════════════════════════════════════════════════════════ */

.destination-card--anim {
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.destination-card--anim:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.destination-card__links {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--fw-bold);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 6px 0;
}

.destination-card__links a {
  color: var(--code-green);
  text-decoration: none;
  transition: color 160ms;
}

.destination-card__links a:hover {
  color: var(--accent-clay);
  text-decoration: underline;
}

.destination-card--dark .destination-card__links a {
  color: var(--code-green);
}

.destination-card--dark .destination-card__links a:hover {
  color: var(--accent-bright);
}

.destination-card__links span {
  color: var(--ink-muted);
  opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════
   Slide 24 · GitHub simplifié — 4 rangées avec dots
   ═══════════════════════════════════════════════════════════ */

[data-slide="30"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="30"] .slide__title {
  font-size: 78px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 56px;
}

.github-simple {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 0 0 auto;
  margin-bottom: 24px;
}

.github-simple__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  padding: 24px 32px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
  align-items: center;
}

.github-simple__row--accent {
  border-color: var(--accent-clay);
  border-width: 2px;
  padding: 23px 31px;
  background: rgba(217, 119, 87, 0.06);
}

.github-simple__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-clay);
  flex-shrink: 0;
  margin: 0 auto;
}

.github-simple__row--accent .github-simple__dot {
  background: var(--accent-bright);
  animation: gh-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes gh-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(252, 117, 12, 0.4); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(252, 117, 12, 0); }
}

.github-simple__title {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.github-simple__desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

.github-simple__desc code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════
   Slide 22 · eco-card animation (float au survol)
   ═══════════════════════════════════════════════════════════ */

.eco-card {
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.eco-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-clay);
}

.eco-card--dark:hover {
  border-color: var(--accent-bright);
}


/* ═══════════════════════════════════════════════════════════
   Slides 11-17 · HERO DÉTAIL (une slide par porte d'entrée)
   ═══════════════════════════════════════════════════════════ */

.slide--hero .slide__body {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  justify-content: stretch;
}

.slide--hero .hero-illustration {
  width: 100%;
  max-width: 780px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Hero visual blocks : remplace les images .png à damier baked-in par du CSS/SVG pur */
.slide--hero .hero-visual {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--bg-cream);
  border: 1.5px solid rgba(217, 119, 87, 0.25);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 320ms, box-shadow 320ms;
}

.slide--hero .hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(217, 119, 87, 0.08), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(252, 117, 12, 0.06), transparent 55%);
  pointer-events: none;
}

.hero-visual__num {
  position: absolute;
  top: 28px;
  left: 40px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  letter-spacing: 0.14em;
  z-index: 2;
}

.hero-visual__num::before { content: "PORTE "; }

.hero-visual__glyph {
  width: 62%;
  height: 62%;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(15, 15, 15, 0.08));
}

.hero-visual__label {
  position: absolute;
  bottom: 28px;
  right: 40px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}

@media (max-width: 900px) {
  .slide--hero .hero-visual { max-width: 280px; }
  .hero-visual__num { top: 12px; left: 14px; font-size: 10px; }
  .hero-visual__label { bottom: 12px; right: 14px; font-size: 10px; }
}

.slide--hero .hero-content { max-width: 720px; }

.slide--hero .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 28px;
}

.hero-desc {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 32px 0;
}

.hero-desc code {
  font-family: var(--font-mono);
  font-size: 18px;
  background: rgba(217, 119, 87, 0.12);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--ink);
}

.hero-cmd {
  background: var(--code-bg);
  border-radius: var(--radius);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hero-cmd code {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--code-green);
  font-weight: var(--fw-bold);
  flex: 1;
  min-width: 200px;
  word-break: break-all;
}

.hero-cmd__copy {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-cmd__copy:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--accent-bright);
}

.hero-cmd__copy.is-copied {
  background: rgba(126, 231, 135, 0.2);
  border-color: var(--code-green);
  color: var(--code-green);
}

.hero-cmd__copy.is-copied::before { content: '✓ '; }

.hero-tag {
  font-size: 15px;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .slide--hero .slide__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .slide--hero .hero-illustration {
    max-width: 280px !important;
  }
  .slide--hero .slide__title {
    font-size: clamp(26px, 7vw, 40px) !important;
  }
  .hero-desc { font-size: 15px !important; margin-bottom: 20px !important; }
  .hero-cmd { padding: 12px 14px !important; }
  .hero-cmd code { font-size: 12px !important; }
  .hero-cmd__copy { font-size: 10px !important; padding: 5px 10px !important; }
  .hero-tag { font-size: 13px !important; }
}


/* Mobile · nouveautés cycle 7 */
@media (max-width: 900px) {
  .growing-plant {
    width: 70px;
    height: 140px;
    top: 60px;
    right: 20px;
  }

  .prompt-block__copy {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  .github-simple__row {
    padding: 16px 20px !important;
    grid-template-columns: 28px 1fr !important;
    gap: 16px !important;
  }
  .github-simple__dot {
    width: 14px !important;
    height: 14px !important;
  }
  .github-simple__title { font-size: 17px !important; }
  .github-simple__desc { font-size: 13px !important; }

  .destination-card__links { font-size: 12px !important; }
}


/* Mobile — salve-review */
@media (max-width: 900px) {
  .privacy-rule {
    padding: 18px 20px !important;
    grid-template-columns: 52px 1fr !important;
    gap: 16px !important;
  }
  .privacy-rule__num {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
  .privacy-rule__title { font-size: 18px !important; }
  .privacy-rule__desc { font-size: 14px !important; }

  .audiences-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }
  .audience-card { padding: 18px 20px !important; }
  .audience-card__title { font-size: 20px !important; }
  .audience-card__desc { font-size: 13px !important; }

  .banknotes-rain { width: 100% !important; opacity: 0.5; }
  .banknote { width: 60px !important; }

  .cookie-scene {
    top: auto;
    bottom: 80px;
    right: 30px;
  }
  .cookie-scene__cookie { width: 100px !important; }
  .cookie-scene__crawler { width: 40px !important; height: 40px !important; }
}


/* ═══════════════════════════════════════════════════════════
   Pattern citation (slides 3 et 43)
   ═══════════════════════════════════════════════════════════ */

.quote-mark {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 200px;
  line-height: 0.55;
  color: var(--accent-clay);
  letter-spacing: -0.12em;
  display: block;
  height: 90px;
  margin-bottom: 24px;
  margin-left: -12px;
}


/* ═══════════════════════════════════════════════════════════
   Slide 3 · Citation d'ouverture
   ═══════════════════════════════════════════════════════════ */

[data-slide="5"] .slide__body {
  padding-top: 140px;
  padding-bottom: 100px;
  justify-content: flex-start;
}

[data-slide="5"] .quote-text {
  font-size: 96px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink-inverse);
  margin-top: 60px;
  margin-bottom: 56px;
  max-width: 1700px;
}

[data-slide="5"] .quote-kicker {
  font-size: 28px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--ink-muted-dark);
  max-width: 1400px;
}

/* Loop infinie : tâches PME que Claude Code peut résoudre */
.tasks-loop {
  margin-top: 56px;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 1500px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.55);
  min-height: 40px;
}

.tasks-loop__prompt,
.tasks-loop__user {
  color: var(--code-green);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.tasks-loop__user { opacity: 0.75; }

.tasks-loop__arrow {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  margin: 0 2px;
  flex-shrink: 0;
}

.tasks-loop__text {
  color: var(--accent-bright);
  min-height: 1em;
  font-weight: var(--fw-bold);
}

.tasks-loop__cursor {
  color: var(--accent-bright);
  font-weight: var(--fw-bold);
  animation: vibe-blink 0.9s steps(2, end) infinite;
  margin-left: -4px;
}


/* ═══════════════════════════════════════════════════════════
   Slide 43 · Clôture
   ═══════════════════════════════════════════════════════════ */

[data-slide="60"] .slide__body {
  padding-top: 120px;
  padding-bottom: 180px;
  justify-content: flex-start;
}

[data-slide="60"] .closing-q1 {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: #B8B8B8;
  margin-top: 32px;
  margin-bottom: 40px;
  max-width: 1500px;
}

[data-slide="60"] .closing-connector {
  font-size: 28px;
  font-style: italic;
  color: var(--ink-muted-dark);
  margin-bottom: 40px;
}

[data-slide="60"] .closing-q2 {
  font-size: 76px;
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-inverse);
  max-width: 1550px;
}

[data-slide="60"] .closing-footer {
  position: absolute;
  bottom: var(--pad-y);
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

[data-slide="60"] .closing-sig strong {
  font-weight: var(--fw-bold);
  color: var(--ink-inverse);
  font-size: 18px;
}

[data-slide="60"] .closing-sig span {
  font-size: 15px;
  color: var(--ink-muted-dark);
  letter-spacing: 0.02em;
}

[data-slide="60"] .closing-thanks {
  font-size: 30px;
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--accent-clay);
}

/* Slogan closing : deux lignes équilibrées, rythme soigné */
[data-slide="60"] .closing-q1 {
  font-size: 64px;
  line-height: 1.1;
  color: #B8B8B8;
  margin-bottom: 8px;
  max-width: 1500px;
}

[data-slide="60"] .closing-q2 {
  font-size: 80px;
  line-height: 1.1;
  color: var(--ink-inverse);
  margin-bottom: 48px;
  max-width: 1500px;
}

/* Vibe-loop repris de slide 1 pour la fermeture · invitation à l'action */
[data-slide="60"] .vibe-loop {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 1200px;
  color: rgba(255, 255, 255, 0.5);
  min-height: 36px;
}

[data-slide="60"] .vibe-loop__prompt,
[data-slide="60"] .vibe-loop__user {
  color: var(--code-green);
  font-weight: var(--fw-bold);
  opacity: 0.85;
  flex-shrink: 0;
}
[data-slide="60"] .vibe-loop__user { opacity: 0.7; }
[data-slide="60"] .vibe-loop__chev {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  margin: 0 2px;
  flex-shrink: 0;
}
[data-slide="60"] .vibe-loop__text {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  min-height: 1em;
}
[data-slide="60"] .vibe-loop__cursor {
  color: var(--accent-bright);
  font-weight: var(--fw-bold);
  animation: vibe-blink 0.9s steps(2, end) infinite;
  margin-left: -4px;
}

/* QR code v2 · cadre crème sur fond noir, hiérarchie claire */
.closing-qr--v2 {
  position: absolute;
  top: 90px;
  right: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  z-index: 3;
}

.closing-qr--v2 .closing-qr__frame {
  width: 180px;
  height: 180px;
  padding: 14px;
  background: var(--bg-cream);
  border-radius: 8px;
  box-shadow: 0 20px 40px -12px rgba(217, 119, 87, 0.25), 0 0 0 1px rgba(245, 241, 232, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.closing-qr--v2 .closing-qr__img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  padding: 0;
  background: transparent;
  border: 0;
  object-fit: contain;
}

.closing-qr--v2 .closing-qr__label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 200px;
  text-align: right;
}

.closing-qr--v2 .closing-qr__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: var(--fw-bold);
  color: var(--accent-bright);
  text-transform: uppercase;
}

.closing-qr--v2 .closing-qr__url {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-inverse);
  text-decoration: none;
  font-weight: var(--fw-bold);
  border-bottom: 1px solid rgba(245, 241, 232, 0.4);
  padding-bottom: 2px;
  transition: color 180ms, border-color 180ms;
}
.closing-qr--v2 .closing-qr__url:hover {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
}

@media (max-width: 900px) {
  .closing-qr--v2 {
    top: 20px;
    right: 20px;
    gap: 8px;
  }
  .closing-qr--v2 .closing-qr__frame { width: 110px; height: 110px; padding: 8px; }
  .closing-qr--v2 .closing-qr__url { font-size: 11px; }
  .closing-qr--v2 .closing-qr__hint { display: none; }
  [data-slide="60"] .closing-q1 { font-size: clamp(22px, 6vw, 34px) !important; }
  [data-slide="60"] .closing-q2 { font-size: clamp(26px, 7vw, 42px) !important; margin-bottom: 24px !important; }
  [data-slide="60"] .vibe-loop { font-size: 12px !important; margin-top: 16px !important; }
}

/* Petit hint sous l'URL du QR */
.closing-qr__hint {
  font-size: 12px;
  color: rgba(245, 241, 232, 0.55);
  font-style: italic;
  line-height: 1.4;
  max-width: 200px;
}


/* ═══════════════════════════════════════════════════════════
   Utilitaire : sous-titre de slide (sous le titre)
   ═══════════════════════════════════════════════════════════ */

.slide__subtitle {
  font-size: 26px;
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 1400px;
  margin-bottom: 56px;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   Slide 5 · QUATRE PRODUITS — grille 1×4
   ═══════════════════════════════════════════════════════════ */

[data-slide="7"] .slide__body {
  padding-top: 120px;
  padding-bottom: 100px;
  justify-content: flex-start;
}

[data-slide="7"] .slide__title {
  font-size: 76px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 80px;
  max-width: 1700px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  flex: 1;
  max-height: 620px;
}

.product-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.3);
  gap: 16px;
  position: relative;
}

.product-card.is-active {
  border-color: var(--accent-bright);
  border-width: 2px;
  padding: 35px 31px;
  background: rgba(252, 117, 12, 0.04);
}

/* Card Claude Code : flottement lent bas → haut en loop */
.product-card--float {
  animation: product-card-float 3.6s ease-in-out infinite;
}

@keyframes product-card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.product-card__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  background: transparent;
  margin-bottom: 6px;
}

.product-card.is-active .product-card__dot {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}

.product-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0;
}

.product-card.is-active .product-card__eyebrow {
  color: var(--accent-bright);
}

.product-card__title {
  font-size: 36px;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.product-card__features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: auto;
}

.product-card__note {
  font-size: 16px;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 20px;
  line-height: 1.4;
}

.product-card.is-active .product-card__note {
  color: var(--accent-bright);
}


/* ═══════════════════════════════════════════════════════════
   Slide 23 · LES FONDATIONS — grille 2×2
   ═══════════════════════════════════════════════════════════ */

[data-slide="31"] .slide__body {
  padding-top: 120px;
  padding-bottom: 100px;
  justify-content: flex-start;
}

[data-slide="31"] .slide__title {
  font-size: 64px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
  max-width: 1500px;
}

.foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  flex: 1;
  max-height: 560px;
}

.foundation-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 44px 52px;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.foundation-card.is-active {
  border-color: var(--accent-clay);
  border-width: 2px;
  padding: 43px 51px;
}

.foundation-card__header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.foundation-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-clay);
  color: var(--ink-inverse);
  font-weight: var(--fw-bold);
  font-size: 17px;
  flex-shrink: 0;
  font-feature-settings: 'tnum';
}

.foundation-card__title {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: -0.01em;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

.foundation-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0;
}

.foundation-card.is-active .foundation-card__eyebrow {
  color: var(--accent-clay);
}

.foundation-card__desc {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin-top: auto;
}


/* ═══════════════════════════════════════════════════════════
   Slide 4 · L'ACCÈS — prose simple
   ═══════════════════════════════════════════════════════════ */

[data-slide="6"] .slide__body {
  padding-top: 120px;
  padding-bottom: 100px;
  justify-content: flex-start;
}

[data-slide="6"] .slide__title {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 64px;
  max-width: 1700px;
}

.prose-lead {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: 32px;
  line-height: 1.35;
  max-width: 1600px;
}

.prose {
  font-size: 22px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 1600px;
}


/* ═══════════════════════════════════════════════════════════
   Slide 6 · LES MOTEURS — compare 2 cards avec barres
   ═══════════════════════════════════════════════════════════ */

[data-slide="8"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="8"] .slide__title {
  font-size: 58px;
  font-weight: var(--fw-extrabold);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  margin-bottom: 48px;
  max-width: 1500px;
}

.engines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

.engine-card {
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.engine-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
}

.engine-card--light {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--border-color-light);
}

.engine-card__eyebrow {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--accent-bright);
}

.engine-card--light .engine-card__eyebrow {
  color: var(--accent-clay);
}

.engine-card__title {
  font-size: 32px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  margin-bottom: 18px;
}

.engine-metric {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px 16px;
  align-items: baseline;
  margin-bottom: 2px;
}

.engine-metric__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  opacity: 0.9;
}

.engine-metric__value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--fw-regular);
  opacity: 0.8;
  text-align: right;
}

.engine-metric__bar {
  grid-column: 1 / -1;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 8px;
}

.engine-card--light .engine-metric__bar {
  background: rgba(0, 0, 0, 0.08);
}

.engine-metric__bar span {
  display: block;
  height: 100%;
  background: var(--accent-bright);
  border-radius: 3px;
  width: 0;
  transform-origin: left center;
}

.engine-card--light .engine-metric__bar span {
  background: var(--accent-clay);
}

.engines-note {
  font-size: 20px;
  color: var(--accent-clay);
  font-style: italic;
  line-height: 1.5;
  max-width: 1700px;
}

.engines-note strong {
  font-weight: var(--fw-bold);
  font-style: italic;
}

.engines-legend {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color-light);
  max-width: 1700px;
}

.engines-legend > strong {
  color: var(--ink);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.engines-legend span {
  display: inline-block;
  margin-right: 20px;
}

.engines-legend span strong {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}


/* ═══════════════════════════════════════════════════════════
   Utilitaires communs : three-grid, footnote
   ═══════════════════════════════════════════════════════════ */

.three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
  flex: 0 0 auto;
}

.slide__footnote {
  font-size: 19px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
  max-width: 1720px;
  margin-top: auto;
}

.slide__footnote strong {
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   Slide 9 · ANATOMIE — trois cartes numérotées
   ═══════════════════════════════════════════════════════════ */

[data-slide="17"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="17"] .slide__title {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 20px;
}

.triplet-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 48px 48px;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
}

.triplet-card__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin: 0 0 40px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.triplet-card__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.triplet-card__title {
  font-size: 32px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  margin-bottom: 28px;
}

.triplet-card__desc {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
}

.triplet-card__desc code {
  font-family: var(--font-mono);
  font-size: 18px;
  background: rgba(217, 119, 87, 0.12);
  padding: 1px 7px;
  border-radius: 3px;
  color: var(--ink);
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   Slide 10 · EXEMPLES — grille 2×4
   ═══════════════════════════════════════════════════════════ */

[data-slide="18"] .slide__body {
  padding-top: 120px;
  padding-bottom: 110px; /* dégage le footer sous la grille dense */
  justify-content: flex-start;
}

[data-slide="18"] .slide__footnote {
  margin-top: 16px;
  margin-bottom: 8px;
}

[data-slide="18"] .slide__title {
  font-size: 68px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 60px;
  max-width: 1700px;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  flex: 0 0 auto;
  margin-bottom: 32px;
}

.example-card {
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
}

.example-card__num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  margin-bottom: 6px;
}

.example-card__image {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin-bottom: 6px;
  mix-blend-mode: multiply;
}

.example-card__glyph {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-clay);
  margin-bottom: 10px;
  transition: color 280ms, transform 280ms;
}
.example-card__glyph svg {
  width: 100%;
  height: 100%;
}
.example-card:hover .example-card__glyph {
  color: var(--accent-bright);
  transform: translateY(-2px);
}

.example-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: 12px;
}

.example-card__desc {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════
   Badge « À EMPORTER » (utilisé sur slides 8, 17, 20, 22, 24-31, 34-40)
   ═══════════════════════════════════════════════════════════ */

.slide__badge {
  position: absolute;
  top: calc(var(--pad-y) - 8px);
  right: var(--pad-x);
  padding: 14px 24px;
  background: var(--accent-bright);
  color: var(--ink-inverse);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.14em;
  border-radius: 3px;
  z-index: 3;
  text-transform: uppercase;
  line-height: 1;
}


/* ═══════════════════════════════════════════════════════════
   Slide 8 · PAR OÙ DÉMARRER — grille 2×4 + terminal install
   ═══════════════════════════════════════════════════════════ */

[data-slide="10"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="10"] .slide__title {
  font-size: 64px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 44px;
  max-width: 1700px;
}

.install-block {
  margin-bottom: 28px;
}

.install-block__label {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin-bottom: 10px;
}

.install-block__terminal {
  background: var(--code-bg);
  border-radius: var(--radius);
  padding: 20px 32px;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--ink-inverse);
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.install-block__copy {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  transition: all 160ms;
  white-space: nowrap;
  flex-shrink: 0;
}

.install-block__copy:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--accent-bright);
}

.install-block__copy.is-copied {
  background: rgba(126, 231, 135, 0.2);
  border-color: var(--code-green);
  color: var(--code-green);
}

.install-block__copy.is-copied::before { content: '✓ '; }

.install-block__prompt {
  color: var(--code-green);
  font-weight: var(--fw-bold);
}

.gateways-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  flex: 0 0 auto;
}

.gateway-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius);
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 130px;
}

.gateway-card__icon {
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}

.gateway-card__icon--plus {
  font-size: 36px;
  font-weight: var(--fw-bold);
  color: var(--accent-bright);
}

.gateway-card__image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 6px;
  display: block;
  mix-blend-mode: multiply;
}

/* Carte accent orange : inverse les traits noirs en blancs via filter */
.gateway-card__image--invert {
  filter: invert(1) brightness(2);
  mix-blend-mode: screen;
}

/* Dark card : image blanche via invert, blend screen pour fusionner au fond noir */
.gateway-card--dark .gateway-card__image {
  filter: invert(1) brightness(2);
  mix-blend-mode: screen;
}

.gateway-card__title {
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.gateway-card__desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-muted);
  margin-top: auto;
}

.gateway-card--accent {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}

.gateway-card--accent .gateway-card__title,
.gateway-card--accent .gateway-card__icon {
  color: var(--ink-inverse);
}

.gateway-card--accent .gateway-card__desc {
  color: rgba(255, 255, 255, 0.88);
}

.gateway-card--dark {
  background: var(--bg-black);
  border-color: var(--bg-black);
  color: var(--ink-inverse);
}

.gateway-card--dark .gateway-card__title,
.gateway-card--dark .gateway-card__icon {
  color: var(--ink-inverse);
}

.gateway-card--dark .gateway-card__desc {
  color: var(--ink-muted-dark);
}


/* ═══════════════════════════════════════════════════════════
   Slide 12 · CONFIDENTIALITÉ — 3 niveaux de garantie
   ═══════════════════════════════════════════════════════════ */

[data-slide="20"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="20"] .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin-bottom: 52px;
  max-width: 1500px;
}

.guarantee-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 40px 40px;
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
}

.guarantee-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.guarantee-card__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0 0 24px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.guarantee-card--dark .guarantee-card__eyebrow {
  color: var(--accent-bright);
}

.guarantee-card__num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
}

.guarantee-card--dark .guarantee-card__num {
  color: var(--accent-bright);
}

.guarantee-card__title {
  font-size: 30px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  margin-bottom: 28px;
}

.guarantee-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 18px;
  line-height: 1.45;
}

.guarantee-card__list li {
  color: var(--ink);
}

.guarantee-card--dark .guarantee-card__list li {
  color: var(--ink-inverse);
  opacity: 0.92;
}

.guarantee-card__note {
  font-size: 14px;
  color: var(--ink-muted);
  display: block;
  font-style: italic;
}

.guarantee-card--dark .guarantee-card__note {
  color: var(--ink-muted-dark);
}

.guarantee-card__foot {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: auto;
}

.guarantee-card--dark .guarantee-card__foot {
  color: var(--ink-muted-dark);
}

.guarantee-card__foot--accent {
  color: var(--accent-bright) !important;
}


/* ═══════════════════════════════════════════════════════════
   Slide 13 · BÉNÉFICE MESURABLE — big number + table
   ═══════════════════════════════════════════════════════════ */

[data-slide="21"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

.benefit-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  flex: 1;
  align-items: stretch;
}

.benefit-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.benefit-number {
  font-size: 240px;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  font-feature-settings: 'tnum';
}

.benefit-number__sign {
  color: var(--ink);
}

.benefit-label {
  font-size: 32px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--accent-clay);
  margin-bottom: 52px;
  text-transform: uppercase;
}

.benefit-body {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 900px;
}

.benefit-note {
  font-size: 16px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
}

.saas-card {
  background: rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-lg);
  padding: 44px 44px;
  display: flex;
  flex-direction: column;
  align-self: start;
}

.saas-card__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin-bottom: 28px;
}

.saas-card__list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.saas-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.saas-card__row:last-of-type {
  border-bottom: none;
}

.saas-card__row dt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.saas-card__row dt strong {
  font-weight: var(--fw-bold);
  font-size: 17px;
  color: var(--ink);
}

.saas-card__row dt a {
  text-decoration: none;
  border-bottom: 1px dashed rgba(217, 119, 87, 0.5);
  transition: border-color 180ms, color 180ms;
}
.saas-card__row dt a strong { transition: color 180ms; }
.saas-card__row dt a:hover { border-bottom-color: var(--accent-clay); }
.saas-card__row dt a:hover strong { color: var(--accent-clay); }

.saas-card__row dt span {
  font-size: 13px;
  color: var(--ink-muted);
}

.saas-card__row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.saas-card__foot {
  font-size: 16px;
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  margin-top: 24px;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   Slide 14 · CAS CONCRET — compare 2 blocs
   ═══════════════════════════════════════════════════════════ */

[data-slide="22"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="22"] .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 40px;
  max-width: 1700px;
}

[data-slide="22"] .prose {
  margin-bottom: 72px;
  max-width: 1700px;
}

.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  flex: 0 0 auto;
}

.vs-card {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 44px 52px;
}

.vs-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.vs-card__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.vs-card--dark .vs-card__eyebrow {
  color: var(--accent-bright);
}

.vs-card__price {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  margin-bottom: 16px;
  color: var(--ink);
}

.vs-card--dark .vs-card__price {
  color: var(--ink-inverse);
}

.vs-card__sub {
  font-size: 18px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.vs-card--dark .vs-card__sub {
  color: var(--ink-muted-dark);
}


/* ═══════════════════════════════════════════════════════════
   Slide 16 · AVANT TOUT — 3 cartes simple
   ═══════════════════════════════════════════════════════════ */

[data-slide="24"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="24"] .slide__title {
  font-size: 68px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 20px;
}

[data-slide="24"] .triplet-card__eyebrow {
  margin-bottom: 16px;
}

[data-slide="24"] .triplet-card__num {
  color: var(--accent-clay);
  font-size: 18px;
}


/* ═══════════════════════════════════════════════════════════
   Slide 17 · LE RITUEL DE LANCEMENT — prompt + sidebar
   ═══════════════════════════════════════════════════════════ */

[data-slide="25"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="25"] .slide__title {
  font-size: 56px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 48px;
  max-width: 1500px;
}

.prompt-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  flex: 1;
  margin-bottom: 28px;
  align-items: start;
}

.prompt-block {
  border: 1.5px solid var(--accent-clay);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  background: rgba(255, 255, 255, 0.35);
  min-width: 0;
}

.prompt-block__label {
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.prompt-block__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.prompt-block__body p {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
}

.prompt-block__body code {
  font-family: var(--font-mono);
  font-size: 18px;
  background: rgba(217, 119, 87, 0.12);
  padding: 2px 8px;
  border-radius: 3px;
}

.prompt-block__emphasis {
  color: var(--accent-clay) !important;
  font-weight: var(--fw-bold);
  font-size: 20px !important;
  margin-top: 8px;
}

.prompt-aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: space-between;
}

.prompt-point {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.prompt-point__num {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  flex-shrink: 0;
  line-height: 1.3;
}

.prompt-point__title {
  font-size: 19px;
  font-weight: var(--fw-bold);
  margin-bottom: 8px;
  color: var(--ink);
}

.prompt-point__desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
}


/* ═══════════════════════════════════════════════════════════
   Slide 18 · HIÉRARCHIE DE MÉMOIRE — 3 cards mémoire
   ═══════════════════════════════════════════════════════════ */

[data-slide="26"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="26"] .slide__title {
  font-size: 68px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 56px;
}

.memory-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 40px 40px;
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms, box-shadow 320ms;
}

.memory-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-clay);
  box-shadow: 0 12px 28px -12px rgba(217, 119, 87, 0.35);
}

.memory-card--dark:hover {
  border-color: var(--accent-bright);
  box-shadow: 0 12px 28px -12px rgba(252, 117, 12, 0.45);
}

/* Entrance animation staggered, déclenchée au slidechange vers 27 via JS (classe .is-active) */
[data-slide="26"].is-active .memory-card {
  animation: memory-enter 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-slide="26"].is-active .memory-card:nth-child(1) { animation-delay: 120ms; }
[data-slide="26"].is-active .memory-card:nth-child(2) { animation-delay: 240ms; }
[data-slide="26"].is-active .memory-card:nth-child(3) { animation-delay: 360ms; }

@keyframes memory-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.memory-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.memory-card__eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0 0 20px 0;
  display: flex;
  align-items: baseline;
}

.memory-card--dark .memory-card__eyebrow {
  color: var(--accent-bright);
}

.memory-card__num {
  font-family: var(--font-mono);
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  font-size: 18px;
}

.memory-card--dark .memory-card__num {
  color: var(--accent-bright);
}

.memory-card__path {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--code-green);
  background: rgba(0, 0, 0, 0.85);
  padding: 10px 14px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 28px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.memory-card--dark .memory-card__path {
  background: rgba(126, 231, 135, 0.12);
}

.memory-card__title {
  font-size: 24px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.memory-card__sub {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-bottom: 28px;
}

.memory-card--dark .memory-card__sub {
  color: var(--ink-muted-dark);
}

.memory-card__example {
  margin-top: auto;
}

.memory-card__example-label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin-bottom: 8px;
}

.memory-card--dark .memory-card__example-label {
  color: var(--accent-bright);
}

.memory-card__example-body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.memory-card--dark .memory-card__example-body {
  color: var(--ink-inverse);
  opacity: 0.92;
}


/* ═══════════════════════════════════════════════════════════
   Slide 19 · VUE D'ENSEMBLE — tableau des 6 mécanismes
   ═══════════════════════════════════════════════════════════ */

[data-slide="27"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="27"] .slide__title {
  font-size: 64px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
}

[data-slide="27"] .slide__subtitle {
  margin-bottom: 32px;
  font-size: 22px;
}

.mech-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 18px;
  line-height: 1.4;
}

.mech-table thead tr {
  background: var(--bg-black);
  color: var(--ink-inverse);
}

.mech-table th {
  text-align: left;
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-bright);
}

.mech-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 120ms;
}

.mech-table tbody tr:nth-child(odd):not(.mech-table__category) {
  background: rgba(255, 255, 255, 0.5);
}

.mech-table td {
  padding: 14px 20px;
  vertical-align: top;
  color: var(--ink);
}

.mech-table__name {
  width: 180px;
}

.mech-table__name strong {
  font-weight: var(--fw-bold);
  font-size: 18px;
}

.mech-table__sub {
  color: var(--ink-muted);
  font-weight: var(--fw-regular);
}

.mech-table__category td {
  background: var(--neutral);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-clay);
  padding: 8px 20px;
}

.mech-table__highlight {
  position: relative;
}

.mech-table__highlight td:first-child {
  border-left: 3px solid var(--accent-clay);
  padding-left: 17px;
}

.mech-table td code {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent-clay);
  background: rgba(217, 119, 87, 0.08);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.mech-table td em {
  color: var(--ink-muted);
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   Slide 20 · L'ÉCOSYSTÈME — grille 2×3 de cards marketplaces
   ═══════════════════════════════════════════════════════════ */

[data-slide="28"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="28"] .slide__title {
  font-size: 68px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
}

.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  flex: 0 0 auto;
}

.eco-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eco-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.eco-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin: 0 0 8px 0;
}

.eco-card--dark .eco-card__eyebrow {
  color: var(--accent-bright);
}

.eco-card__title {
  font-size: 28px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}

.eco-card__url {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--code-green);
  margin: 4px 0 12px 0;
}

.eco-card__title a, .eco-card__url a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(217, 119, 87, 0.4);
  transition: color 180ms, border-color 180ms;
}
.eco-card__title a:hover, .eco-card__url a:hover {
  color: var(--accent-clay);
  border-bottom-color: var(--accent-clay);
}
.eco-card--dark .eco-card__title a:hover, .eco-card--dark .eco-card__url a:hover {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
}

.eco-card--dark .eco-card__url {
  color: var(--code-green);
}

.eco-card__desc {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  margin-top: auto;
}

.eco-card--dark .eco-card__desc {
  color: var(--ink-inverse);
  opacity: 0.88;
}


/* ═══════════════════════════════════════════════════════════
   Slide 21 · OÙ LE CODE ABOUTIT — grille 2×2 de destinations
   ═══════════════════════════════════════════════════════════ */

[data-slide="29"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="29"] .slide__title {
  font-size: 68px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
}

.destinations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  flex: 0 0 auto;
}

.destination-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.destination-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.destination-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0;
  display: flex;
  align-items: baseline;
}

.destination-card--dark .destination-card__eyebrow {
  color: var(--accent-bright);
}

.destination-card__num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}

.destination-card--dark .destination-card__num {
  color: var(--accent-bright);
}

.destination-card__title {
  font-size: 30px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.destination-card__desc {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}

.destination-card--dark .destination-card__desc {
  color: var(--ink-inverse);
  opacity: 0.88;
}

.destination-card__code {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--code-green);
  padding: 6px 0;
  display: block;
  background: transparent;
  font-weight: var(--fw-bold);
}

.destination-card--dark .destination-card__code {
  color: var(--code-green);
}

.destination-card__note {
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: auto;
}

.destination-card--dark .destination-card__note {
  color: var(--ink-muted-dark);
}


/* ═══════════════════════════════════════════════════════════
   Slide 22 · GITHUB ET CLAUDE CODE — 2 blocs compare
   ═══════════════════════════════════════════════════════════ */

[data-slide="30"] .slide__body {
  padding-top: 120px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="30"] .slide__title {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 48px;
  max-width: 1500px;
}

.github-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  flex: 0 0 auto;
  margin-bottom: 32px;
}

.github-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
}

.github-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.github-card__eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0 0 18px 0;
}

.github-card--dark .github-card__eyebrow {
  color: var(--accent-bright);
}

.github-card__num {
  font-family: var(--font-mono);
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}

.github-card--dark .github-card__num {
  color: var(--accent-bright);
}

.github-card__title {
  font-size: 32px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 28px 0;
}

.github-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.github-card__body p {
  font-size: 18px;
  line-height: 1.5;
}

.github-card__body code {
  font-family: var(--font-mono);
  font-size: 16px;
  background: rgba(217, 119, 87, 0.12);
  padding: 1px 7px;
  border-radius: 3px;
  color: var(--ink);
}

.github-card--dark .github-card__body code {
  background: rgba(252, 117, 12, 0.18);
  color: var(--accent-bright);
}

.github-card__subhead {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-bright);
  margin-bottom: -4px;
}

.github-card--dark .github-card__subhead {
  color: var(--accent-bright);
}

.github-card__terminal {
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.6;
  color: var(--code-green);
  background: transparent;
  white-space: pre;
  margin: 0;
  padding: 0;
}

.github-card__prompt {
  color: var(--code-green);
  font-weight: var(--fw-bold);
  margin-right: 6px;
}

.github-card__text {
  font-size: 17px;
  color: var(--ink-inverse);
  opacity: 0.88;
  line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════
   Slides 24-31 · ZOOM (arborescence + 7 zooms de fichiers)
   Pattern factorisé : titre + sidebar droite + gros bloc code.
   ═══════════════════════════════════════════════════════════ */

.slide--zoom .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-template-rows: auto 1fr;
  gap: 24px 48px;
  justify-content: stretch;
  align-items: start;
}

.slide--zoom .zoom-head {
  grid-column: 1;
  grid-row: 1;
}

.slide--zoom .slide__title {
  font-size: 52px;
  font-weight: var(--fw-extrabold);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
  max-width: 1100px;
  margin: 0;
}

/* Sidebar : card orange contour avec n° + eyebrow + path */
.zoom-sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  border: 1.5px solid var(--accent-clay);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.4);
  align-self: start;
  margin-top: 34px;
}

.zoom-sidebar__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-clay);
  color: var(--ink-inverse);
  font-weight: var(--fw-bold);
  font-size: 16px;
  margin-bottom: 18px;
}

.zoom-sidebar__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.zoom-sidebar__path {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
  word-break: break-all;
}

/* Bloc code : fond noir, mono, cursor clignotant */
.zoom-code {
  grid-column: 1 / -1;
  grid-row: 2;
  background: var(--code-bg);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-inverse);
  overflow: hidden;
  margin: 0;
  white-space: pre;
  max-height: 620px;
}

/* Quand la slide--zoom a une zoom-legend (col 2 rows 1-2), le code doit rester en col 1 pour ne pas recouvrir la légende */
.slide--zoom:has(.zoom-legend) .zoom-code {
  grid-column: 1;
}

.zoom-footnote {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 12px;
  max-width: 1500px;
}
.zoom-footnote strong { color: var(--ink); font-weight: var(--fw-bold); }
.zoom-footnote code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(217, 119, 87, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent-clay);
}

/* ═══════════════════════════════════════════════════════════
   Slide 45 · RECETTE carousel Instagram end-to-end
   ═══════════════════════════════════════════════════════════ */

[data-slide="44"] .slide__body {
  padding-top: 80px;
  padding-bottom: 100px; /* augmenté pour dégager le footer (recette 7 étapes dense) */
  justify-content: flex-start;
}
[data-slide="44"] .slide__title {
  font-size: 50px;
  line-height: 1.05;
  margin-bottom: 12px;
}
[data-slide="44"] .slide__subtitle {
  font-size: 20px;
  margin-bottom: 28px;
}
[data-slide="44"] .slide__footnote {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 17px;
}

.recipe-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.recipe-step {
  display: flex;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  transition: border-color 280ms, box-shadow 280ms, transform 280ms;
  align-items: flex-start;
}
.recipe-step:hover {
  border-color: var(--accent-clay);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -10px rgba(217, 119, 87, 0.3);
}
.recipe-step--accent {
  grid-column: span 2;
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}
.recipe-step__num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  color: var(--accent-clay);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.recipe-step--accent .recipe-step__num { color: var(--accent-bright); }
.recipe-step__body { flex: 1; min-width: 0; }
.recipe-step__title {
  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  margin: 0 0 6px 0;
}
.recipe-step__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px 0;
  opacity: 0.92;
}
.recipe-step--accent .recipe-step__desc { opacity: 0.85; }
.recipe-step__desc code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(217, 119, 87, 0.15);
  color: var(--accent-clay);
  padding: 1px 5px;
  border-radius: 3px;
}
.recipe-step--accent .recipe-step__desc code {
  background: rgba(255, 165, 87, 0.18);
  color: var(--code-orange);
}
.recipe-step__desc a {
  color: var(--accent-clay);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.recipe-step__desc a:hover { color: var(--accent-bright); }
.recipe-step--accent .recipe-step__desc a { color: var(--accent-bright); }
.recipe-step__cmd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-black);
  color: var(--code-green);
  padding: 4px 10px;
  border-radius: 3px;
  word-break: break-word;
}
.recipe-step--accent .recipe-step__cmd {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
  .recipe-steps {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .recipe-step {
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .recipe-step--accent { grid-column: span 1 !important; }
  .recipe-step__title { font-size: 14px !important; }
  .recipe-step__desc { font-size: 12px !important; }
  .recipe-step__cmd { font-size: 10px !important; }
  [data-slide="44"] .slide__title { font-size: clamp(20px, 6vw, 32px) !important; }
  [data-slide="44"] .slide__subtitle { font-size: 14px !important; margin-bottom: 16px !important; }
}

/* Animation typing CSS pure sur les blocs zoom-code : révèle le contenu du haut vers le bas */
[data-slide="32"].is-active .zoom-code,
[data-slide="33"].is-active .zoom-code,
[data-slide="38"].is-active .zoom-code,
[data-slide="39"].is-active .zoom-code {
  animation: zoom-code-reveal 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.5s;
}

@keyframes zoom-code-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-slide="32"].is-active .zoom-code,
  [data-slide="33"].is-active .zoom-code,
  [data-slide="38"].is-active .zoom-code,
  [data-slide="39"].is-active .zoom-code {
    animation: none;
  }
}

.zoom-code .c-prompt { color: var(--code-green); font-weight: var(--fw-bold); }
.zoom-code .c-file { color: var(--accent-clay); font-weight: var(--fw-bold); }
.zoom-code .c-dir { color: var(--code-green); }
.zoom-code .c-comment { color: var(--code-comment); font-style: italic; }
.zoom-code .c-heading { color: var(--accent-clay); font-weight: var(--fw-bold); }
.zoom-code .c-key { color: var(--code-orange); }
.zoom-code .c-string { color: var(--code-green); }
.zoom-code .c-check { color: var(--code-green); font-weight: var(--fw-bold); }
.zoom-code .c-todo { color: var(--code-comment); }

.zoom-code .c-cursor {
  color: var(--code-green);
  font-weight: var(--fw-bold);
  animation: vibe-blink 0.9s steps(2, end) infinite;
  margin-left: 2px;
}


/* Variante slide 24 : légende avec pastilles colorées au lieu de la card fichier */

.zoom-legend {
  grid-column: 2;
  grid-row: 1 / span 2;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 32px 32px;
  background: rgba(255, 255, 255, 0.4);
  align-self: start;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.zoom-legend__title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin-bottom: 6px;
}

.zoom-legend__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.zoom-legend__dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 4px;
}

.zoom-legend__dot--orange { background: var(--accent-clay); }
.zoom-legend__dot--green { background: var(--code-green); }
.zoom-legend__dot--white { background: transparent; border: 1.5px solid var(--ink-muted); }

.zoom-legend__row strong {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 4px;
}

.zoom-legend__row em {
  display: block;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.4;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   Slide 33 · LE VRAI SECRET — typewriter dramatique
   ═══════════════════════════════════════════════════════════ */

[data-slide="40"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="40"] .slide__title {
  font-size: 56px;
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-inverse);
  margin-bottom: 44px;
  max-width: 1700px;
}

.typewriter-terminal {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-inverse);
  position: relative;
  max-height: 720px;
  overflow: hidden;
}

.typewriter-line {
  margin: 0;
  white-space: pre-wrap;
  min-height: 31px;
  color: rgba(255, 255, 255, 0.88);
}

.typewriter-line--prompt {
  color: var(--code-green);
  font-weight: var(--fw-bold);
  margin-top: 18px;
}

.typewriter-line--prompt:first-child {
  margin-top: 0;
}

.typewriter-line--heading {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}

.typewriter-line--subheading {
  color: var(--accent-bright);
  font-weight: var(--fw-bold);
  opacity: 0.85;
}

.typewriter-line--blank {
  min-height: 14px;
  color: transparent;
}

.typewriter-cursor {
  display: inline-block;
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 20px;
  animation: vibe-blink 0.9s steps(2, end) infinite;
  margin-left: 4px;
  position: absolute;
  opacity: 0;
}


/* ═══════════════════════════════════════════════════════════
   Slide 34 · RÉSULTAT — capture + 3 bullets
   ═══════════════════════════════════════════════════════════ */

[data-slide="41"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="41"] .slide__title {
  font-size: 68px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 56px;
}

.result-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 80px;
  flex: 1;
  align-items: center;
}

.result-capture {
  aspect-ratio: 16 / 10;
  border: 1.5px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  max-height: 540px;
}

.result-capture__placeholder {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-muted);
  letter-spacing: 0.18em;
  text-align: center;
  font-style: italic;
  line-height: 1.8;
  text-transform: uppercase;
}

.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.result-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.result-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-clay);
  color: var(--ink-inverse);
  font-weight: var(--fw-bold);
  font-size: 18px;
  flex-shrink: 0;
}

.result-item__title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  margin-bottom: 8px;
  color: var(--ink);
}

.result-item__desc {
  font-size: 17px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   Slide 42 · RÉSULTAT · 3 cas concrets
   ═══════════════════════════════════════════════════════════ */

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}

.case-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.case-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.case-card--dark .case-card__eyebrow {
  color: var(--accent-bright);
}

.case-card__num {
  font-family: var(--font-mono);
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  font-size: 13px;
}

.case-card__title {
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}

.case-card__skills {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 0;
}

.case-card--dark .case-card__skills {
  color: rgba(245, 241, 232, 0.7);
}

.case-card__skills code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(217, 119, 87, 0.15);
  color: var(--accent-clay);
  padding: 1px 5px;
  border-radius: 3px;
}

.case-card--dark .case-card__skills code {
  background: rgba(255, 165, 87, 0.15);
  color: var(--code-orange);
}

.case-card__desc {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.case-card--dark .case-card__desc { opacity: 0.88; }

.case-card__result {
  font-size: 14px;
  margin: auto 0 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(217, 119, 87, 0.25);
  color: var(--accent-clay);
}

.case-card--dark .case-card__result {
  color: var(--accent-bright);
  border-top-color: rgba(255, 165, 87, 0.3);
}

@media (max-width: 900px) {
  .cases-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .case-card { padding: 18px 20px !important; }
  .case-card__title { font-size: 18px !important; }
  .case-card__desc { font-size: 13px !important; }
}


/* ═══════════════════════════════════════════════════════════
   Slide 35 · LES PACKS — 6 cards repos officiels
   ═══════════════════════════════════════════════════════════ */

[data-slide="42"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="42"] .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
}

.packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  flex: 0 0 auto;
}

.pack-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pack-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.pack-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pack-card__name {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin: 0;
  letter-spacing: -0.01em;
}

.pack-card--dark .pack-card__name { color: var(--accent-bright); }
.pack-card__name a { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; transition: opacity 180ms; }
.pack-card__name a:hover { opacity: 0.75; }

.pack-card__stars {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

.pack-card--dark .pack-card__stars { color: var(--ink-muted-dark); }

.pack-card__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  flex: 1;
}

.pack-card--dark .pack-card__desc {
  color: var(--ink-inverse);
  opacity: 0.9;
}

.pack-card__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius);
  background: var(--bg-black);
  color: var(--ink-inverse);
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
  text-align: left;
  width: 100%;
}

.pack-card--dark .pack-card__copy {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.pack-card__copy:hover { border-color: var(--accent-clay); }

.pack-card__copy code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--code-green);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-card__copy-icon {
  font-size: 16px;
  color: var(--ink-muted-dark);
  flex-shrink: 0;
}

.pack-card__copy.is-copied { border-color: var(--code-green); }
.pack-card__copy.is-copied code { color: var(--code-green); }
.pack-card__copy.is-copied .pack-card__copy-icon { color: var(--code-green); }
.pack-card__copy.is-copied code::before {
  content: '✓ Copié — ';
  color: var(--code-green);
}


/* ═══════════════════════════════════════════════════════════
   Slide 36 · INSTALLATION — 2 méthodes + crawler
   ═══════════════════════════════════════════════════════════ */

[data-slide="45"] .slide__body {
  padding-top: 100px;
  padding-bottom: 100px;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

[data-slide="45"] .slide__title {
  font-size: 64px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 48px;
}

.install-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  flex: 0 0 auto;
  margin-bottom: 32px;
}

.install-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.install-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}

.install-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin: 0 0 8px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.install-card--dark .install-card__eyebrow { color: var(--accent-bright); }

.install-card__num {
  font-family: var(--font-mono);
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.install-card--dark .install-card__num { color: var(--accent-bright); }

.install-card__title {
  font-size: 30px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  margin: 0 0 18px 0;
}

.install-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: step;
  font-size: 17px;
  line-height: 1.5;
}

.install-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 32px;
  color: var(--ink);
}

.install-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 119, 87, 0.12);
  border-radius: 50%;
}

.install-steps code {
  font-family: var(--font-mono);
  font-size: 15px;
  background: rgba(0, 0, 0, 0.07);
  padding: 1px 6px;
  border-radius: 3px;
}

.install-url {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}

.install-terminal {
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius);
  padding: 18px 24px;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.8;
  position: relative;
  margin-top: 4px;
}

.install-card--dark .install-terminal {
  background: rgba(255, 255, 255, 0.06);
}

.install-terminal__body p {
  margin: 0;
  color: var(--ink-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.install-terminal__copy {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}

.install-terminal__copy:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--accent-bright);
}

.install-terminal__copy.is-copied {
  background: rgba(126, 231, 135, 0.2);
  border-color: var(--code-green);
  color: var(--code-green);
}

.cl-prompt { color: var(--code-green); font-weight: var(--fw-bold); }
.cl-url    { color: var(--accent-bright); }

.install-card__foot {
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
  margin: auto 0 0 0;
}

.install-card__foot--dark { color: var(--ink-muted-dark); }

.install-card__foot code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-clay);
}

.inline-copy {
  padding: 2px 8px;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--border-color-light);
  border-radius: 3px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms;
}

.inline-copy:hover {
  border-color: var(--accent-clay);
  color: var(--accent-clay);
}

.inline-copy.is-copied {
  border-color: var(--code-green);
  color: var(--code-green);
}

.inline-copy.is-copied::before { content: '✓ '; }

.install-crawler-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80px;
  height: 40px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.install-crawler {
  position: absolute;
  width: 32px;
  height: 32px;
  bottom: 0;
  shape-rendering: crispEdges;
  animation: install-crawler-walk 8s linear infinite;
}

.install-crawler .crawler__body,
.install-crawler .crawler__leg { fill: var(--accent-clay); }

.install-crawler .crawler__eye { fill: #0F0F0F; }

.install-crawler .crawler__leg {
  transform-box: fill-box;
  transform-origin: top center;
}

.install-crawler .crawler__leg--a {
  animation: leg-step 0.35s steps(2) infinite;
}

.install-crawler .crawler__leg--b {
  animation: leg-step 0.35s steps(2) -0.175s infinite;
}

@keyframes install-crawler-walk {
  from { transform: translateX(-50px); }
  to   { transform: translateX(2000px); }
}


/* Mobile · slides 35 + 36 */
@media (max-width: 900px) {
  .packs-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 14px !important;
  }
  .pack-card { padding: 18px 20px !important; }
  .pack-card__name { font-size: 16px !important; }
  .pack-card__desc { font-size: 13px !important; }
  .pack-card__copy code { font-size: 11px !important; }

  .install-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .install-card { padding: 20px !important; }
  .install-card__title { font-size: 22px !important; }
  .install-steps { font-size: 14px !important; }
  .install-terminal { font-size: 13px !important; padding: 14px 16px !important; }
  .install-crawler-track { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   Slides 37-43 · RACCOURCIS (pattern factorisé)
   ═══════════════════════════════════════════════════════════ */

.slide--shortcut .slide__body {
  padding-top: 180px;
  padding-bottom: 100px;
  justify-content: flex-start;
}

.slide--shortcut .slide__title {
  font-size: 76px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 48px;
  max-width: 1700px;
}

.shortcut-body {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 20px 0;
  max-width: 1700px;
}

.shortcut-body--accent {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
  font-size: 22px;
  margin-top: 8px;
}

.shortcut-body--mute {
  color: var(--ink-muted);
  font-size: 19px;
  margin-bottom: 40px;
}

.shortcut-cmd {
  background: var(--code-bg);
  border-radius: var(--radius);
  padding: 22px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.shortcut-cmd code {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--code-green);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.shortcut-cmd__copy {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  transition: all 160ms;
  white-space: nowrap;
  flex-shrink: 0;
}

.shortcut-cmd__copy:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--accent-bright);
}

.shortcut-cmd__copy.is-copied {
  background: rgba(126, 231, 135, 0.2);
  border-color: var(--code-green);
  color: var(--code-green);
}

.shortcut-cmd__copy.is-copied::before {
  content: '✓ ';
}


/* ═══════════════════════════════════════════════════════════
   Slide 3 · Invitation QR — ouvrir la prez sur mobile
   ═══════════════════════════════════════════════════════════ */

[data-slide="3"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: center;
  justify-content: stretch;
}

.invite-qr-text { max-width: 900px; }

[data-slide="3"] .slide__title {
  font-size: 80px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 28px;
}

.invite-qr-sub {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 40px 0;
  max-width: 800px;
}

.invite-qr-url {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--bg-black);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.invite-qr-url__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted-dark);
}

.invite-qr-url__value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--code-green);
  font-weight: var(--fw-bold);
  flex: 1;
  min-width: 280px;
}

.invite-qr-url__copy {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms;
  white-space: nowrap;
}

.invite-qr-url__copy:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--accent-bright);
}

.invite-qr-url__copy.is-copied {
  background: rgba(126, 231, 135, 0.2);
  border-color: var(--code-green);
  color: var(--code-green);
}

.invite-qr-url__copy.is-copied::before { content: '✓ '; }

.invite-qr-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.invite-qr-image {
  width: 100%;
  max-width: 420px;
  height: auto;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  image-rendering: pixelated;
}

.invite-qr-caption {
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0;
}

/* Crawler curieux qui regarde le QR — yeux qui roulent en rond */
.qr-crawler {
  width: 90px;
  height: 90px;
  margin-bottom: -6px;
  shape-rendering: crispEdges;
  image-rendering: pixelated;
  align-self: center;
}

.qr-crawler .crawler__body,
.qr-crawler .crawler__leg { fill: var(--accent-clay); }

.qr-crawler .crawler__eye { fill: #0F0F0F; }

.qr-crawler .crawler__eye--roll {
  transform-box: fill-box;
  transform-origin: center;
  animation: qr-eye-roll 2.8s ease-in-out infinite;
}

.qr-crawler .crawler__eye--roll:nth-of-type(3) {
  animation-delay: -1.4s;
}

@keyframes qr-eye-roll {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(30%, 0); }
  40%      { transform: translate(30%, 30%); }
  60%      { transform: translate(-30%, 30%); }
  80%      { transform: translate(-30%, 0); }
}

/* Crawler qui lève la main (slide 4) — positionné milieu-droit pour ne pas gêner le titre */
.hand-raise-crawler {
  position: absolute;
  top: 50%;
  right: 140px;
  transform: translateY(-40%);
  width: 180px;
  height: auto;
  shape-rendering: crispEdges;
  image-rendering: pixelated;
  z-index: 1;
  pointer-events: none;
}

.hand-raise-crawler .crawler__body,
.hand-raise-crawler .crawler__leg,
.hand-raise-crawler .crawler__arm { fill: var(--accent-clay); }

.hand-raise-crawler .crawler__eye { fill: #0F0F0F; }

.hand-raise-crawler .crawler__arm {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: hand-wave 1.2s ease-in-out infinite;
}

@keyframes hand-wave {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(14deg); }
  75%      { transform: rotate(-14deg); }
}


/* Crawler super-héros qui saute avec une pierre (slide 6) — placé sous le texte */
.hero-crawler {
  position: absolute;
  bottom: 100px;
  right: 120px;
  width: 200px;
  height: auto;
  shape-rendering: crispEdges;
  image-rendering: pixelated;
  z-index: 1;
  pointer-events: none;
  animation: hero-jump 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.hero-crawler .crawler__body,
.hero-crawler .crawler__leg,
.hero-crawler .crawler__arm-up { fill: var(--accent-clay); }

.hero-crawler .crawler__eye { fill: #0F0F0F; }

.hero-crawler .rock-main { fill: var(--ink); }
.hero-crawler .rock-detail { fill: var(--ink-inverse); opacity: 0.2; }

.hero-crawler .crawler__logo { fill: var(--accent-bright); }

/* Yeux qui se plissent pendant l'effort */
.hero-crawler .crawler__eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-squint 1.6s ease-in-out infinite;
}

@keyframes hero-jump {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-18px); }
  60%      { transform: translateY(-18px); }
}

@keyframes hero-squint {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.4); }
}


/* Mobile : ajustements pour les crawlers décoratifs */
@media (max-width: 900px) {
  .qr-crawler { width: 56px; height: 56px; }
  .hand-raise-crawler {
    width: 90px;
    top: auto;
    bottom: 100px;
    right: 20px;
  }
  .hero-crawler {
    width: 100px;
    top: auto;
    bottom: 100px;
    right: 20px;
  }
}

/* Mobile · slide 3 */
@media (max-width: 900px) {
  [data-slide="3"] .slide__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  [data-slide="3"] .slide__title {
    font-size: clamp(30px, 7.5vw, 44px) !important;
  }
  .invite-qr-sub {
    font-size: 15px !important;
    margin-bottom: 24px !important;
  }
  .invite-qr-url {
    padding: 12px 14px !important;
  }
  .invite-qr-url__value {
    font-size: 13px !important;
    min-width: auto !important;
    word-break: break-all;
  }
  .invite-qr-image {
    max-width: 240px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Slide 46 · À EMPORTER — signal/faible/bruit/piège (sans QR)
   Le QR a été déplacé en slide 3 · la grille remplit l'espace.
   ═══════════════════════════════════════════════════════════ */

[data-slide="57"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}

[data-slide="57"] .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 52px;
  max-width: 1500px;
}

.signal-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  flex: 1;
  align-items: start;
}

.signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

/* Grid full-width quand le QR n'est plus à côté (slide 46 simplifiée) */
.signal-grid--full {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  flex: 1;
  max-width: 1760px;
}

.signal-grid--full .signal-card {
  padding: 40px 48px;
}

.signal-grid--full .signal-card__body {
  font-size: 22px;
  line-height: 1.55;
}

.signal-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
}

.signal-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin: 0 0 16px 0;
  color: var(--ink-muted);
}

.signal-card--strong .signal-card__eyebrow { color: var(--accent-clay); }
.signal-card--trap   .signal-card__eyebrow { color: var(--accent-bright); }

.signal-card__body {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.qr-card {
  background: var(--bg-black);
  border-radius: var(--radius-lg);
  padding: 32px 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.qr-card__image {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 6px;
  image-rendering: pixelated;
}

.qr-card__url {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--accent-bright);
  margin: 0;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.qr-card__caption {
  font-size: 14px;
  color: var(--ink-muted-dark);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}


/* Mobile · signal/QR */
@media (max-width: 900px) {
  .signal-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .signal-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }
  .signal-card {
    padding: 18px 20px !important;
  }
  .signal-card__body {
    font-size: 14px !important;
  }
  .qr-card {
    padding: 20px !important;
  }
  .qr-card__image {
    max-width: 200px !important;
  }
  .qr-card__url {
    font-size: 15px !important;
  }
  .qr-card__caption {
    font-size: 12px !important;
  }
}


/* Mobile · raccourcis */
@media (max-width: 900px) {
  .slide--shortcut .slide__body {
    padding-top: 60px !important;
  }
  .slide--shortcut .slide__title {
    font-size: clamp(28px, 7vw, 42px) !important;
    margin-bottom: 20px !important;
  }
  .shortcut-body {
    font-size: 15px !important;
  }
  .shortcut-cmd {
    padding: 14px 16px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .shortcut-cmd code {
    font-size: 14px !important;
    word-break: break-all;
  }
  .shortcut-cmd__copy {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Salve A · slides 37, 39, 47, 48, 49
   ═══════════════════════════════════════════════════════════ */

/* Slide 37 · PACKS PME */
[data-slide="43"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}
[data-slide="43"] .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 8px;
}

.pme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  flex: 0 0 auto;
  margin-bottom: 20px;
}
.pme-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pme-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}
.pme-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin: 0;
}
.pme-card--dark .pme-card__eyebrow { color: var(--accent-bright); }
.pme-card__title {
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 4px 0;
}
.pme-card__stack {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.45;
}
.pme-card--dark .pme-card__stack { color: var(--ink-muted-dark); }
.pme-card__stack strong {
  color: var(--accent-clay);
  font-weight: var(--fw-bold);
}
.pme-card--dark .pme-card__stack strong { color: var(--accent-bright); }
.pme-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.pme-card--dark .pme-card__desc { color: var(--ink-inverse); opacity: 0.88; }

/* Bouton « Copier le prompt complet » sur les pme-card (mêmes codes que prompt-item__copy) */
.pme-card__copy {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-black);
  color: var(--ink-inverse);
  border: 1px solid var(--bg-black);
  border-radius: 6px;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms;
  text-align: left;
  margin-top: auto;
}
.pme-card__copy:hover {
  background: var(--accent-clay);
  border-color: var(--accent-clay);
  transform: translateY(-1px);
}
.pme-card__copy.is-copied {
  background: var(--code-green);
  border-color: var(--code-green);
  color: var(--bg-black);
}
.pme-card__copy-icon { font-size: 15px; flex-shrink: 0; }
.pme-card__copy-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.pme-card__copy-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
  white-space: nowrap;
}

/* Variante visuelle card 03 (ex « pme-card--dark ») */
.pme-card__eyebrow--accent {
  color: var(--accent-bright) !important;
}


/* Slide 39 · BUDGET PME */
[data-slide="46"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}
[data-slide="46"] .slide__title {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
}

.budget-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
  margin-bottom: 24px;
}
.budget-row {
  display: grid;
  grid-template-columns: 1.3fr 260px 100px 1.5fr;
  gap: 24px;
  align-items: baseline;
  padding: 24px 32px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
}
.budget-row--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}
.budget-row__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
}
.budget-row--dark .budget-row__label { color: var(--accent-bright); }
.budget-row__value {
  font-size: 40px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--accent-clay);
  font-feature-settings: 'tnum';
  text-align: right;
}
.budget-row--dark .budget-row__value { color: var(--accent-bright); }
.budget-row__period {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.budget-row--dark .budget-row__period { color: var(--ink-muted-dark); }
.budget-row__note {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
}
.budget-row--dark .budget-row__note { color: var(--ink-inverse); opacity: 0.85; }


/* Slide 47 · PROMPTS LIBRARY */
[data-slide="53"] .slide__body {
  padding-top: 100px;
  padding-bottom: 60px;
  justify-content: flex-start;
}
[data-slide="53"] .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  margin-bottom: 40px;
}

.prompts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 0 0 auto;
}
.prompt-item {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prompt-item--accent {
  grid-column: span 2;
  border-color: var(--accent-clay);
  border-width: 2px;
  padding: 21px 25px;
}
.prompt-item__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.prompt-item__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
}
.prompt-item__title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin: 0;
}
.prompt-item__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.prompt-item__body code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Bouton « Copier le prompt complet » visible et attractif */
.prompt-item__foot { margin-top: auto; }

.prompt-item__copy {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-black);
  color: var(--ink-inverse);
  border: 1px solid var(--bg-black);
  border-radius: 6px;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms;
  text-align: left;
}
.prompt-item__copy:hover {
  background: var(--accent-clay);
  border-color: var(--accent-clay);
  transform: translateY(-1px);
}
.prompt-item--accent .prompt-item__copy {
  background: var(--accent-clay);
  border-color: var(--accent-clay);
}
.prompt-item--accent .prompt-item__copy:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}
.prompt-item__copy.is-copied {
  background: var(--code-green);
  border-color: var(--code-green);
  color: var(--bg-black);
}
.prompt-item__copy-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.prompt-item__copy-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.prompt-item__copy-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Slide 48 · SUPERPOUVOIRS */
[data-slide="54"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}
[data-slide="54"] .slide__title {
  font-size: 60px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 10px;
}

.superpowers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  flex: 0 0 auto;
}
.superpower-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.superpower-card--dark {
  background: var(--bg-black);
  color: var(--ink-inverse);
  border-color: var(--bg-black);
}
.superpower-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--accent-clay);
  margin: 0;
}
.superpower-card--dark .superpower-card__eyebrow { color: var(--accent-bright); }
.superpower-card__name {
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.superpower-card__name span {
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  font-size: 16px;
  letter-spacing: 0;
}
.superpower-card--dark .superpower-card__name span { color: var(--ink-muted-dark); }
.superpower-card__why {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.superpower-card--dark .superpower-card__why { color: var(--ink-inverse); opacity: 0.88; }


/* Slide 49 · LUNDI MATIN 9H */
[data-slide="55"] .slide__body {
  padding-top: 100px;
  padding-bottom: 80px;
  justify-content: flex-start;
}
[data-slide="55"] .slide__title {
  font-size: 72px;
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
}

.monday-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 0 0 auto;
}
.monday-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 24px 32px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
  align-items: start;
}
.monday-step--accent {
  border-color: var(--accent-clay);
  border-width: 2px;
  padding: 23px 31px;
  background: rgba(217, 119, 87, 0.05);
}
.monday-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-clay);
  color: var(--ink-inverse);
  font-weight: var(--fw-extrabold);
  font-size: 28px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.monday-step--accent .monday-step__num { background: var(--accent-bright); }
.monday-step__title {
  font-size: 26px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.015em;
  margin: 0 0 8px 0;
}
.monday-step__desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 12px 0;
}
.monday-step__cmd {
  background: var(--bg-black);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.monday-step__cmd code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--code-green);
  font-weight: var(--fw-bold);
  flex: 1;
  min-width: 200px;
}
.monday-step__cmd em {
  font-family: var(--font-sans);
  color: var(--ink-muted-dark);
  font-style: italic;
  font-size: 13px;
}
.monday-step__copy {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 160ms;
}
.monday-step__copy:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--accent-bright);
}
.monday-step__copy.is-copied {
  background: rgba(126, 231, 135, 0.2);
  border-color: var(--code-green);
  color: var(--code-green);
}
.monday-step__copy.is-copied::before { content: '✓ '; }


/* Mobile — salve A */
@media (max-width: 900px) {
  .pme-grid,
  .superpowers-grid,
  .prompts-list {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }
  .pme-card,
  .superpower-card,
  .prompt-item {
    padding: 18px 20px !important;
  }
  .pme-card__title,
  .superpower-card__name {
    font-size: 20px !important;
  }
  .pme-card__desc,
  .superpower-card__why,
  .prompt-item__body {
    font-size: 13px !important;
  }
  .budget-row {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px 16px !important;
    padding: 16px 20px !important;
  }
  .budget-row__value {
    font-size: 28px !important;
    text-align: left;
  }
  .budget-row__note {
    grid-column: 1 / -1;
    font-size: 13px !important;
  }
  .monday-step {
    padding: 16px 20px !important;
    grid-template-columns: 52px 1fr !important;
    gap: 16px !important;
  }
  .monday-step__num {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
  .monday-step__title { font-size: 18px !important; }
  .monday-step__desc { font-size: 13px !important; }
  .monday-step__cmd { padding: 10px 12px !important; }
  .monday-step__cmd code {
    font-size: 11px !important;
    word-break: break-all;
  }
  .prompt-item--accent { grid-column: span 1 !important; }
}


/* Mobile — typewriter + result layout */
@media (max-width: 900px) {
  [data-slide="40"] .slide__title {
    font-size: clamp(26px, 7vw, 40px) !important;
    margin-bottom: 24px !important;
  }

  .typewriter-terminal {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .typewriter-line {
    min-height: 18px !important;
  }

  .result-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .result-capture {
    max-height: 220px !important;
    padding: 20px !important;
  }

  .result-capture__placeholder {
    font-size: 12px !important;
  }

  .result-item__num {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .result-item__title {
    font-size: 16px !important;
  }

  .result-item__desc {
    font-size: 13px !important;
  }
}


/* Mobile : sidebar passe en-dessous, code prend toute la largeur */
@media (max-width: 900px) {
  .slide--zoom .slide__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .slide--zoom .slide__title {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  .zoom-sidebar,
  .zoom-legend {
    margin-top: 0 !important;
    padding: 18px 20px !important;
  }

  .zoom-sidebar__num {
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    font-size: 14px;
  }

  .zoom-sidebar__path {
    font-size: 14px !important;
  }

  .zoom-code {
    font-size: 11px !important;
    padding: 18px 20px !important;
    line-height: 1.5 !important;
    overflow-x: auto;
    max-height: none !important;
  }
}

/* ==========================================================================
   Slide RÉFÉRENTIEL — cheatsheet filtrable (onglets + recherche)
   ========================================================================== */

.cheatsheet {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cheatsheet__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--neutral, #E8E4DB);
  padding-bottom: 0;
}

.cheatsheet__tabs {
  display: flex;
  gap: 8px;
}

.cheatsheet__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink, #0F0F0F);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 18px 14px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cheatsheet__tab:hover {
  color: var(--accent-clay, #D97757);
}

.cheatsheet__tab.is-active {
  color: var(--ink, #0F0F0F);
  border-bottom-color: var(--accent-clay, #D97757);
}

.cheatsheet__tab:focus-visible {
  outline: 2px solid var(--accent-clay, #D97757);
  outline-offset: 2px;
  border-radius: 4px;
}

.cheatsheet__search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 280px;
}

.cheatsheet__search-icon {
  position: absolute;
  left: 14px;
  font-size: 18px;
  color: var(--ink-muted, #6B6B6B);
  pointer-events: none;
}

.cheatsheet__search {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink, #0F0F0F);
  background: transparent;
  border: 1px solid var(--neutral, #E8E4DB);
  border-radius: 6px;
  padding: 10px 14px 10px 38px;
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cheatsheet__search:focus {
  outline: none;
  border-color: var(--accent-clay, #D97757);
}

.cheatsheet__search::placeholder {
  color: var(--ink-muted, #6B6B6B);
}

.cheatsheet__list {
  list-style: none;
  margin: 0;
  padding: 4px 24px 4px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
  /* Scroll interne pour contenir n'importe quelle catégorie dans la slide */
  max-height: 340px;
  overflow-y: auto;
  /* Scrollbar discrète, cohérente avec le design system */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-clay, #D97757) transparent;
}

/* Bloc pédagogique sous la liste — pour débutants */
.cheatsheet__tip {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--neutral, #E8E4DB);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
  background: #FBF8F2;
}

.cheatsheet__tip-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cheatsheet__tip-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-clay, #D97757);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
}

.cheatsheet__tip-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #0F0F0F);
  margin: 0;
}

.cheatsheet__tip-body code,
.cheatsheet__tip-note code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  background: rgba(15, 15, 15, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.cheatsheet__tip-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink, #0F0F0F);
  margin: 0;
  padding-top: 4px;
}

.cheatsheet__tip-code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  padding: 12px 14px;
  background: var(--code-bg, #0F0F0F);
  color: #E8E4DB;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
}

.cheatsheet__tip-code .c-com { color: var(--code-comment, #8B949E); }
.cheatsheet__tip-code .c-frontmatter { color: var(--code-orange, #FFA657); }
.cheatsheet__tip-code .c-var { color: var(--code-green, #7EE787); font-weight: 600; }

.cheatsheet__list::-webkit-scrollbar {
  width: 10px;
}

.cheatsheet__list::-webkit-scrollbar-track {
  background: transparent;
}

.cheatsheet__list::-webkit-scrollbar-thumb {
  background-color: var(--accent-clay, #D97757);
  border-radius: 10px;
  border: 3px solid var(--bg-cream, #F5F1E8);
}

.cheatsheet__list::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-bright, #FC750C);
}

.cheatsheet__item {
  display: grid;
  grid-template-columns: minmax(210px, auto) 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--neutral, #E8E4DB);
}

.cheatsheet__item code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink, #0F0F0F);
  background: transparent;
  padding: 0;
  white-space: nowrap;
}

.cheatsheet__item span {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink, #0F0F0F);
}

.cheatsheet__item.is-hidden {
  display: none;
}

.cheatsheet__item.is-match code {
  color: var(--accent-clay, #D97757);
}

.cheatsheet__empty {
  margin: 16px 0 0;
  font-style: italic;
  color: var(--ink-muted, #6B6B6B);
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .cheatsheet__tab,
  .cheatsheet__search {
    transition: none;
  }
}