:root {
  --color-bg: #fafaf8;
  --color-text: #1f2328;
  --color-muted: #5b6168;
  --color-accent: #2c3e50;
  --color-border: #dcdedf;
  --accent-deep: #0f3a63;
  --accent-blue: #1d8fd1;
  --font-main: "Cambria", Georgia, serif;
  --font-ui: "Cambria", Georgia, serif;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  user-select: none;
  -webkit-user-select: none;
}

.deck {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 8vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-22px) scale(0.98);
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.slide-content {
  width: 100%;
  text-align: center;
}

.slide h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--color-accent);
}

.slide h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--color-accent);
}

.slide .subtitle {
  margin-top: 1.2rem;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--color-muted);
  font-style: italic;
}

body {
  cursor: none;
}

/* Slide 1 — page de titre */
#slide-1 {
  overflow: hidden;
  padding: 0;
  justify-content: center;
  background: #f7faff;
}

.shader-grid-background + .slide-content {
  position: relative;
  z-index: 6;
  text-align: center;
}

#slide-1 .slide-content {
  max-width: 1100px;
}

.title-kicker {
  margin: 0 0 1.4rem;
  padding: 14px 34px;
  border-radius: 24px;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1.6;
  text-transform: lowercase;
  text-align: center;
  color: #8a909a;
}

.kicker-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: -5px;
  color: #9ca3af;
  display: inline-block;
  transform-origin: 50% 80%;
  animation: capWiggle 2.6s ease-in-out infinite;
}

@keyframes capWiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-10deg); }
  40%      { transform: rotate(6deg); }
  60%      { transform: rotate(-4deg); }
  80%      { transform: rotate(2deg); }
}

#slide-1 h1 {
  font-family: "Inter", "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #6b7280;
}

.title-main {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ca3af;
  background: currentColor linear-gradient(
    to right,
    currentColor 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(255, 255, 255, 0.95) 60%,
    currentColor 100%
  );
  background-repeat: no-repeat;
  background-size: 50% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 3s linear infinite;
}

@keyframes shimmerSweep {
  0%     { background-position-x: -100%; }
  50%    { background-position-x: 250%; }
  50.01% { background-position-x: -100%; }
  100%   { background-position-x: -100%; }
}

.title-sub {
  font-weight: 300;
}

.typewriter-cursor {
  font-weight: 300;
  color: #9ca3af;
  margin-left: 2px;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.title-author-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.8rem;
}

.title-author {
  margin: 0;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.6;
  color: #9aa1ab;
}

.title-author-sep {
  font-size: 1.5rem;
  font-weight: 300;
  color: #9aa1ab;
}

.title-logos-row {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.title-logo-bw {
  height: 75px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
}

.title-logo-sep {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: #9ca3af;
}

.shader-grid-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f7faff;
  isolation: isolate;
}

.shader-canvas,
.beam-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.shader-canvas {
  z-index: 1;
}

.grid-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(54, 75, 98, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 75, 98, 0.075) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
  mask-image: radial-gradient(circle at center, black 0%, black 66%, transparent 96%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, black 66%, transparent 96%);
}

.beam-canvas {
  z-index: 4;
}

.soft-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, transparent 0%, transparent 48%, rgba(255, 255, 255, 0.58) 100%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.70) 0%,
      rgba(255, 255, 255, 0.16) 22%,
      rgba(255, 255, 255, 0.08) 54%,
      rgba(247, 250, 255, 0.72) 100%
    );
}

.grain-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, #000 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #000 0 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg,
    #9ecbee 0%, #b2d8f6 25%, #c8e5f9 55%, #dceefb 78%, #eef6fd 100%);
}

.sky::before {
  content: "";
  position: absolute;
  inset: -20% -16% 16% 16%;
  z-index: 1;
  pointer-events: none;
  transform-origin: 68% 18%;
  background:
    radial-gradient(circle at 68% 18%,
      rgba(255, 255, 244, 1) 0 3%,
      rgba(255, 238, 176, 0.66) 9%,
      rgba(255, 226, 143, 0.28) 21%,
      transparent 43%),
    conic-gradient(from 182deg at 68% 18%,
      transparent 0deg,
      rgba(255, 255, 255, 0.42) 11deg,
      transparent 23deg,
      transparent 38deg,
      rgba(255, 255, 255, 0.28) 51deg,
      transparent 68deg,
      transparent 86deg,
      rgba(255, 255, 255, 0.22) 99deg,
      transparent 116deg,
      transparent 360deg);
  filter: blur(7px);
  opacity: 0.92;
  mix-blend-mode: screen;
  animation: sunRaysDrift 8s ease-in-out infinite;
}

.sky::after {
  content: "";
  position: absolute;
  inset: -4% 0 0 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 48% at 55% -3%,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.20) 36%,
      transparent 74%),
    linear-gradient(108deg,
      transparent 0 43%,
      rgba(255, 255, 255, 0.25) 50%,
      transparent 59% 100%);
  mix-blend-mode: screen;
  animation: sunBeamSweep 6.5s ease-in-out infinite alternate;
}

@keyframes sunRaysDrift {
  0%, 100% {
    opacity: 0.9;
    transform: rotate(-3deg) scale(1.02);
    filter: blur(10px);
  }
  50% {
    opacity: 1;
    transform: rotate(4deg) scale(1.07);
    filter: blur(6px);
  }
}

@keyframes sunBeamSweep {
  0% {
    opacity: 0.58;
    transform: translateX(-1.5vw) skewX(-2deg);
  }
  100% {
    opacity: 0.95;
    transform: translateX(2vw) skewX(2deg);
  }
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#lB { z-index: 2; }
#lM { z-index: 3; }
#lF { z-index: 4; }

.flux-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

#lBurst {
  z-index: 8;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#lBurst.active {
  opacity: 1;
}

.burst-cloud {
  position: absolute;
  pointer-events: none;
}

.burst-cloud svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cloud {
  position: absolute;
  top: var(--t);
  left: calc(var(--s) * 1px);
  width: calc(var(--w) * 1px);
  opacity: var(--o);
  pointer-events: none;
  will-change: transform;
  animation: fly var(--d) linear infinite var(--dl);
}

.ci {
  width: 100%;
  animation: bob var(--bd) ease-in-out infinite var(--bl);
  transform-origin: center;
}

.cloud svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

@keyframes fly {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + var(--tr) * 1px)); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0px); }
  45%      { transform: translateY(var(--by, -5px)); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .ci, .sky::before, .sky::after { animation: none !important; }
}

.title-header {
  position: absolute;
  top: 48px;
  left: 56px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.4;
  color: #172333;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  opacity: 0;
}

.title-header p {
  margin: 0;
}

.title-header p + p::before {
  content: "|";
  margin-right: 0.85rem;
  color: rgba(23, 35, 51, 0.45);
  font-weight: 600;
}

#slide-1.active .title-header {
  animation: fadeUp 0.7s ease-out forwards;
}

#slide-1 .title-card {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: left;
  padding: 2.2rem 2.6rem 2.3rem;
  isolation: isolate;
}

#slide-1 .title-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0.68) 0%,
    rgba(255, 255, 255, 0.48) 58%,
    rgba(255, 255, 255, 0.16) 100%);
  box-shadow:
    0 18px 46px rgba(20, 55, 85, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(3px);
}

#slide-1 h1 {
  font-family: "Cambria", Georgia, serif;
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0;
  color: #18202b;
  text-shadow: none;
  opacity: 0;
}

#slide-1.active h1 {
  animation: titleReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.25s;
}

@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

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

.title-divider {
  width: 0;
  height: 2px;
  margin: 1.8rem 0 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(255, 231, 166, 0.95));
  box-shadow: 0 3px 14px rgba(8, 31, 54, 0.22);
  border-radius: 2px;
  opacity: 0;
}

#slide-1.active .title-divider {
  animation: dividerGrow 0.7s ease-out forwards;
  animation-delay: 1.15s;
}

@keyframes dividerGrow {
  from { width: 0; opacity: 0; }
  to   { width: 70px; opacity: 1; }
}

.title-meta {
  list-style: none;
  margin-top: 1.7rem;
  font-family: var(--font-ui);
  color: #4d5560;
  text-shadow: none;
  font-size: 0.98rem;
  letter-spacing: 0.2px;
  line-height: 2;
  text-align: left;
}

.title-meta li {
  position: relative;
  opacity: 0;
}

#slide-1.active .title-meta li {
  animation: fadeUp 0.6s ease-out forwards;
}

#slide-1.active .title-meta li:nth-child(1) { animation-delay: 1.4s; }
#slide-1.active .title-meta li:nth-child(2) { animation-delay: 1.55s; }

.title-logos {
  position: absolute;
  right: 6vw;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  z-index: 2;
  opacity: 0;
  width: clamp(430px, 34vw, 640px);
  min-height: 360px;
  padding: 2.6rem 3rem;
  /* background: linear-gradient(105deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.50) 62%, rgba(255, 255, 255, 0.22) 100%); */
  /* box-shadow: 0 18px 46px rgba(20, 55, 85, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.70); */
  backdrop-filter: blur(3px);
  transform: translateY(calc(-50% + 18px));
}

