:root {
  /* Palette Bulle ton site, thème mineral */
  --black: #eef0f9;
  --bg: #ffffff;
  --bg-mid: #e6eaf6;
  --bg-deep: #dce3f4;
  --ink: #ffffff;

  --accent: #9d6df7;
  --accent-rgb: 157, 109, 247;
  --accent-light: #b794f8;
  --accent-deep: #7c4ee8;
  --pink: #f472b6;
  --cyan: #67e8f9;

  --gold: var(--accent);
  --gold-rgb: var(--accent-rgb);
  --gold-light: var(--accent-light);
  --gold-deep: var(--accent-deep);

  --cream: #2e3348;
  --white: #1a1f35;
  --text: var(--cream);
  --muted: #5c6478;

  --surface: rgba(var(--accent-rgb), 0.06);
  --surface-raised: rgba(255, 255, 255, 0.94);
  --surface-hover: rgba(var(--accent-rgb), 0.1);
  --surface-border: rgba(var(--accent-rgb), 0.2);
  --surface-border-strong: rgba(var(--accent-rgb), 0.35);

  --grad-slide:
    radial-gradient(ellipse 90% 55% at 12% 8%, rgba(244, 114, 182, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 50% at 92% 18%, rgba(167, 139, 250, 0.14), transparent 52%),
    radial-gradient(ellipse 55% 40% at 80% 92%, rgba(103, 232, 249, 0.1), transparent 50%),
    linear-gradient(168deg, #ffffff 0%, var(--bg-mid) 52%, #e8ecf8 100%);
  --grad-accent: linear-gradient(135deg, var(--pink) 0%, var(--accent) 48%, var(--cyan) 100%);
  --grad-ring: linear-gradient(145deg, rgba(244, 114, 182, 0.45), rgba(var(--accent-rgb), 0.1) 42%, rgba(103, 232, 249, 0.35));

  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-card: 0 8px 28px rgba(26, 36, 51, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-glow: 0 0 48px rgba(var(--accent-rgb), 0.14);

  --frame-w: 1080;
  --frame-h: 1920;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--black);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
}

/* Cadre TikTok 9:16 — web & export */
#stage-wrap {
  --frame-w: min(100vw, calc(100dvh * 9 / 16));
  --frame-h: min(100dvh, calc(100vw * 16 / 9));
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(var(--gold-rgb), 0.06), transparent),
    var(--black);
}

#stage {
  position: relative;
  width: var(--frame-w);
  height: var(--frame-h);
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  container-name: stage;
  background: var(--bg);
  overflow: hidden;
  box-shadow:
    var(--shadow-glow),
    0 16px 48px rgba(26, 36, 51, 0.12);
}

#stage::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: var(--grad-ring);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 18;
}

#stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 17;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Contenu centré verticalement (bloc cohérent entre slides) */
.slide::before,
.slide::after {
  display: none;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5.5cqw;
  gap: 0.25rem;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  pointer-events: none;
  background: var(--grad-slide);
}