#slide-1.active .title-logos {
  animation: logosFadeUp 0.7s ease-out forwards;
  animation-delay: 1.95s;
}

@keyframes logosFadeUp {
  from { opacity: 0; transform: translateY(calc(-50% + 18px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.title-logo {
  height: 170px;
  width: auto;
  object-fit: contain;
}

.title-logo-sep {
  display: none;
}

@media (max-width: 900px) {
  .title-logos {
    right: 32px;
    top: auto;
    bottom: 22px;
    gap: 12px;
    width: auto;
    min-height: 0;
    padding: 1.1rem 1.3rem;
    transform: translateY(16px);
  }

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

  .title-logo {
    height: 72px;
  }
}

@media (max-width: 600px) {
  #slide-1 .title-card {
    padding: 2rem 1.5rem;
  }
  .title-logos {
    right: 24px;
    bottom: 18px;
    gap: 8px;
    padding: 0.8rem 1rem;
  }
  .title-logo {
    height: 50px;
  }
}
/* Construction progressive (fragments) */
.fragment {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fragment.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Transition slide 1 → slide 2 : fondu doux avec léger envol */
#slide-1 {
  transition: opacity 1.1s ease-in-out, transform 1.1s ease-in-out, visibility 1.1s ease-in-out;
}

#slide-1:not(.active) {
  z-index: 5;
  opacity: 0;
  transform: translateY(-26px) scale(0.98);
}

/* Bandeau fil d'Ariane (slides 3 à 15) */
.toc-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 72px);
  padding: 18px 8vw 16px;
  z-index: 20;
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.toc-bar.visible {
  opacity: 1;
  visibility: visible;
}

.toc-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Cambria", Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: #181a1f;
  margin-bottom: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-label strong {
  color: inherit;
  font-weight: inherit;
}

.toc-progress {
  flex: 0 0 clamp(240px, 30vw, 460px);
  height: 5px;
  width: clamp(240px, 30vw, 460px);
  border-radius: 2px;
  overflow: hidden;
  background: repeating-linear-gradient(
    to right,
    #b9c8d6 0px, #b9c8d6 6px,
    #e3e9ee 6px, #e3e9ee 11px
  );
  animation: beltMoveH 0.9s linear infinite;
}

.toc-progress-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    to right,
    var(--accent-blue) 0px, var(--accent-blue) 6px,
    var(--accent-deep) 6px, var(--accent-deep) 11px
  );
  animation: beltMoveH 0.9s linear infinite;
  transition: width 0.4s ease;
}

@keyframes beltMoveH {
  from { background-position: 0 0; }
  to   { background-position: 11px 0; }
}

/* Slide 2 — Sommaire */
#slide-2 {
  overflow: hidden;
  padding: 0;
  background: #f7faff;
}

#slide-2 .slide-content {
  position: relative;
  z-index: 6;
}

/* Slide 15 — Conclusion : même fond glass que le sommaire */
#slide-15 {
  overflow: hidden;
  padding: 0;
  background: #f7faff;
}

#slide-15 .slide-content {
  position: relative;
  z-index: 6;
}

.eby-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.60), transparent 34%),
    radial-gradient(circle at 76% 24%, rgba(125, 158, 190, 0.28), transparent 38%),
    radial-gradient(circle at 50% 72%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(135deg, #f7f9fb 0%, #d8e1ea 38%, #5f7f9c 72%, #ffffff 100%);
}

.eby-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.38), transparent 30%),
    radial-gradient(circle at 80% 18%, rgba(125, 160, 200, 0.20), transparent 34%),
    radial-gradient(circle at 58% 64%, rgba(255, 255, 255, 0.30), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.26));
  mix-blend-mode: soft-light;
}

.eby-background::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 78%, rgba(255, 255, 255, 0.30), transparent 22%),
    radial-gradient(circle at 68% 42%, rgba(90, 125, 160, 0.18), transparent 26%),
    radial-gradient(circle at 90% 72%, rgba(255, 255, 255, 0.26), transparent 18%);
  filter: blur(24px);
  opacity: 0.48;
  animation: ebySoftGlow 16s ease-in-out infinite alternate;
}

@keyframes ebySoftGlow {
  0%   { transform: translate3d(-1%, -0.5%, 0) scale(1); opacity: 0.36; }
  100% { transform: translate3d(1%, 0.5%, 0) scale(1.02); opacity: 0.58; }
}

.eby-background canvas {
  display: block;
}

.toc-content {
  max-width: 680px;
  width: 100%;
  text-align: left;
}

.toc-kicker {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 10px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a909a;
}

.toc-heading {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: #6b7280;
  text-align: left;
  margin-bottom: 1.8rem;
}

.toc-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
  transform: none;
  transition: none;
}

.toc-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(16px);
}

.toc-list.visible .toc-row {
  animation: tocRowIn 0.5s ease-out forwards;
}

.toc-list.visible .toc-row:nth-child(1) { animation-delay: 0s; }
.toc-list.visible .toc-row:nth-child(2) { animation-delay: 0.08s; }
.toc-list.visible .toc-row:nth-child(3) { animation-delay: 0.16s; }
.toc-list.visible .toc-row:nth-child(4) { animation-delay: 0.24s; }
.toc-list.visible .toc-row:nth-child(5) { animation-delay: 0.32s; }
.toc-list.visible .toc-row:nth-child(6) { animation-delay: 0.4s; }
.toc-list.visible .toc-row:nth-child(7) { animation-delay: 0.48s; }
.toc-list.visible .toc-row:nth-child(8) { animation-delay: 0.56s; }

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

.toc-row-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: auto;
  order: 3;
  color: #9ca3af;
  animation: iconPulse 2.4s ease-in-out infinite;
}

.toc-list .toc-row:nth-child(1) .toc-row-icon { animation-delay: 0.2s; }
.toc-list .toc-row:nth-child(2) .toc-row-icon { animation-delay: 0.5s; }
.toc-list .toc-row:nth-child(3) .toc-row-icon { animation-delay: 0.8s; }
.toc-list .toc-row:nth-child(4) .toc-row-icon { animation-delay: 1.1s; }
.toc-list .toc-row:nth-child(5) .toc-row-icon { animation-delay: 1.4s; }
.toc-list .toc-row:nth-child(6) .toc-row-icon { animation-delay: 1.7s; }
.toc-list .toc-row:nth-child(7) .toc-row-icon { animation-delay: 2.0s; }
.toc-list .toc-row:nth-child(8) .toc-row-icon { animation-delay: 2.3s; }

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.toc-row-num {
  flex: 0 0 40px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #9ca3af;
  display: inline-block;
  background: currentColor linear-gradient(
    to right,
    currentColor 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(255, 255, 255, 0.95) 60%,
    currentColor 100%
  );
  background-repeat: no-repeat;
  background-size: 50% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 4s linear infinite;
}

.toc-list .toc-row:nth-child(1) .toc-row-num { animation-delay: 0.2s; }
.toc-list .toc-row:nth-child(2) .toc-row-num { animation-delay: 0.5s; }
.toc-list .toc-row:nth-child(3) .toc-row-num { animation-delay: 0.8s; }
.toc-list .toc-row:nth-child(4) .toc-row-num { animation-delay: 1.1s; }
.toc-list .toc-row:nth-child(5) .toc-row-num { animation-delay: 1.4s; }
.toc-list .toc-row:nth-child(6) .toc-row-num { animation-delay: 1.7s; }
.toc-list .toc-row:nth-child(7) .toc-row-num { animation-delay: 2.0s; }
.toc-list .toc-row:nth-child(8) .toc-row-num { animation-delay: 2.3s; }

.toc-row-title {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #6b7280;
}

@media (max-width: 600px) {
  .toc-bar {
    gap: 14px;
    padding: 12px 6vw 10px;
  }
  .toc-label {
    font-size: 1.05rem;
  }
  .toc-progress {
    flex-basis: 38vw;
    width: 38vw;
    min-width: 120px;
  }
  .toc-row {
    gap: 16px;
    padding: 12px 16px;
  }
  .toc-row-num {
    flex-basis: 32px;
    font-size: 1.05rem;
  }
  .toc-row-title {
    font-size: 0.92rem;
  }
}
/* Titre épinglé en haut à gauche — convention pour les slides de contenu
   (à partir de la slide 3), au-dessus du bandeau fil d'Ariane. */
.slide-heading {
  position: absolute;
  top: 78px;
  left: 9vw;
  z-index: 2;
  font-family: "Cambria", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #181a1f;
  text-align: left;
  margin: 0;
display: none;
}


/* Slide 3 — Introduction */
#slide-3 {
  overflow: hidden;
  padding: 0;
  background: #f7faff;
}

#slide-3 .slide-content {
  position: relative;
  z-index: 6;
}

.dot-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(54, 75, 98, 0.22) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, black 0%, black 66%, transparent 96%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, black 66%, transparent 96%);
}

.intro-heading-block {
  position: absolute;
  top: 110px;
  left: 9vw;
  right: 9vw;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 20px;
}

.intro-num {
  display: none;
}

.intro-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.intro-progress {
  position: relative;
  flex: 1;
  height: 6px;
  margin-left: 12px;
}

.intro-progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.intro-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c4cbd4, #6b7280);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.intro-progress-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.intro-dot {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(107, 114, 128, 0.6);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.intro-dot-major {
  width: 8px;
  height: 8px;
  background: #6b7280;
  border-color: rgba(255, 255, 255, 0.85);
}

.intro-progress-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-tick {
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
}

.intro-tick-line {
  display: block;
  width: 1px;
  height: 2px;
  background: rgba(107, 114, 128, 0.45);
}

.intro-tick-text {
  position: absolute;
  left: 50%;
  bottom: 0px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  width: max-content;
  white-space: nowrap;
  color: #374151;
  transform: rotate(-20deg);
  transform-origin: bottom left;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.intro-tick.is-active .intro-tick-text {
  background: #0ea5e9;
  border-color: #0ea5e9;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
  color: #ffffff;
  font-weight: 700;
}

.slide-counter {
  position: fixed;
  right: 32px;
  bottom: 26px;
  z-index: 20;
  padding: 10px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: #6b7280;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.slide-counter.is-visible {
  opacity: 1;
}

.slide-counter-current {
  color: #0ea5e9;
  font-weight: 700;
}

@media (max-width: 600px) {
  .intro-heading-block {
    top: 32px;
    left: 6vw;
    right: 6vw;
  }
  .intro-progress {
    height: 5px;
  }
}

.intro-stage {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 360px;
}

.morph-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.morph-text.morph-hidden {
  opacity: 0;
  pointer-events: none;
}

.trajectory-circuit {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  transform: translateY(-30px);
}

.morph-text.morph-hidden ~ .trajectory-circuit {
  opacity: 1;
  pointer-events: auto;
}

.trajectory-kicker {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: normal;
  text-transform: none;
  color: #6b7280;
  text-align: center;
}

.stack-wrap {
  position: relative;
  width: 1180px;
  height: 480px;
  margin-top: 40px;
}

.stack-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.stack-link-rail {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2.75;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.5));
}

.stack-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 230px;
  margin-left: -380px;
  margin-top: -115px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 32px 40px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
  opacity: 0;
  z-index: 1;
  transform: translate(var(--sx), var(--sy)) skewY(-2deg) rotate(var(--sr)) scale(0.92) translateY(14px);
  transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-left 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), margin-top 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 1.1s ease;
}

.stack-card-front {
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
  border-color: rgba(14, 165, 233, 0.35);
}

.morph-text.morph-hidden ~ .trajectory-circuit .stack-card {
  animation: stackCardIn 0.6s ease-out forwards;
  animation-delay: var(--sd);
}

@keyframes stackCardIn {
  to {
    opacity: 1;
    transform: translate(var(--sx), var(--sy)) skewY(-2deg) rotate(var(--sr)) scale(1);
  }
}

.morph-text.morph-hidden ~ .trajectory-circuit .stack-card.stack-card-align {
  width: 330px;
  height: 280px;
  margin-left: -165px;
  margin-top: -140px;
  padding: 24px 26px;
  animation: stackCardAlign 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes stackCardAlign {
  from {
    opacity: 1;
    transform: translate(var(--sx), var(--sy)) skewY(-2deg) rotate(var(--sr)) scale(1);
  }
  to {
    opacity: 1;
    transform: translate(var(--fx), 90px) rotate(0deg) scale(1);
  }
}

.stack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffff, #eef3f8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #0ea5e9;
}

.stack-icon svg {
  width: 24px;
  height: 24px;
}

.stack-title {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: #1f2937;
  white-space: normal;
}

.stack-desc {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.45;
  white-space: normal;
}

.morph-span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4vw;
  opacity: 0%;
}

.morph-span-a {
  opacity: 100%;
}

.morph-pill {
  display: inline-block;
  max-width: 80%;
  padding: 32px 54px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.35;
  color: #6b7280;
}

@media (max-width: 600px) {
  .morph-pill {
    font-size: 1.3rem;
    padding: 16px 22px;
  }
}