.slide > * {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

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

.slide--exit {
  opacity: 0;
  transform: translateY(-16px);
}

.slide__eyebrow {
  display: inline-flex;
  align-self: center;
  font-size: clamp(0.62rem, 2.6cqw, 0.85rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
  font-weight: 600;
  padding: 0.38rem 0.8rem;
  background: rgba(var(--gold-rgb), 0.1);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.slide--hook .slide__eyebrow,
.slide--intro .slide__eyebrow,
.slide--cta .slide__eyebrow,
.slide--testimonial .slide__eyebrow,
.slide--compare .slide__eyebrow,
.slide--sectors .slide__eyebrow,
.slide--process .slide__eyebrow,
.slide--reassurance .slide__eyebrow,
.slide--pricing .slide__eyebrow {
  align-self: center;
}

.slide__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.75rem, 7.2cqw, 4.75rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: var(--white);
}

.slide__title--xl {
  font-size: clamp(2rem, 8.5cqw, 5.5rem);
}

.slide__title em {
  font-style: normal;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.slide__price-from em,
.slide__price-col--prix em,
.slide__price-amount em {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--gold);
}

.slide__timeline {
  margin: 1.25rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.slide__timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}

.slide__timeline-step {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50%;
}

.slide__timeline-item strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.slide__timeline-item p {
  font-size: 0.95rem;
  color: var(--muted);
}

.slide__price-from {
  font-size: clamp(1.1rem, 4.5cqw, 1.45rem);
  margin-top: 0.75rem;
  color: var(--cream);
}

.slide__price-from em {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: clamp(2rem, 8.5cqw, 4.5rem);
  color: var(--gold);
  display: block;
  margin-top: 0.15rem;
}

.slide__price-from-note {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(0.72rem, 2.8cqw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.slide__price-col--prix small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--muted);
  font-style: normal;
}

.slide__sub--gold {
  color: var(--gold) !important;
  font-weight: 600;
  font-size: clamp(0.85rem, 3.4cqw, 1.05rem) !important;
  margin-top: 0.35rem;
}

.slide__tiers {
  margin: 1rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.slide__tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border-radius: 6px;
  font-size: clamp(0.82rem, 3.2cqw, 1rem);
  color: var(--muted);
}

.slide__tier strong {
  color: var(--cream);
  white-space: nowrap;
}

.slide__bullets--compact {
  margin-top: 0.85rem !important;
  gap: 0.55rem !important;
}

.slide__bullets--compact li {
  font-size: clamp(0.82rem, 3.2cqw, 1rem) !important;
}

.slide__sub {
  font-size: clamp(0.95rem, 3.8cqw, 1.2rem);
  color: var(--muted);
  line-height: 1.5;
  max-width: 90%;
}

.slide__bullets {
  list-style: none;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.slide__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: clamp(0.92rem, 3.6cqw, 1.15rem);
  line-height: 1.4;
  color: var(--cream);
}

.slide__bullets li::before {
  content: '';
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.48rem;
  background: var(--grad-accent);
  border-radius: 1px;
  transform: rotate(45deg);
}

.slide__shot {
  overflow: hidden;
  min-height: 0;
  background: #f0f3f7;
}

.slide__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Slide intro complète */
.slide--intro .slide__title {
  font-size: clamp(1.55rem, 6.5cqw, 2.25rem);
  margin-bottom: 0.65rem;
}

.slide__portrait--intro {
  width: clamp(4.6rem, 18cqw, 5.75rem);
  height: clamp(4.6rem, 18cqw, 5.75rem);
  margin: 0 auto 0.7rem;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 2px;
  background: var(--grad-ring);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(26, 36, 51, 0.12);
}

.slide__portrait--intro::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent 50%, rgba(26, 36, 51, 0.12) 100%);
  pointer-events: none;
  z-index: 1;
}

.slide__portrait--intro img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 28% 45%;
  filter: contrast(1.04) saturate(1.02) brightness(1.02);
  display: block;
}