/* ─────────────────────────────────────────────
   Slide 4 — Présentation de l'entreprise
───────────────────────────────────────────── */
.poulaillon-layout {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.poulaillon-text {
  position: relative;
  z-index: 2;
  width: 56%;
  text-align: left;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.poulaillon-text.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.poulaillon-points {
  list-style: none;
  margin: 0 0 1.6rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.poulaillon-point {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(14px);
}

#slide-4.active .poulaillon-point {
  animation: poulaillonPointIn 0.6s ease forwards;
}

#slide-4.active .poulaillon-point:nth-child(1) { animation-delay: 0s; }
#slide-4.active .poulaillon-point:nth-child(2) { animation-delay: 1.5s; }
#slide-4.active .poulaillon-point:nth-child(3) { animation-delay: 3s; }
#slide-4.active .poulaillon-point:nth-child(4) { animation-delay: 4.5s; }

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

.poulaillon-point-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffff, #eef3f8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #0ea5e9;
}

.poulaillon-point-icon svg {
  width: 20px;
  height: 20px;
}

.poulaillon-point p {
  margin: 0;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: #374151;
}

.poulaillon-popups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.popup-tag {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
}

.poulaillon-globe-wrap {
  /* Taille et position fixes une fois pour toutes (jamais animées) ; les
     deux états (petite à droite / grosse en bas) ne sont représentés que
     par "transform", traité par le compositeur GPU sans recalcul de
     mise en page ni repaint à chaque frame — donc fluide. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1800px;
  height: 1800px;
  margin: -900px 0 0 -900px;
  z-index: 1;
  transform: translate(42vw, 40px) scale(0.42);
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.poulaillon-globe-wrap.is-zoomed {
  transform: translate(0, calc(50vh + 400px)) scale(1.1);
}

.poulaillon-globe {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.poulaillon-globe-legends {
  position: absolute;
  left: 50%;
  top: -3vh;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
  pointer-events: none;
}

.poulaillon-globe-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #374151;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.poulaillon-globe-legends.visible .poulaillon-globe-legend {
  opacity: 1;
  transform: translateY(0);
}

.poulaillon-globe-legend-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 6px rgba(14, 165, 233, 0.6);
}

.poulaillon-globe-legend-dot-pink {
  background: #ff2ea6;
  box-shadow: 0 0 8px rgba(255, 46, 166, 0.7);
}

/* Position calculée en JS une fois le zoom terminé. Sorti de la slide et
   placé en position fixe directement sous <body>, avec un z-index très
   élevé : ça élimine toute ambiguïté de contexte d'empilement local avec
   le canvas WebGL du globe. */
.poulaillon-globe-links {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}

.poulaillon-globe-links.visible {
  opacity: 1;
}

.globe-link-line {
  stroke: #0ea5e9;
  stroke-width: 5;
  stroke-dasharray: 8 6;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.poulaillon-globe-links.visible .globe-link-line[data-for="lille"] { transition-delay: 0s; }
.poulaillon-globe-links.visible .globe-link-line[data-for="strasbourg"] { transition-delay: 0.4s; }
.poulaillon-globe-links.visible .globe-link-line[data-for="colmar"] { transition-delay: 0.8s; }
.poulaillon-globe-links.visible .globe-link-line[data-for="selestat"] { transition-delay: 1.2s; }
.poulaillon-globe-links.visible .globe-link-line[data-for="mulhouse"] { transition-delay: 1.6s; }

.poulaillon-globe-links.visible .globe-link-line {
  opacity: 1;
}


.poulaillon-polaroids {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.polaroid-card {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 290px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 13px 13px 42px;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22), 0 3px 6px rgba(15, 23, 42, 0.12);
  transform: translate(-50%, 0) rotate(var(--pr)) scale(0.9);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.polaroid-card:nth-child(1) { transition-delay: 0s; }
.polaroid-card:nth-child(2) { transition-delay: 0.4s; }
.polaroid-card:nth-child(3) { transition-delay: 0.8s; }
.polaroid-card:nth-child(4) { transition-delay: 1.2s; }
.polaroid-card:nth-child(5) { transition-delay: 1.6s; }

.poulaillon-globe-legends.visible ~ .poulaillon-polaroids .polaroid-card,
.poulaillon-polaroids.visible .polaroid-card {
  opacity: 1;
  transform: translate(-50%, 0) rotate(var(--pr)) scale(0.78);
}

/* Appliquée par JS une fois l'entrée terminée, pour ne pas entrer en
   conflit avec la transition d'apparition ci-dessus. */
.polaroid-card.floating {
  animation: polaroidFloat var(--ifd, 4s) ease-in-out infinite;
  animation-delay: var(--ifo, 0s);
}

@keyframes polaroidFloat {
  0%, 100% { transform: translate(-50%, 0) rotate(var(--pr)) scale(0.78); }
  50% { transform: translate(-50%, -14px) rotate(var(--pr)) scale(0.78); }
}

.polaroid-card img {
  display: block;
  width: 100%;
  height: var(--ih, 212px);
  object-fit: cover;
  background: #e5e7eb;
  border-radius: 12px;
}

.polaroid-card.polaroid-missing img {
  visibility: hidden;
}

.polaroid-card.polaroid-missing::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 9px;
  height: var(--ih, 212px);
  border-radius: 12px;
  background: linear-gradient(160deg, #eef3f8, #dbe5ee);
  display: flex;
}

.polaroid-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  text-align: center;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
}

@media (max-width: 1100px) {
  .poulaillon-text {
    width: 100%;
  }
  .poulaillon-globe-wrap {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 320px;
    height: 320px;
    margin: 24px auto 0;
  }
  .poulaillon-layout {
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────
   Slide 5 — Système d'activités diversifié
───────────────────────────────────────────── */
.activity-poles {
  position: relative;
  z-index: 2;
  max-width: 96vw;
  margin: 28px auto 1.6rem;
  text-align: center;
}

.activity-poles-label {
  white-space: nowrap;
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
}


.bubble-field {
  position: relative;
  width: 100%;
  max-width: 1620px;
  height: clamp(320px, 56vh, 600px);
  margin: 0 auto;
}

.bubble-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bubble {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.6vw, 8px);
  width: clamp(86px, 11vw, 150px);
  height: clamp(86px, 11vw, 150px);
  padding: clamp(8px, 1.1vw, 12px);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0ea5e9;
  will-change: transform;
  animation: blobMorph1 9s ease-in-out infinite;
}

.bubble:nth-child(3n+1) { animation-name: blobMorph1; }
.bubble:nth-child(3n+2) { animation-name: blobMorph2; }
.bubble:nth-child(3n+3) { animation-name: blobMorph3; }
.bubble:nth-child(2)  { animation-duration: 10.5s; animation-delay: -2s; }
.bubble:nth-child(3)  { animation-duration: 8s;    animation-delay: -4s; }
.bubble:nth-child(4)  { animation-duration: 11s;   animation-delay: -1s; }
.bubble:nth-child(5)  { animation-duration: 9.5s;  animation-delay: -6s; }
.bubble:nth-child(6)  { animation-duration: 10s;   animation-delay: -3s; }
.bubble:nth-child(7)  { animation-duration: 8.5s;  animation-delay: -5s; }
.bubble:nth-child(8)  { animation-duration: 11.5s; animation-delay: -2.5s; }

@keyframes blobMorph1 {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  34%      { border-radius: 62% 38% 41% 59% / 58% 39% 61% 42%; }
  67%      { border-radius: 38% 62% 56% 44% / 47% 63% 37% 53%; }
}

@keyframes blobMorph2 {
  0%, 100% { border-radius: 55% 45% 35% 65% / 50% 55% 45% 50%; }
  34%      { border-radius: 35% 65% 60% 40% / 60% 40% 60% 40%; }
  67%      { border-radius: 60% 40% 45% 55% / 40% 60% 40% 60%; }
}

@keyframes blobMorph3 {
  0%, 100% { border-radius: 48% 52% 50% 50% / 55% 48% 52% 45%; }
  34%      { border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%; }
  67%      { border-radius: 40% 60% 58% 42% / 52% 45% 55% 48%; }
}

.bubble-icon {
  width: clamp(24px, 3vw, 38px);
  height: clamp(24px, 3vw, 38px);
  display: flex;
}

.bubble-icon svg {
  width: 100%;
  height: 100%;
}

.bubble-icon-detailed {
  width: clamp(34px, 4.2vw, 52px);
  height: clamp(34px, 4.2vw, 52px);
}

.bubble-label {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(0.6rem, 0.95vw, 0.85rem);
  font-weight: 600;
  color: #374151;
  text-align: center;
  line-height: 1.2;
}

.activity-overlap {
  position: relative;
  width: 100%;
  min-height: clamp(460px, 74vh, 690px);
}

/* Le contenu de la slide (titre + bulles, 690px mini) est centré
   verticalement par .slide ; sur un écran bas, ce centrage peut faire
   remonter le titre jusque sous la barre de progression fixe (.toc-bar) /
   l'en-tête de section (.intro-heading-block, top:110px). On bascule alors
   en alignement haut + défilement, comme pour les autres slides denses. */
@media (max-height: 820px) {
  #slide-5 {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: 19vh;
  }
}

.activity-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.activity-stage.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.markets-section {
  position: absolute;
  inset: 0 0 -4vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 0;
  transition: opacity 0.4s ease;
}

.markets-section.is-hidden {
  opacity: 0;
  pointer-events: none;
}


.markets-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.markets-point {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: #374151;
}

.markets-point-tag {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.3px;
}

.markets-chart-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 32px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.markets-section.visible .markets-chart-card {
  opacity: 1;
  transform: scale(1);
}

.markets-chart {
  position: relative;
  width: 226px;
  height: 226px;
}

.donut-spin-wrap {
  position: absolute;
  inset: 0;
  animation: donutSpin 28s linear infinite;
}

.donut-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 48%, #000 51%);
  mask: radial-gradient(circle, transparent 48%, #000 51%);
  animation: donutGlow 2.6s ease-in-out infinite;
}

/* Chaque part n'est colorée que sur sa propre plage angulaire (le reste
   du dégradé est transparent) : 4 éléments empilés, mais indépendants,
   donc chacun peut être animé séparément. */
.donut-ring-btoc {
  background: conic-gradient(from 0deg, #0ea5e9 0%, #0ea5e9 59.26%, transparent 59.26%, transparent 100%);
  animation-delay: 0s;
}
.donut-ring-btob {
  background: conic-gradient(from 0deg, transparent 0%, transparent 59.26%, #6b7280 59.26%, #6b7280 97.23%, transparent 97.23%, transparent 100%);
  animation-delay: 0.65s;
}
.donut-ring-eau {
  background: conic-gradient(from 0deg, transparent 0%, transparent 97.23%, #7dd3fc 97.23%, #7dd3fc 99.57%, transparent 99.57%, transparent 100%);
  animation-delay: 1.3s;
}
.donut-ring-holding {
  background: conic-gradient(from 0deg, transparent 0%, transparent 99.57%, #cbd5e1 99.57%, #cbd5e1 100%);
  animation-delay: 1.95s;
}

@keyframes donutSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes donutGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(14, 165, 233, 0.25)); }
  50%      { filter: brightness(1.22) drop-shadow(0 0 14px rgba(14, 165, 233, 0.6)); }
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.donut-center-value {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  color: #374151;
}

.donut-center-label {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #9ca3af;
}

.donut-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

.legend-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px 10px;
  border-radius: 14px;
  border: 2px solid transparent;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.legend-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.legend-item-btoc {
  background: rgba(14, 165, 233, 0.16);
  border-color: rgba(14, 165, 233, 0.45);
}
.legend-item-btob {
  background: rgba(107, 114, 128, 0.16);
  border-color: rgba(107, 114, 128, 0.4);
}
.legend-item-eau {
  background: rgba(125, 211, 252, 0.22);
  border-color: rgba(125, 211, 252, 0.55);
}
.legend-item-holding {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
}

.legend-item-btoc::before { background: #0ea5e9; }
.legend-item-btob::before { background: #6b7280; }
.legend-item-eau::before { background: #7dd3fc; }
.legend-item-holding::before { background: #cbd5e1; }

.legend-item-btoc .legend-percent { color: #0ea5e9; }
.legend-item-btob .legend-percent { color: #6b7280; }
.legend-item-eau .legend-percent { color: #38bdf8; }
.legend-item-holding .legend-percent { color: #94a3b8; }

.legend-percent {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
}

.legend-name {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #9ca3af;
}

.legend-item-btoc .legend-name,
.legend-item-btob .legend-name {
  text-transform: none;
}

.evolution-tooltip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* Posées directement sur le graphique déjà affiché, plutôt que d'en
   recréer un second : on réutilise le même cercle. */
.markets-chart.show-evolution .evolution-tooltip {
  opacity: 1;
  transform: scale(1);
}

.evolution-tooltip-btoc { top: 6%; left: -120px; transition-delay: 0.05s; }
.evolution-tooltip-btob { top: 38%; right: -48px; transition-delay: 0.25s; }
.evolution-tooltip-eau { top: 76%; left: -96px; transition-delay: 0.45s; }
.evolution-tooltip-holding { top: 6%; right: -156px; transition-delay: 0.65s; }

.evolution-tooltip-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-btoc { background: #0ea5e9; }
.dot-btob { background: #6b7280; }
.dot-eau { background: #7dd3fc; }
.dot-holding { background: #cbd5e1; }

.evolution-tooltip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.evolution-tooltip-value {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
}

.evolution-tooltip-value.up { color: #16a34a; }
.evolution-tooltip-value.down { color: #dc2626; }

.evolution-tooltip-label {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #6b7280;
}

.factories-section {
  position: absolute;
  top: 200px;
  left: 4vw;
  right: 4vw;
  bottom: 4vh;
  z-index: 5;
  transition: opacity 0.4s ease;
}

.factories-section.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.factory-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 72% 70% at center, black 55%, transparent 98%);
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at center, black 55%, transparent 98%);
}

.factory-map-real {
  position: absolute;
  inset: 0;
}

.factory-map-real .maplibregl-ctrl-bottom-left,
.factory-map-real .maplibregl-ctrl-bottom-right {
  transform: scale(0.85);
  transform-origin: bottom right;
}

.factory-map-caption {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 420px;
  text-align: left;
}


.factory-map-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.factory-map-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #4b5563;
}

.factory-map-tag {
  flex-shrink: 0;
  min-width: 68px;
  text-align: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.16);
  color: #0ea5e9;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.factory-pin-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translateY(-4px);
}

.factory-pin-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0ea5e9;
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.3), 0 4px 12px rgba(15, 23, 42, 0.3);
}

.factory-pin-marker.factory-pin-water .factory-pin-dot {
  background: #7dd3fc;
  box-shadow: 0 0 0 6px rgba(125, 211, 252, 0.35), 0 4px 12px rgba(15, 23, 42, 0.3);
}

.factory-pin-label {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #374151;
  max-width: 100%;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.factory-map-closing {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  max-width: 460px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.factory-map-closing.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.factory-map-closing .morph-pill {
  display: block;
  max-width: 100%;
  padding: 24px 30px;
  font-size: 1.85rem;
  line-height: 1.4;
}

.factory-map-links {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.factory-map-link-line {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2.4;
  stroke-dasharray: 7 6;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.45));
}

.factory-map-link-line.is-visible {
  opacity: 0.85;
}

/* ─────────────────────────────────────────────
   Slide 6 — Croissance du chiffre d'affaires
───────────────────────────────────────────── */
.growth-layout {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 90px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.growth-chart-card {
  width: 100%;
  padding: 22px 10px 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.growth-chart-title {
  margin: 0 0 10px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #374151;
  text-align: left;
}

.growth-chart {
  display: block;
  width: 100%;
  height: 330px;
}

.growth-grid line {
  stroke: rgba(107, 114, 128, 0.18);
  stroke-width: 1;
}

.growth-grid-label {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 15px;
  font-weight: 600;
  fill: #9ca3af;
  text-anchor: end;
}

.growth-year {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 14px;
  font-weight: 600;
  fill: #9ca3af;
  text-anchor: middle;
}

.growth-line {
  stroke: #0ea5e9;
  stroke-width: 2.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.3));
}

.growth-dot {
  fill: #ffffff;
  stroke: #0ea5e9;
  stroke-width: 2.5;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(0.2s + var(--gd) * 0.09s);
}

.growth-value {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 16px;
  font-weight: 800;
  fill: #0369a1;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: calc(0.35s + var(--gd) * 0.09s);
}

.growth-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.slide.active .growth-reveal {
  clip-path: inset(0 0% 0 0);
}

.slide.active .growth-dot {
  opacity: 1;
  transform: scale(1);
}

.slide.active .growth-value {
  opacity: 1;
}

.growth-cards {
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.growth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(0.3s + var(--gc) * 0.12s);
}

.slide.active .growth-card {
  opacity: 1;
  transform: translateY(0);
}

.growth-card-wide {
  grid-column: span 1;
}

.growth-card-value {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: #1f2937;
}

.growth-card-value-up {
  color: #16a34a;
}

.growth-card-label {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #6b7280;
}

@media (max-width: 900px) {
  .growth-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Slide 7 — Contexte industriel / système d'information */
#slide-7 {
  overflow: hidden;
  padding: 18vh 6vw 7vh;
}

#slide-7 .intro-heading-block {
  z-index: 8;
}

#slide-7 .intro-title {
  max-width: min(900px, 66vw);
  line-height: 1.08;
}

.context-content {
  position: relative;
  z-index: 4;
  max-width: 1240px;
  width: 100%;
  text-align: left;
}

.context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.3vw, 32px);
  align-items: stretch;
}

.context-panel {
  position: relative;
  min-height: 400px;
  padding: clamp(20px, 2vw, 30px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
}

#slide-7.active .context-panel {
  animation: contextPanelIn 0.62s ease-out forwards;
}

#slide-7.active .context-panel-si {
  animation-delay: 0.16s;
}

.context-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
}

.context-panel-industrial::before {
  background:
    radial-gradient(circle at 78% 14%, rgba(14, 165, 233, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(233, 241, 248, 0.30));
}

.context-panel-si::before {
  background:
    radial-gradient(circle at 78% 14%, rgba(107, 114, 128, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(229, 231, 235, 0.34));
}

.context-panel-head {
  position: relative;
  z-index: 1;
  min-height: 84px;
}

.context-kicker {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 10px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  letter-spacing: normal;
  text-transform: none;
  color: #6b7280;
}

.context-panel-industrial .context-kicker {
  color: #6b7280;
}

.context-panel-si .context-kicker {
  color: #6b7280;
}

.context-panel h3 {
  margin: 0;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(1.28rem, 1.75vw, 1.82rem);
  font-weight: 300;
  line-height: 1.18;
  color: #4b5563;
}

.speed-gauge,
.paper-clock {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 110px;
  margin: 0.4rem 0 0.8rem;
}

.speed-gauge-svg {
  position: relative;
  width: min(150px, 42%);
  height: auto;
  overflow: visible;
}

.speed-gauge-track,
.speed-gauge-fill {
  fill: none;
  stroke-linecap: round;
  stroke-width: 14;
}

.speed-gauge-track {
  stroke: rgba(156, 163, 175, 0.24);
}

.speed-gauge-fill {
  stroke: #0ea5e9;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

#slide-7.active .speed-gauge-fill {
  animation: gaugeRush 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s;
}

.speed-needle {
  transform-origin: 120px 124px;
  transform: rotate(-58deg);
}

.speed-needle line {
  stroke: #64748b;
  stroke-width: 4;
  stroke-linecap: round;
}

.speed-needle circle {
  fill: #ffffff;
  stroke: #0ea5e9;
  stroke-width: 4;
}

#slide-7.active .speed-needle {
  animation: needleRush 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s;
}

.speed-counter {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.counter-value {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(1.3rem, 1.9vw, 2rem);
  font-weight: 700;
  color: #374151;
  font-variant-numeric: tabular-nums;
}

.counter-unit {
  margin-top: 0.25rem;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8a909a;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.paper-clock svg {
  position: relative;
  width: min(110px, 34%);
  height: auto;
  overflow: visible;
}

.paper-sheet,
.paper-fold,
.paper-line,
.clock-face,
.clock-hand {
  fill: none;
  stroke: #8a909a;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.paper-sheet {
  fill: rgba(255, 255, 255, 0.45);
  stroke-width: 2.75;
}

.paper-fold,
.paper-line {
  stroke-width: 2.75;
  opacity: 0.74;
}

.clock-face {
  fill: rgba(243, 244, 246, 0.74);
  stroke-width: 4;
}

.clock-hand {
  stroke-width: 4;
}

#slide-7.active .clock-hand-slow {
  transform-origin: 124px 102px;
  animation: clockSlow 8.5s linear infinite;
}

.context-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(0.98rem, 1.03vw, 1.08rem);
  line-height: 1.38;
}

.context-list li {
  position: relative;
  padding: 2px 0 2px 20px;
  color: #4b5563;
  opacity: 0;
  transform: translateY(12px);
}

.context-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.72;
}

.context-list-fast li::before {
  background: #0ea5e9;
}

.context-list-slow li {
  color: #6b7280;
}

.context-list-slow li::before {
  background: #9ca3af;
}

#slide-7.active .context-list-fast li {
  animation: contextItemIn 0.45s ease-out forwards;
  animation-delay: calc(0.62s + var(--i, 0) * 0.08s);
}

#slide-7.active .context-list-slow li {
  animation: contextItemIn 0.68s ease-out forwards;
  animation-delay: calc(0.98s + var(--i, 0) * 0.18s);
}

.context-list li:nth-child(1) { --i: 0; }
.context-list li:nth-child(2) { --i: 1; }
.context-list li:nth-child(3) { --i: 2; }
.context-list li:nth-child(4) { --i: 3; }
.context-list li:nth-child(5) { --i: 4; }

@keyframes contextPanelIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gaugeRush {
  to { stroke-dashoffset: 10; }
}

@keyframes needleRush {
  0% { transform: rotate(-58deg); }
  76% { transform: rotate(55deg); }
  100% { transform: rotate(47deg); }
}

@keyframes clockSlow {
  to { transform: rotate(360deg); }
}

@keyframes contextItemIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  #slide-7 {
    padding: 15vh 2.2vw 3.5vh;
  }
  .context-grid {
    gap: 18px;
  }
  .context-panel {
    min-height: 0;
    padding: 22px;
  }
  .counter-value {
    font-size: 2.2rem;
  }
}

@media (max-width: 760px) {
  #slide-7 {
    overflow-y: auto;
    padding: 18vh 5vw 6vh;
  }
  #slide-7 .intro-title {
    max-width: 86vw;
  }
  .context-grid {
    grid-template-columns: 1fr;
  }
  .context-panel {
    min-height: auto;
  }
}
/* Slide 7 — compteur au-dessus de la jauge */
.speed-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.speed-gauge .speed-counter {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  order: -1;
}
/* Slide 7 — constat final */
.context-content {
  transition: opacity 0.42s ease, transform 0.42s ease;
}

#slide-7:has(.context-constat.visible) .context-content {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  pointer-events: none;
}

.context-constat {
  position: absolute;
  left: 6vw;
  right: 6vw;
  top: 18vh;
  bottom: 7vh;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.context-constat.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.context-constat-pill {
  max-width: 980px;
  font-size: clamp(1.6rem, 2.6vw, 2.45rem);
  line-height: 1.35;
}

.context-constat-label {
  display: block;
  margin-bottom: 0.55rem;
  color: #0ea5e9;
  font-weight: 700;
}

@media (max-width: 760px) {
  .context-constat {
    left: 5vw;
    right: 5vw;
    top: 18vh;
    bottom: 6vh;
  }
}
/* Slide 8 — tensions de croissance */
#slide-8 {
  overflow: hidden;
  padding: 19vh 6vw 7vh;
}

#slide-8 .intro-heading-block {
  z-index: 8;
}

#slide-8 .intro-title {
  max-width: min(920px, 68vw);
  line-height: 1.08;
}

.tension-content {
  position: relative;
  z-index: 4;
  max-width: 1320px;
  width: 100%;
}

.tension-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  min-height: 500px;
  max-width: 1600px;
  margin: 0 auto;
}

.tension-card {
  position: relative;
  min-height: 500px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
  isolation: isolate;
  opacity: 0;
  transform: translateY(22px) scale(0.985);
}