.slide__intro-text {
  font-size: clamp(0.82rem, 3.2cqw, 1.02rem);
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.slide__bullets--intro {
  margin-top: 0.5rem !important;
  gap: 0.55rem !important;
}

.slide__bullets--intro li {
  font-size: clamp(0.8rem, 3.1cqw, 0.98rem) !important;
  line-height: 1.35 !important;
}

/* Slides projets : centré verticalement, contenu pleine largeur */
.slide--project {
  padding: 4.5cqw 4cqw;
  align-items: stretch;
  text-align: left;
  gap: 0.2rem;
}

.slide--project .slide__project-head {
  flex-shrink: 0;
  margin-bottom: 0.25rem;
}

.slide--project .slide__eyebrow {
  margin-bottom: 0.15rem;
  font-size: clamp(0.52rem, 2cqw, 0.65rem);
  padding: 0.22rem 0.5rem;
  letter-spacing: 0.12em;
}

.slide--project .slide__title {
  font-size: clamp(0.9rem, 3.5cqw, 1.25rem);
  margin-bottom: 0;
  line-height: 1.1;
  color: var(--white);
}

.slide__project-url {
  display: block;
  margin-top: 0.2rem;
  font-size: clamp(0.5rem, 1.9cqw, 0.65rem);
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.25;
  opacity: 0.92;
}

.slide__project-url:hover {
  text-decoration: underline;
}

.slide--project .slide__sector {
  margin-bottom: 0.06rem;
  font-size: clamp(0.6rem, 2.3cqw, 0.75rem);
}

.slide__screen-tag {
  flex-shrink: 0;
  font-size: clamp(0.55rem, 2.1cqw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.15rem 0 0.1rem;
}

.slide__project-text {
  flex-shrink: 0;
  margin: 0.3rem 0;
  padding: 0.6rem 0.75rem;
  background: #eef4fb;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-card);
}

.slide__project-text p {
  font-size: clamp(0.65rem, 2.5cqw, 0.8rem);
  line-height: 1.42;
  color: var(--cream);
}

.slide__browser {
  flex: 0 0 auto;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #b8c5d6;
  box-shadow: var(--shadow-card);
  background: #f0f3f7;
}

.slide__browser-bar {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  background: #141820;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.slide__browser-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.slide__browser-bar span:first-child {
  background: #e07060;
}

.slide__browser-bar span:nth-child(2) {
  background: #d8b050;
}

.slide__browser-bar span:nth-child(3) {
  background: #60b870;
}

.slide--project .slide__shot--169 {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  background: #f0f3f7;
}

.slide--project .slide__shot--169 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #f0f3f7;
}

.slide--project .slide__shot--zoom img {
  object-fit: contain;
  object-position: center center;
}

.slide__points--compact {
  margin-top: 0.45rem !important;
  flex-shrink: 0;
  gap: 0.4rem !important;
}

.slide__points--compact li {
  font-size: clamp(0.72rem, 2.8cqw, 0.9rem) !important;
}

/* Slide tarifs */
.slide--pricing .slide__title--pricing {
  font-size: clamp(1.35rem, 5.5cqw, 2rem);
  margin-bottom: 0.15rem;
}

.slide--pricing .slide__price-from {
  margin-top: 0.2rem;
}

.slide--pricing .slide__sub--gold {
  margin-top: 0.1rem !important;
  margin-bottom: 0.35rem;
}

.slide__price-cards {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.slide--pricing .slide__price-example {
  margin-top: 0.55rem;
  font-size: clamp(0.78rem, 3.2cqw, 0.95rem);
}

.slide__price-maint-compact {
  margin-top: 0.35rem;
  font-size: clamp(0.72rem, 3cqw, 0.88rem);
  color: var(--muted);
  text-align: center;
}

.slide--cta .slide__title--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.1;
}

.slide__title-line {
  display: block;
}

.slide__title-accent {
  font-style: normal;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.slide--pricing .slide__price-table {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
}

.slide__price-row {
  display: grid;
  grid-template-columns: 0.72fr 1.45fr 0.62fr;
  gap: 0.35rem;
  align-items: start;
  padding: 0.42rem 0.5rem;
  background: var(--surface-raised);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
}

.slide__price-row--head {
  background: transparent;
  border: none;
  padding: 0 0.45rem 0.15rem;
}

.slide__price-row--head .slide__price-col {
  font-size: clamp(0.52rem, 2cqw, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.slide__price-row--main {
  border-color: var(--surface-border-strong);
  background: rgba(var(--gold-rgb), 0.1);
  box-shadow: 0 0 24px rgba(var(--gold-rgb), 0.08);
}

.slide__price-col--label {
  font-size: clamp(0.62rem, 2.9cqw, 0.74rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.25;
}

.slide__price-col--contenu {
  font-size: clamp(0.56rem, 2.15cqw, 0.7rem);
  color: var(--muted);
  line-height: 1.32;
}

.slide__price-col--prix {
  text-align: right;
}

.slide__price-col--prix em {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: clamp(0.68rem, 2.65cqw, 0.85rem);
  color: var(--gold);
  line-height: 1.2;
  white-space: nowrap;
}

.slide--pricing .slide__price-footnotes {
  margin-top: 0.35rem !important;
}

.slide--pricing .slide__price-footnotes li {
  font-size: clamp(0.62rem, 2.8cqw, 0.72rem) !important;
}

.slide__tiers {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.slide__price-card--maint {
  margin-top: 0.5rem;
  border-color: rgba(var(--gold-rgb), 0.22);
}

.slide__price-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
}

.slide__price-card--main {
  border-color: var(--surface-border-strong);
  background: rgba(var(--gold-rgb), 0.1);
  box-shadow: 0 0 28px rgba(var(--gold-rgb), 0.1);
}

.slide__price-card strong {
  display: block;
  color: var(--cream);
  font-size: clamp(0.78rem, 3cqw, 0.95rem);
}

.slide__price-explain {
  display: block;
  font-size: clamp(0.6rem, 2.7cqw, 0.7rem);
  color: var(--muted);
  margin-top: 0.08rem;
  line-height: 1.28;
}

.slide__price-amount {
  text-align: right;
  flex-shrink: 0;
}

.slide__price-amount em {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: clamp(1rem, 4cqw, 1.35rem);
  color: var(--gold);
  line-height: 1.1;
  white-space: nowrap;
}

.slide__price-amount span {
  display: block;
  font-size: clamp(0.62rem, 2.8cqw, 0.72rem);
  color: var(--muted);
  margin-top: 0.12rem;
  max-width: 9.5rem;
  text-align: right;
  line-height: 1.3;
}

.slide__price-amount--sm em {
  font-size: clamp(1.05rem, 4.2cqw, 1.45rem);
}

.slide__options-title {
  margin-top: 0.75rem;
  font-size: clamp(0.76rem, 2.9cqw, 0.92rem);
  font-weight: 600;
  color: var(--cream);
}

.slide__options-hint {
  font-size: clamp(0.66rem, 2.5cqw, 0.8rem);
  color: var(--muted);
  margin-top: 0.15rem;
  line-height: 1.35;
}

.slide__options-list {
  margin-top: 0.4rem !important;
  gap: 0.4rem !important;
}

.slide__options-list li {
  font-size: clamp(0.72rem, 3.3cqw, 0.84rem) !important;
}

.slide__sector {
  font-size: clamp(0.8rem, 3.7cqw, 0.95rem);
  color: var(--gold);
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.slide__points {
  margin-top: 1rem;
}

.slide--cta {
  text-align: center;
  align-items: center;
}

.slide--cta .slide__title {
  margin-bottom: 1rem;
}

.slide__contact {
  position: relative;
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 320px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}

.slide__contact::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-md) + 1px);
  padding: 1px;
  background: var(--grad-ring);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.slide__contact-name {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
}

.slide__contact-role {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.slide__contact a,
.slide__contact span {
  display: block;
  font-size: 1rem;
  color: var(--gold);
  text-decoration: none;
  margin-top: 0.35rem;
}

/* Barre de progression */
#progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(var(--gold-rgb), 0.15);
  z-index: 20;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.45);
  transition: width 0.1s linear;
}

#dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: var(--frame-w);
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 20;
  pointer-events: none;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.28);
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.dot--on {
  background: var(--gold);
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5);
}

/* Lien retour site */
.diapo-back {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: var(--cream);
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(26, 36, 51, 0.1);
  transition: background 0.15s, border-color 0.15s;
}

.diapo-back:hover {
  background: #fff;
  border-color: rgba(var(--accent-rgb), 0.38);
}

body.export-mode .diapo-back {
  display: none;
}

/* Contrôles enregistrement (masquables) */
#rec-ui {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 280px;
}