#slide-8.active .tension-card {
  animation: tensionCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.16s + var(--card-index, 0) * 0.12s);
}

.tension-card:nth-child(1) { --card-index: 0; }
.tension-card:nth-child(2) { --card-index: 1; }
.tension-card:nth-child(3) { --card-index: 2; }

.tension-card-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--image-url);
  background-size: cover;
  background-position: center;
  filter: saturate(0.88) contrast(0.94) brightness(0.92);
  transform: scale(1.03);
  transition: transform 0.7s ease, filter 0.7s ease;
}

.tension-card:hover .tension-card-bg {
  transform: scale(1.09);
  filter: saturate(0.96) contrast(0.98) brightness(0.95);
}

.tension-card-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(55, 65, 81, 0.92) 0%,
      rgba(75, 85, 99, 0.70) 36%,
      rgba(255, 255, 255, 0.10) 72%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.26), transparent 30%);
}

.tension-card-industrial .tension-card-overlay {
  background:
    linear-gradient(to top,
      rgba(34, 74, 99, 0.92) 0%,
      rgba(67, 102, 125, 0.68) 34%,
      rgba(255, 255, 255, 0.08) 72%),
    radial-gradient(circle at 22% 18%, rgba(186, 230, 253, 0.28), transparent 32%);
}

.tension-card-adhesion .tension-card-overlay {
  background:
    linear-gradient(to top,
      rgba(74, 85, 104, 0.92) 0%,
      rgba(107, 114, 128, 0.68) 34%,
      rgba(255, 255, 255, 0.08) 72%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.25), transparent 32%);
}

.tension-card-identity .tension-card-overlay {
  background:
    linear-gradient(to top,
      rgba(63, 75, 92, 0.94) 0%,
      rgba(100, 116, 139, 0.66) 34%,
      rgba(255, 255, 255, 0.08) 72%),
    radial-gradient(circle at 22% 18%, rgba(219, 234, 254, 0.25), transparent 32%);
}

.tension-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 500px;
  padding: clamp(22px, 2.2vw, 34px);
  color: #ffffff;
}

.tension-index {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.tension-card h3 {
  margin: 0;
  max-width: 95%;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(1.35rem, 1.75vw, 1.95rem);
  font-weight: 600;
  line-height: 1.12;
  color: #ffffff;
  text-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
}

.tension-card p {
  margin: 0.8rem 0 0;
  max-width: 96%;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(0.92rem, 0.98vw, 1.04rem);
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.82);
}

.tension-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1.6rem;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

.tension-arrow {
  flex: 0 0 auto;
  font-size: 1.05rem;
  transform: translateX(0);
  transition: transform 0.35s ease;
}

.tension-card:hover .tension-arrow {
  transform: translateX(4px);
}

@keyframes tensionCardIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1100px) {
  #slide-8 {
    padding: 15vh 2.2vw 3.5vh;
  }
  .tension-grid {
    gap: 16px;
    min-height: 440px;
  }
  .tension-card,
  .tension-card-content {
    min-height: 440px;
  }
  .tension-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .tension-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 760px) {
  #slide-8 {
    overflow-y: auto;
    padding: 18vh 5vw 6vh;
  }
  #slide-8 .intro-title {
    max-width: 86vw;
  }
  .tension-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .tension-card,
  .tension-card-content {
    min-height: 360px;
  }
}
/* Slide 8 — variante DA claire */
.tension-card {
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.tension-card-bg {
  filter: blur(3px) saturate(0.86) contrast(0.94) brightness(1.04);
  transform: scale(1.08);
}

.tension-card:hover .tension-card-bg {
  transform: scale(1.13);
  filter: blur(2px) saturate(0.90) contrast(0.96) brightness(1.06);
}

.tension-card-overlay,
.tension-card-industrial .tension-card-overlay,
.tension-card-adhesion .tension-card-overlay,
.tension-card-identity .tension-card-overlay {
  background:
    linear-gradient(to top,
      #ffffff 0%,
      #ffffff 46%,
      rgba(255, 255, 255, 0.76) 62%,
      rgba(255, 255, 255, 0.18) 82%,
      rgba(255, 255, 255, 0.04) 100%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.34), transparent 34%);
}

.tension-index {
  background: #0ea5e9;
  border-color: rgba(14, 165, 233, 0.28);
  color: #ffffff;
}

.tension-card h3 {
  color: #374151;
  text-shadow: none;
}

.tension-card p {
  color: #6b7280;
}

.tension-card-footer {
  background: rgba(255, 255, 255, 0.48);
  border-color: rgba(255, 255, 255, 0.68);
  color: #4b5563;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
/* Slide 8 — agrandissement cards */
.tension-content {
  max-width: 1440px;
}

.tension-grid {
  min-height: 460px;
}

.tension-card,
.tension-card-content {
  min-height: 460px;
}

.tension-card-content {
  padding: clamp(26px, 2.6vw, 42px);
}

.tension-card h3 {
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  line-height: 1.1;
}

.tension-card p {
  font-size: clamp(1.02rem, 1.08vw, 1.16rem);
  line-height: 1.45;
}

.tension-card-footer {
  font-size: 0.96rem;
  padding: 14px 16px;
}

.tension-index {
  width: 58px;
  height: 58px;
  font-size: 1.05rem;
}

.tension-card-bg {
  filter: blur(1.5px) saturate(0.88) contrast(0.95) brightness(1.04);
}

.tension-card:hover .tension-card-bg {
  filter: blur(1px) saturate(0.92) contrast(0.97) brightness(1.06);
}

@media (max-width: 1100px) {
  .tension-grid {
    min-height: 470px;
  }
  .tension-card,
  .tension-card-content {
    min-height: 470px;
  }
}
/* Slide 9 - problematique effet shutter */
#slide-9 {
  overflow: hidden;
  padding: 18vh 6vw 7vh;
}

#slide-9 .intro-heading-block {
  z-index: 8;
}

#slide-9 .intro-title {
  max-width: min(760px, 58vw);
}

.problem-content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1500px;
  min-height: 58vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-shutter {
  width: min(1180px, 82vw);
  max-width: calc(100vw - 12vw);
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 56px 76px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.problem-line {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  line-height: 1.35;
  max-width: 100%;
  white-space: nowrap;
  gap: 0 0.32em;
  font-size: clamp(1.1rem, 3.2vw, 2.65rem);
  transform: scale(var(--fit-scale, 1));
  transform-origin: center;
}

.problem-word {
  display: inline-flex;
  align-items: baseline;
}

.problem-char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0 0.025em;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0;
  color: #0ea5e9;
  text-rendering: geometricPrecision;
}

.problem-char-main {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.08em);
}

.problem-char-slice {
  position: absolute;
  inset: 0;
  display: inline-block;
  opacity: 0;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 12px 24px rgba(255, 255, 255, 0.28);
}

.problem-char-slice-top {
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translateX(-115%);
}

.problem-char-slice-mid {
  clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%);
  color: rgba(255, 255, 255, 0.92);
  transform: translateX(115%);
}

.problem-char-slice-bottom {
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translateX(-115%);
}

#slide-9.active .problem-char-main {
  animation: problemCharIn 0.78s ease forwards;
  animation-delay: calc(0.25s + (var(--line-index) * 0.22s) + (var(--char-index) * 0.022s));
}

#slide-9.active .problem-char-slice-top {
  animation: problemSliceLeft 0.72s ease-in-out forwards;
  animation-delay: calc(0.05s + (var(--line-index) * 0.22s) + (var(--char-index) * 0.022s));
}

#slide-9.active .problem-char-slice-mid {
  animation: problemSliceRight 0.72s ease-in-out forwards;
  animation-delay: calc(0.13s + (var(--line-index) * 0.22s) + (var(--char-index) * 0.022s));
}

#slide-9.active .problem-char-slice-bottom {
  animation: problemSliceLeft 0.72s ease-in-out forwards;
  animation-delay: calc(0.21s + (var(--line-index) * 0.22s) + (var(--char-index) * 0.022s));
}

@keyframes problemCharIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.08em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes problemSliceLeft {
  0% {
    opacity: 0;
    transform: translateX(-115%);
  }
  34%,
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@keyframes problemSliceRight {
  0% {
    opacity: 0;
    transform: translateX(115%);
  }
  34%,
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-115%);
  }
}

@media (max-width: 1180px) {
  .problem-content {
    min-height: 58vh;
  }
}

@media (max-width: 760px) {
  #slide-9 {
    overflow-y: auto;
    padding: 18vh 5vw 6vh;
  }
  #slide-9 .intro-title {
    max-width: 86vw;
  }
  .problem-shutter {
    gap: 0.55rem;
    padding: 2rem 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #slide-9 .problem-char-main {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }
  #slide-9 .problem-char-slice {
    display: none;
    animation: none !important;
  }
}
/* Slide 10 - reponse theorique mind map */
#slide-10 {
  overflow: hidden;
  padding: 15vh 2.2vw 3.5vh;
}

#slide-10 .intro-heading-block {
  z-index: 8;
}

#slide-10 .intro-title {
  max-width: min(760px, 58vw);
}

.theory-content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1820px;
  min-height: 80vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theory-map {
  position: relative;
  /* Le 3e terme borne la hauteur par le budget vertical réel du slide
     (padding 15vh + 3.5vh) afin que la carte ne déborde jamais sur les
     écrans larges mais bas (ex: 1366x768). */
  width: min(1640px, 97vw, calc(79vh * 1180 / 660));
  aspect-ratio: 1180 / 660;
  overflow: visible;
  /* Les cartes (texte, padding, hauteur mini) sont dimensionnées en unités
     cqw : proportionnelles à la largeur réellement rendue de la carte, donc
     elles rétrécissent en continu avec elle au lieu de rester figées (en vw
     ou en px) une fois l'écran réduit. */
  container-type: inline-size;
}

.theory-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

#theory-arrow path {
  fill: #6b7280;
  fill: context-stroke;
  fill-opacity: 0.85;
}

.theory-connector {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.45));
}

.theory-connector.is-dashed {
  stroke: #0ea5e9;
  stroke-dasharray: 8 8;
  opacity: 0.78;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4));
}

.theory-connector-in {
  animation: theoryDashIn 0.5s ease forwards;
  animation-delay: 0.05s;
}

.theory-node {
  position: absolute;
  z-index: 4;
  left: calc(var(--x) * 100% / 1180);
  top: calc(var(--y) * 100% / 660);
  width: calc((var(--w) * 1.08) * 100% / 1180);
  min-height: clamp(22px, 2.9cqw, 48px);
  transform: translate(-50%, -50%);
  display: block;
  padding: clamp(4px, 1.05cqw, 14px);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #374151;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: clamp(0.58rem, 1cqw, 1.05rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  opacity: 0;
}

.theory-node span {
  display: inline-block;
  margin-top: 3px;
  font-weight: 600;
  opacity: 1;
}

.theory-node-main,
.theory-node-hub {
  min-height: clamp(26px, 3.55cqw, 58px);
  color: #ffffff;
  background: linear-gradient(135deg, #7a8fa4 0%, #63758a 100%);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 14px 28px rgba(52, 78, 104, 0.18);
  font-size: clamp(0.68rem, 1.18cqw, 1.22rem);
  font-weight: 760;
}

.theory-node-focus {
  min-height: clamp(26px, 3.55cqw, 58px);
  color: #374151;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 32px rgba(14, 165, 233, 0.12);
  font-size: clamp(0.68rem, 1.18cqw, 1.22rem);
  font-weight: 760;
}

.theory-node-identity {
  min-height: clamp(46px, 6.85cqw, 112px);
}

.theory-node-large {
  min-height: clamp(34px, 4.9cqw, 80px);
}

.theory-node-small,
.theory-node-orbit {
  min-height: clamp(26px, 3.55cqw, 58px);
}

.theory-node-orbit {
  z-index: 5;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.10);
}

.theory-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(14, 165, 233, 0.32);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.theory-orbit-ring.is-visible {
  opacity: 1;
}

.theory-trigger {
  position: absolute;
  width: 0;
  height: 0;
}

.theory-node.theory-node-visible {
  animation: theoryNodeIn 0.55s ease forwards;
  animation-delay: calc(0.05s + (var(--theory-order, 0) * 0.035s));
}

@keyframes theoryNodeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes theoryDashIn {
  0% {
    opacity: 0;
    stroke-dashoffset: 80;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 1180px) {
  .theory-map {
    width: min(1280px, 97vw, calc(79vh * 1180 / 660));
  }
}

@media (max-width: 760px) {
  #slide-10 {
    overflow-y: auto;
    padding: 16vh 3vw 6vh;
  }
  #slide-10 .intro-title {
    max-width: 86vw;
  }
  .theory-content {
    min-height: 620px;
    justify-content: flex-start;
  }
  .theory-map {
    /* Sous ~760px, on continue de rétrécir avec l'écran (au lieu de figer
       une largeur fixe + scroll horizontal) : le clamp() du texte et la mise
       à l'échelle native du SVG des connecteurs suivent. */
    width: min(640px, 94vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  #slide-10 .theory-node,
  #slide-10 .theory-connector {
    opacity: 1;
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────
   Slide 11 — Réponse empirique : le PMES
───────────────────────────────────────────── */
.empirical-overlap {
  position: relative;
  width: 100%;
  min-height: 560px;
}

.empirical-intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.empirical-intro-stage.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.empirical-objectives,
.empirical-enjeux {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  transition: opacity 0.4s ease;
}

.empirical-objectives.is-hidden,
.empirical-enjeux.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.empirical-list-title {
  margin: 0;
}

.empirical-list {
  list-style: none;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empirical-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
}

.empirical-row-num {
  flex: 0 0 42px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #0ea5e9;
}

.empirical-row-title {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #374151;
}

/* ─────────────────────────────────────────────
   Slide 12 — Réponse empirique : schéma de flux
───────────────────────────────────────────── */
.flow-map {
  position: relative;
  width: min(1720px, 97vw);
  aspect-ratio: 1180 / 430;
  overflow: visible;
  margin-top: 210px;
}

.flow-title {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: -78px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}

.flow-perimeter {
  display: inline-block;
  margin-top: 6px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9ca3af;
}

.flow-legend {
  position: absolute;
  left: calc(28 * 100% / 1180);
  top: calc(10 * 100% / 430);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: #6b7280;
  white-space: nowrap;
}

.flow-legend-triangle {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #f59e0b;
}

.flow-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.flow-arrow {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4));
}

#flow-arrow path {
  fill: #0ea5e9;
  fill-opacity: 0.85;
}

.flow-marker {
  position: absolute;
  left: calc(var(--x) * 100% / 1180);
  top: calc(var(--y) * 100% / 430);
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #f59e0b;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.35));
}

.flow-card {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * 100% / 1180);
  top: calc(var(--y) * 100% / 430);
  width: calc(var(--w) * 100% / 1180);
  height: calc(var(--h) * 100% / 430);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #374151;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 650;
  font-size: 0.98rem;
  line-height: 1.25;
}

.flow-card[data-code]::before {
  content: attr(data-code);
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.3);
}

.flow-card-d14 {
  font-size: 1.05rem;
}

.flow-card-large {
  font-size: 0.98rem;
  line-height: 1.3;
}

.flow-label {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * 100% / 1180);
  top: calc(var(--y) * 100% / 430);
  width: calc(var(--w, 150) * 100% / 1180);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.32;
  color: #6b7280;
  text-align: center;
}

.flow-label-thin {
  width: auto;
  white-space: nowrap;
}

.flow-label-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  width: auto;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Slide 13 — Réponse empirique : ligne König
───────────────────────────────────────────── */
.koenig-layout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 99vw;
  margin: 170px auto 0;
}

.koenig-sidebar {
  flex: 0 0 320px;
}

.koenig-sidebar-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  width: 100%;
  padding: 26px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.koenig-map {
  flex: 1;
  min-width: 0;
  max-width: min(1700px, calc(86vh * 1180 / 420));
  overflow: visible;
}

.koenig-map-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1180 / 420;
}

.koenig-title {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 190px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}

.koenig-perimeter {
  display: inline-block;
  margin-top: 6px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9ca3af;
}

.koenig-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.koenig-steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.12rem;
  color: #374151;
  white-space: nowrap;
}

.koenig-step-num {
  position: relative;
  flex: 0 0 26px;
  font-weight: 700;
  color: #0ea5e9;
}

.koenig-star {
  color: #0ea5e9;
  font-weight: 800;
}

.koenig-step-num .koenig-star {
  position: absolute;
  top: -3px;
  right: -7px;
  font-size: 0.65em;
}