#rec-ui button {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: var(--cream);
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s;
  box-shadow: 0 4px 16px rgba(26, 36, 51, 0.1);
}

#rec-ui button:hover {
  background: #fff;
  border-color: rgba(var(--accent-rgb), 0.38);
}

#rec-ui.hidden {
  display: none;
}

#rec-hint {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 100;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

#rec-hint.hidden {
  display: none;
}

.slide--active {
  animation: slideEnter 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Comparaison modèle vs sur mesure */
.slide--compare .slide__title {
  font-size: clamp(1.35rem, 5.8cqw, 2rem);
  margin-bottom: 0.75rem;
}

.slide__compare-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.slide__compare-card {
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  backdrop-filter: blur(6px);
}

.slide__compare-card h3 {
  font-size: clamp(0.78rem, 3.6cqw, 0.92rem);
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.slide__compare-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.slide__compare-card li {
  font-size: clamp(0.68rem, 3.1cqw, 0.8rem);
  line-height: 1.35;
  padding-left: 0.85rem;
  position: relative;
  color: var(--muted);
}

.slide__compare-card li::before {
  content: '×';
  position: absolute;
  left: 0;
  font-weight: 700;
}

.slide__compare-card--bad {
  background: rgba(26, 36, 51, 0.04);
  border-color: rgba(90, 102, 120, 0.22);
}

.slide__compare-card--bad h3 {
  color: var(--muted);
}

.slide__compare-card--good {
  background: rgba(var(--gold-rgb), 0.11);
  border-color: var(--surface-border-strong);
  box-shadow: 0 0 32px rgba(var(--gold-rgb), 0.1);
}

.slide__compare-card--good h3 {
  color: var(--cream);
}

.slide__compare-card--good li {
  color: var(--cream);
}

.slide__compare-card--good li::before {
  content: '✓';
  color: var(--gold);
}

/* Métiers, référence centrage vertical */
.slide__sector-list {
  list-style: none;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.slide__sector-list li {
  padding: 0.58rem 0.8rem;
  background: var(--surface-raised);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: clamp(0.82rem, 3.7cqw, 0.96rem);
  line-height: 1.35;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(6px);
}

/* Zone à distance */
.slide__zone-lead {
  font-size: clamp(0.9rem, 4.1cqw, 1.05rem);
  line-height: 1.45;
  color: var(--cream);
  margin: 0.75rem 0 0.5rem;
}

/* Processus 3 étapes */
.slide__process {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.slide__process-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.65rem 0.75rem;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(6px);
}

.slide__process-num {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 50%;
}

.slide__process-step strong {
  display: block;
  font-size: clamp(0.82rem, 3.2cqw, 1rem);
  margin-bottom: 0.12rem;
}

.slide__process-step p {
  font-size: clamp(0.72rem, 3.3cqw, 0.84rem);
  color: var(--muted);
  line-height: 1.35;
}

/* Témoignage */
.slide--testimonial {
  text-align: center;
}

.slide__quote {
  position: relative;
  margin-top: 1.25rem;
  padding: 1.2rem 1.1rem 1.1rem;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}

.slide__quote::before {
  content: '“';
  position: absolute;
  top: 0.15rem;
  left: 0.65rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(var(--gold-rgb), 0.28);
  pointer-events: none;
}

.slide__quote > p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(0.88rem, 3.4cqw, 1.1rem);
  line-height: 1.5;
  color: var(--cream);
  font-style: italic;
}

.slide__quote footer {
  margin-top: 0.85rem;
}

.slide__quote footer strong {
  display: block;
  font-size: clamp(0.85rem, 3.8cqw, 0.98rem);
  color: var(--gold);
  font-style: normal;
}

.slide__quote footer span {
  display: block;
  font-size: clamp(0.72rem, 3.3cqw, 0.84rem);
  color: var(--muted);
  margin-top: 0.15rem;
}

.slide__price-footnotes {
  margin-top: 0.55rem !important;
  gap: 0.35rem !important;
}

.slide__price-footnotes li {
  font-size: clamp(0.68rem, 3.1cqw, 0.78rem) !important;
  color: var(--muted) !important;
}

.slide__contact-city {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.slide__qr {
  display: block;
  margin: 1rem auto 0;
  border-radius: 8px;
  border: 2px solid rgba(var(--gold-rgb), 0.32);
}

#dots .dot {
  width: 5px;
  height: 5px;
}

body.export-mode {
  background: var(--bg);
}

body.export-mode #stage-wrap {
  --frame-w: 100vw;
  --frame-h: 100vh;
  background: var(--bg);
  width: 100vw;
  height: 100vh;
}

body.export-mode #stage {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  box-shadow: none;
  container-type: size;
  container-name: stage;
}