.koenig-loss-label {
  position: absolute;
  z-index: 3;
  left: calc(var(--x) * 100% / 1180);
  top: calc(var(--y) * 100% / 420);
  width: calc(var(--w) * 100% / 1180);
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: #6b7280;
}

.koenig-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.koenig-arrow {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4));
}

#koenig-arrow path {
  fill: #0ea5e9;
  fill-opacity: 0.85;
}

.koenig-loss-bar {
  fill: none;
  stroke: #111827;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.koenig-thin-line {
  fill: none;
  stroke: #9ca3af;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.koenig-node {
  position: absolute;
  z-index: 4;
  left: calc(var(--x) * 100% / 1180);
  top: calc(var(--y) * 100% / 420);
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(107, 114, 128, 0.5);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #374151;
}

.koenig-node-highlight {
  border-color: #0ea5e9;
  color: #0ea5e9;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.22);
}


.koenig-control {
  position: absolute;
  z-index: 4;
  left: calc(var(--x) * 100% / 1180);
  top: calc(var(--y) * 100% / 420);
  transform: translate(-50%, -50%);
  min-width: 130px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 650;
  font-size: 0.86rem;
  line-height: 1.25;
  color: #374151;
}

.koenig-control-small {
  font-size: 0.88rem;
  min-width: 175px;
}

.koenig-count-note {
  margin: 4px 0 0;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: #374151;
  white-space: nowrap;
}

.markets-title {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.growth-section-title {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.context-section-title {
  display: table;
  margin: 0 auto 1.8rem;
  text-align: center;
}

.tension-section-title {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto 1.8rem;
  text-align: center;
  box-sizing: border-box;
}

.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 1;
  transition: opacity 0.6s ease;
  cursor: pointer;
}

.intro-curtain.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.thanks-title {
  font-size: clamp(3rem, 7vw, 5.4rem);
  background: none;
  -webkit-text-fill-color: #374151;
  color: #374151;
  animation: none;
}

/* ─────────────────────────────────────────────
   Slide 14 — Réponse empirique : appropriation du PMES
───────────────────────────────────────────── */
.appropriation-kicker {
  display: table;
  margin: 0 auto 1.8rem;
  text-align: center;
}

.appropriation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.8rem;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  align-items: stretch;
}

.appropriation-left {
  padding: 26px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
}

.appropriation-left-title {
  margin: 0 0 1.1rem;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.22rem;
  color: #374151;
}

.appropriation-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.appropriation-item {
  position: relative;
  padding: 10px 14px 10px 26px;
  border-radius: 12px;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #9ca3af;
  transition: color 0.35s ease, background 0.35s ease;
}

.appropriation-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.appropriation-item.is-current {
  color: #0ea5e9;
  font-weight: 700;
  background: rgba(14, 165, 233, 0.12);
}

.appropriation-item.is-done {
  color: #6b7280;
  font-weight: 500;
}

.appropriation-right {
  position: relative;
  min-height: 320px;
}

.appropriation-panel {
  position: absolute;
  inset: 0;
  padding: 26px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.appropriation-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.appropriation-panel-title {
  margin: 0 0 1rem;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  color: #374151;
}

.reticence-chart-title {
  margin: 0 0 0.8rem;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 600;
  font-size: 1.04rem;
  color: #6b7280;
  text-align: center;
}

.reticence-chart {
  display: block;
  width: 100%;
  height: auto;
}

.reticence-grid line {
  stroke: rgba(107, 114, 128, 0.18);
  stroke-width: 1;
}

.reticence-tick text {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 14px;
  font-weight: 600;
  fill: #9ca3af;
}

.reticence-axis-title {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 14px;
  font-weight: 700;
  fill: #6b7280;
}

.reticence-point circle {
  fill: #0ea5e9;
  filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.4));
}

.appropriation-roi-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.appropriation-roi-list li {
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #4b5563;
}

.appropriation-roi-list strong {
  color: #0ea5e9;
  font-weight: 800;
}

.appropriation-trigger {
  position: absolute;
  width: 0;
  height: 0;
}

.markets-chart-title {
  width: 100%;
  margin: 0;
  text-align: left;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  color: #374151;
}

.legend-asterisk {
  font-size: 0.85em;
  color: inherit;
  margin-left: 1px;
}

.evolution-marker {
  display: inline-flex;
  margin-left: 2px;
  vertical-align: super;
}

.evolution-marker-icon {
  width: 9px;
  height: 9px;
  color: inherit;
  opacity: 0.85;
}

.markets-chart-footnotes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
  row-gap: 2px;
  margin: 4px 0 0;
}

.markets-chart-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  font-size: 0.74rem;
  color: #9ca3af;
}

.markets-chart-footnote-evolution {
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.markets-chart.show-evolution ~ .markets-chart-footnotes .markets-chart-footnote-evolution {
  width: auto;
  opacity: 1;
}

.markets-chart-footnote-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: #9ca3af;
}

.empirical-intro-pill {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
}

.empirical-mes-highlight {
  color: #0ea5e9;
}

.appropriation-roi-highlight {
  color: #16a34a;
  font-weight: 800;
}

/* Slide 12 — animation séquentielle du circuit Garnissage : chaque carte /
   flèche / texte du schéma porte un --step (0 à 12) et apparaît l'un après
   l'autre dès l'arrivée sur la slide, plutôt que tout d'un coup. */
.flow-anim {
  opacity: 0;
}

#slide-12.active .flow-card.flow-anim,
#slide-12.active .flow-label.flow-anim,
#slide-12.active .flow-marker.flow-anim {
  animation: flowAnimIn 0.5s ease forwards;
  animation-delay: calc(var(--step, 0) * 1.1s);
}

#slide-12.active .flow-arrow.flow-anim {
  animation: flowAnimInArrow 0.5s ease forwards;
  animation-delay: calc(var(--step, 0) * 1.1s);
}

@keyframes flowAnimIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes flowAnimInArrow {
  from { opacity: 0; }
  to { opacity: 0.85; }
}

/* Slide 15 — Conclusion : spirale de la démarche d'appropriation
   (boucle outils → co-construction → ... → outils), adaptée à la DA
   bleu/glass du mémoire. */
.conclusion-kicker {
  display: table;
  margin: 0 auto 1.6rem;
  text-align: center;
}

.conclusion-spiral {
  position: relative;
  width: min(1040px, 92vw);
  aspect-ratio: 1040 / 660;
  margin: 0 auto;
  overflow: visible;
}

.spiral-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spiral-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.spiral-soft {
  fill: none;
  stroke: rgba(14, 165, 233, 0.16);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(8px);
}

.spiral-track {
  fill: none;
  stroke: rgba(55, 65, 81, 0.12);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spiral-main {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 14;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4));
  animation: spiralLineFlow 6.5s linear infinite;
}

.spiral-progress {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 5.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 38 1900;
  opacity: 0.2;
  filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.6));
  animation: spiralProgressFlow 4.2s linear infinite;
}

.spiral-dot {
  fill: #0ea5e9;
  filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.55));
}

.spiral-dot-ring {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 1.1;
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: center;
  animation: spiralDotPulse 1.35s ease-out infinite;
}

@keyframes spiralLineFlow {
  to { stroke-dashoffset: -168; }
}

@keyframes spiralProgressFlow {
  to { stroke-dashoffset: -1938; }
}

@keyframes spiralDotPulse {
  from { transform: scale(0.72); opacity: 0.5; }
  to { transform: scale(2.25); opacity: 0; }
}

.spiral-step {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #374151;
  font-family: "Open Sans", "Calibri", Verdana, sans-serif;
  transform: translate(-50%, -50%);
  transition: transform 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  white-space: nowrap;
  z-index: 2;
}

.spiral-step-number {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  font-size: 0.7rem;
  font-weight: 800;
}

.spiral-step-word {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
  white-space: nowrap;
}

.spiral-step.is-start {
  min-width: 118px;
  min-height: 46px;
  padding: 8px 16px 8px 8px;
}

.spiral-step.is-active {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  color: #ffffff;
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 18px 40px rgba(14, 165, 233, 0.35), 0 0 0 6px rgba(14, 165, 233, 0.12);
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 10;
}

.spiral-step.is-active .spiral-step-number {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Petites spirales d'ambiance en arrière-plan : suggèrent un univers de
   boucles similaires tournant en continu, en plus de la spirale
   principale, pour appuyer l'idée d'une démarche perpétuelle. */
.conclusion-mini-spirals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.spiral-mini {
  position: absolute;
  width: var(--size, 120px);
  height: var(--size, 120px);
  transform: translate(-50%, -50%);
  animation: spiralMiniSpin var(--speed, 40s) linear infinite;
  will-change: transform;
}

.spiral-mini.is-reverse {
  animation-direction: reverse;
}

#slide-15:not(.active) .spiral-mini {
  animation-play-state: paused;
}

.spiral-mini-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spiral-mini-soft {
  fill: none;
  stroke: rgba(14, 165, 233, 0.16);
  stroke-width: 7;
  stroke-linecap: round;
  filter: blur(4px);
}

.spiral-mini-track {
  fill: none;
  stroke: rgba(14, 165, 233, 0.3);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes spiralMiniSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}