/* Export : ancrage haut fixe, pas de centrage variable entre slides */
body.export-mode .slide::before,
body.export-mode .slide::after {
  display: none;
}

body.export-mode .slide {
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5.5cqi;
  gap: 0.35cqi;
  transition: none !important;
  transform: none !important;
  opacity: 1;
}

body.export-mode .slide > * {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

body.export-mode .slide--active {
  display: flex;
}

body.export-mode .slide--project {
  align-items: stretch;
  text-align: left;
  padding: 4.5cqi 4cqi;
}

body.export-mode .slide--hook,
body.export-mode .slide--intro,
body.export-mode .slide--cta,
body.export-mode .slide--pricing {
  padding: 5.5cqi;
}

body.export-mode .slide__title--xl {
  font-size: 8.2cqi;
  line-height: 1.08;
  margin-bottom: 2.2cqi;
}

body.export-mode .slide__title {
  font-size: 6.8cqi;
  line-height: 1.12;
  margin-bottom: 2cqi;
}

body.export-mode .slide--project .slide__title {
  font-size: 4.6cqi;
  margin-bottom: 1.2cqi;
}

body.export-mode .slide__eyebrow {
  font-size: 2.35cqi;
  margin-bottom: 2.4cqi;
}

body.export-mode .slide__intro-text,
body.export-mode .slide__sub {
  font-size: 3.15cqi;
  line-height: 1.38;
}

body.export-mode .slide__bullets li {
  font-size: 3.35cqi;
  line-height: 1.35;
}

body.export-mode .slide__caption {
  font-size: 2.65cqi;
  bottom: 5cqi;
}

body.export-mode .slide__sector,
body.export-mode .slide__screen-tag,
body.export-mode .slide__project-url {
  font-size: 2.2cqi;
}

body.export-mode .slide__project-text p {
  font-size: 2.5cqi;
}

body.export-mode .slide__team-member strong {
  font-size: 2.45cqi;
}

body.export-mode .slide__team-member span,
body.export-mode .slide__service-list span {
  font-size: 2.1cqi;
}

body.export-mode .slide__service-list strong {
  font-size: 2.85cqi;
}

body.export-mode .slide__compare-card h3 {
  font-size: 3cqi;
}

body.export-mode .slide__compare-card li {
  font-size: 2.35cqi;
}

body.export-mode .slide__price-from em {
  font-size: 7cqi;
}

body.export-mode .slide__price-col {
  font-size: 2.35cqi;
}

body.export-mode #rec-ui,
body.export-mode #rec-hint,
body.export-mode #dots,
body.export-mode .diapo-back {
  display: none !important;
}

/* Mobile / portrait : plein écran TikTok */
@media (max-width: 520px), (max-aspect-ratio: 9/15) {
  body:not(.export-mode) #stage-wrap {
    --frame-w: 100vw;
    --frame-h: 100dvh;
    background: var(--bg);
  }

  body:not(.export-mode) #stage {
    box-shadow: none;
    border-radius: 0;
  }

  body:not(.export-mode) .diapo-back {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }

  body:not(.export-mode) #rec-ui {
    top: max(12px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
  }

  body:not(.export-mode) #dots {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Sous-titres (lecture sans son), fixés en bas, n’affectent pas le centrage */
.slide__caption {
  position: absolute;
  bottom: 6.5%;
  left: 6%;
  right: 6%;
  z-index: 2;
  flex-shrink: 0;
  text-align: center;
  font-size: clamp(0.68rem, 3.1cqw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.48rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(26, 36, 51, 0.1);
}

.slide--hook,
.slide--compare,
.slide--sectors,
.slide--sectors-zone,
.slide--process,
.slide--process-delivery,
.slide--testimonial,
.slide--reassurance,
.slide--pricing,
.slide--intro,
.slide--zone,
.slide--cta {
  justify-content: center;
  align-items: center;
}

/* Accroche, titre centré, halo discret */
.slide--hook {
  text-align: center;
  align-items: center;
}

.slide--hook .slide__title--xl {
  letter-spacing: -0.025em;
  text-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.12);
}

.slide--hook .slide__sub {
  max-width: 90%;
  text-align: center;
  line-height: 1.55;
  color: var(--muted);
}

.slide__price-example {
  font-size: clamp(0.72rem, 2.8cqw, 0.9rem);
  color: var(--muted);
  margin: 0.2rem 0 0.35rem;
  font-style: italic;
}

.slide__sector-list--compact {
  gap: 0.4rem !important;
  margin-top: 0.65rem;
}

.slide__sector-list--compact li {
  padding: 0.42rem 0.6rem;
  font-size: clamp(0.72rem, 3.3cqw, 0.86rem) !important;
}

.slide__zone-lead--compact {
  margin-top: 0.65rem !important;
  font-size: clamp(0.72rem, 3.3cqw, 0.86rem) !important;
}

.slide__delivery-badges {
  display: flex;
  gap: 0.45rem;
  margin: 0.5rem 0 0.55rem;
  flex-wrap: wrap;
}

.slide__delivery-badges span {
  flex: 1;
  min-width: 42%;
  padding: 0.48rem 0.58rem;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  font-size: clamp(0.62rem, 2.9cqw, 0.74rem);
  color: var(--muted);
  text-align: center;
  backdrop-filter: blur(6px);
}

.slide__delivery-badges strong {
  display: block;
  color: var(--gold);
  font-size: clamp(0.78rem, 3.6cqw, 0.92rem);
  margin-bottom: 0.08rem;
}

.slide__process--compact {
  gap: 0.38rem !important;
}

.slide__process--compact .slide__process-step {
  padding: 0.45rem 0.55rem;
}

.slide__process--compact .slide__process-step p {
  font-size: clamp(0.62rem, 2.8cqw, 0.72rem) !important;
}

.slide__process-footnote {
  margin-top: 0.45rem;
  font-size: clamp(0.68rem, 3.1cqw, 0.78rem);
  color: var(--muted);
  text-align: center;
}

.slide--process-delivery .slide__title {
  font-size: clamp(1.2rem, 5cqw, 1.65rem);
  margin-bottom: 0.35rem;
}

.slide--reassurance .slide__title {
  font-size: clamp(1.2rem, 5cqw, 1.65rem);
  margin-bottom: 0.45rem;
}

.slide--reassurance .slide__bullets {
  margin-top: 0.65rem;
}

.slide--reassurance .slide__bullets--compact li {
  font-size: clamp(0.64rem, 2.45cqw, 0.8rem) !important;
  line-height: 1.32 !important;
}

.slide__cta-response {
  margin: 0.35rem 0 0.85rem;
  font-size: clamp(0.9rem, 4.1cqw, 1.05rem);
  font-weight: 600;
  color: var(--gold);
}

.slide__cta-portfolio {
  margin-top: 1rem;
  font-size: clamp(0.68rem, 3.1cqw, 0.78rem);
  color: var(--muted);
}

.slide__cta-portfolio a {
  color: var(--gold);
  text-decoration: none;
}

.slide__cta-portfolio a:hover {
  text-decoration: underline;
}

body.short-mode #rec-hint::before {
  content: '';
}

@media (max-width: 500px) {
  #rec-ui { top: auto; bottom: 48px; right: 8px; }
}

/* ── Bulle ton site, slides équipe & services ── */
.slide__logo {
  width: 56px;
  height: 56px;
  margin-bottom: 0.65rem;
  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.25));
}

.slide__logo--cta {
  width: 64px;
  height: 64px;
}

.slide--team,
.slide--services {
  padding: 5cqw;
}

.slide__team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-top: 0.75rem;
  width: 100%;
}

.slide__team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.65rem 0.4rem;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.slide__team-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grad-accent);
  flex-shrink: 0;
  position: relative;
}

.slide__team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide__team-photo--fallback img {
  display: none;
}

.slide__team-initials {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.slide__team-photo--fallback .slide__team-initials {
  display: flex;
}

.slide__team-member strong {
  font-size: clamp(0.62rem, 2.8cqw, 0.72rem);
  color: var(--white);
  line-height: 1.25;
}

.slide__team-member span {
  font-size: clamp(0.55rem, 2.1cqw, 0.68rem);
  color: var(--muted);
  line-height: 1.3;
}

.slide__service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.5rem;
}

.slide__service-list li {
  padding: 0.7rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.slide__service-list strong {
  display: block;
  font-size: clamp(0.82rem, 3.2cqw, 1rem);
  color: var(--white);
  margin-bottom: 0.15rem;
}

.slide__service-list span {
  font-size: clamp(0.72rem, 3.2cqw, 0.82rem);
  color: var(--muted);
}

.slide__compare-hint {
  font-size: clamp(0.62rem, 2.8cqw, 0.72rem);
  color: var(--muted);
  margin: 0.15rem 0 0.45rem;
}

.slide__process-who {
  font-size: clamp(0.62rem, 2.8cqw, 0.72rem);
  color: var(--accent);
  font-weight: 600;
  margin: 0.1rem 0 0.2rem;
}

.slide__project-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-accent);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

.slide__price-maint {
  width: 100%;
  margin: 0.65rem 0 0.35rem;
  padding: 0.65rem 0.85rem;
  text-align: center;
  font-size: clamp(0.72rem, 3.2cqw, 0.82rem);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  line-height: 1.45;
}

.slide__price-maint strong {
  color: var(--accent);
  font-size: clamp(0.88rem, 3.9cqw, 1rem);
}

.slide--hook .slide__logo {
  margin-bottom: 0.5rem;
}

.slide--team .slide__intro-text,
.slide--services .slide__intro-text {
  font-size: clamp(0.78rem, 3cqw, 0.95rem);
  text-align: center;
  max-width: 92%;
}

body.export-mode .slide--team .slide__team-member strong {
  font-size: 0.68rem;
}

body.export-mode .slide__service-list strong {
  font-size: 0.88rem;
}