:root {
  --bg: #FFFFFF;
  --bg-alt: #FAFAFA;
  --fg: #18181B;
  --fg-muted: #71717A;
  --border: #E5E5E5;
  --border-hover: #3B82F6;
  --accent: #3B82F6;
  --accent-hover: #2563EB;
  --whatsapp: #25D366;
  --card-bg: #FFFFFF;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }

::selection { background: var(--accent); color: #fff; }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  z-index: auto;
}
.section--alt { background: var(--bg-alt); }
.section:last-of-type { border-bottom: none; }

/* ---- Type ---- */
.eyebrow {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 24px;
}
h1, h2, h3, h4 {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
}
h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
}
h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  font-weight: 500;
}
.accent { color: var(--accent); }
.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 64ch;
  text-wrap: pretty;
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head h2 { margin-bottom: 20px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all 240ms var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px -8px rgba(59,130,246,0.55);
}
.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 24px -8px rgba(59,130,246,0.65);
}
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn--ghost:hover {
  border-color: var(--fg);
  transform: translateY(-1px);
}
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn .arrow { transition: transform 240ms var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow {
  font-size: 15px;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  transition: border-color 240ms var(--ease), color 240ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.link-arrow:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Nav ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.98);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(0,0,0,0.08);
}
main { padding-top: 68px; }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.logo__mark {
  width: 30px;
  height: 30px;
  display: inline-block;
  flex-shrink: 0;
}
.logo__mark img { width: 100%; height: 100%; display: block; }
.btn--wa-nav {
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  height: auto;
  gap: 8px;
  white-space: nowrap;
}
.btn--wa-nav:hover {
  background: #1fba59;
  transform: translateY(-1px);
  border-color: transparent;
}
.nav__end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  font-size: 14px;
  color: var(--fg-muted);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.nav__link:hover { color: var(--fg); background: var(--bg-alt); }
.nav__mobile-toggle { display: none; }

/* ---- Language toggle (FR | EN) ---- */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--fg-muted);
  margin-right: 4px;
}
.lang-toggle a,
.lang-toggle span.is-active {
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
}
.lang-toggle a { color: var(--fg-muted); transition: color 200ms var(--ease); }
.lang-toggle a:hover { color: var(--fg); background: var(--bg-alt); }
.lang-toggle span.is-active { color: var(--accent); font-weight: 600; }
.lang-toggle__sep { color: var(--border); }
@media (max-width: 900px) {
  .lang-toggle { margin-right: 0; }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__inner { height: 60px; }
}

/* ---- Hero ---- */
.hero {
  padding-block: clamp(80px, 10vw, 140px) clamp(72px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}
.hero__inner { max-width: 1040px; position: relative; z-index: 1; }
.hero h1 { margin-bottom: 28px; }
.hero .lede { margin-bottom: 40px; max-width: 62ch; }
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* ---- Hero motion graphics ---- */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__grid {
  position: absolute;
  inset: -64px 0 0 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridMove 14s linear infinite;
  mask-image: linear-gradient(to bottom, black, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black, black 60%, transparent 100%);
}
.hero__radial {
  position: absolute;
  top: 18%;
  right: 8%;
  width: 720px;
  height: 560px;
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, var(--accent) 16%, transparent) 0%,
    transparent 65%);
  pointer-events: none;
  animation: heroDrift 18s ease-in-out infinite alternate;
}
.hero__network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__network line { stroke: var(--accent); stroke-width: 1; stroke-opacity: 0.22; }
.hero__node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 80%, transparent);
  transform: translate(-50%, -50%);
  animation: blink 3s ease-in-out infinite;
}
.hero__parallax {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 65% 45%,
    color-mix(in oklab, var(--accent) 10%, transparent) 0%,
    transparent 70%);
  transition: transform 180ms ease-out;
}
.hero--no-fx .hero__grid,
.hero--no-fx .hero__radial,
.hero--no-fx .hero__network,
.hero--no-fx .hero__node,
.hero--no-fx .hero__parallax { display: none; }

@keyframes gridMove {
  from { transform: translateY(0); }
  to   { transform: translateY(-64px); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}
@keyframes heroDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, 30px) scale(1.06); }
}
body.motion-off .hero__grid,
body.motion-off .hero__radial,
body.motion-off .hero__node { animation: none; }
.hero__meta {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 720px;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__meta-k {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero__meta-v {
  font-size: 15px;
  color: var(--fg);
  font-weight: 500;
}

/* ---- Hero floating mockup cards (desktop only) ---- */
.hero__cards {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  pointer-events: none;
  z-index: 0;
  transition: transform 180ms ease-out;
}
@media (max-width: 1100px) {
  .hero__cards { display: none; }
}
@media (min-width: 1101px) {
  /* Above 1100px the h1/lede lines can run wide enough to collide with the
     floating photo card. Narrow the card column and pull the text column's
     right edge in so they never touch. The container caps at --maxw (1200px)
     so this stays correct at any wider viewport too. */
  .hero__cards { width: 30%; }
  .hero__inner { max-width: 560px; margin-inline: 0 auto; }
}
.fcard {
  position: absolute;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(24,24,27,0.28);
  padding: 14px;
}
.fcard--chat {
  width: 220px;
  top: 0%;
  right: 2%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  animation: fcardFloat 7s ease-in-out infinite;
  z-index: 2;
}
.fcard--maps {
  width: 210px;
  top: 50%;
  right: 44%;
  animation: fcardFloat 9s ease-in-out infinite;
  animation-delay: 0.8s;
}
.fcard--stat {
  width: 160px;
  bottom: 4%;
  right: 40%;
  animation: fcardFloat 8s ease-in-out infinite;
  animation-delay: 1.6s;
  z-index: 2;
}
@keyframes fcardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.fcard__chat-time {
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--fg-muted);
}
.fcard__bubble {
  max-width: 88%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.4;
}
.fcard__bubble--in {
  background: #fff;
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.fcard__bubble--out {
  background: #DCF8C6;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  color: #111;
}
.fcard__badge {
  align-self: flex-end;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: #fff;
  background: var(--whatsapp);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 2px;
}
.fcard__maps-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
}
.fcard__pin {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
}
.fcard__pin--muted { background: var(--border); color: var(--fg-muted); }
.fcard__maps-lines { flex: 1; }
.fcard__line { height: 7px; border-radius: 4px; background: var(--border); margin-bottom: 6px; }
.fcard__line--accent { background: var(--accent); opacity: 0.4; }
.fcard__stars { color: #F5A623; font-size: 10px; }
.fcard__stat-num {
  font-family: "DM Mono", monospace;
  font-size: 30px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.fcard__stat-label {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ---- Hero industry photo card (rotating crossfade, Avoca-style) ---- */
.hero__photocard {
  position: relative;
  width: 260px;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 28px 64px -26px rgba(24,24,27,0.38);
  background: var(--border);
}
.hero__photocard-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroPhotoFade 12s linear infinite;
}
.hero__photocard-slide:nth-child(1) { animation-delay: 0s; }
.hero__photocard-slide:nth-child(2) { animation-delay: -3s; }
.hero__photocard-slide:nth-child(3) { animation-delay: -6s; }
.hero__photocard-slide:nth-child(4) { animation-delay: -9s; }
.hero__photocard-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes heroPhotoFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  21%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero__photocard-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(17,17,20,0.72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__badge-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg);
  box-shadow: 0 14px 32px -16px rgba(24,24,27,0.32);
  white-space: nowrap;
}
.hero__badge-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.hero__photocard-wrap { position: relative; display: inline-block; }
.hero__badge-chip--top {
  top: -14px;
  right: -22px;
  animation: fcardFloat 7s ease-in-out infinite;
}
.hero__badge-chip--bottom {
  bottom: 24px;
  left: -30px;
  animation: fcardFloat 8s ease-in-out infinite;
  animation-delay: 1.2s;
}
.hero__photocard-desktop { position: absolute; top: 50%; right: 18%; transform: translateY(-50%); pointer-events: auto; z-index: 1; }
@media (max-width: 1100px) {
  .hero__photocard-desktop { display: none; }
}
.hero__photocard-mobile { display: flex; justify-content: center; margin-top: 44px; }
.hero__photocard-mobile .hero__photocard-wrap { margin: 0 0 20px; }
@media (min-width: 1101px) {
  .hero__photocard-mobile { display: none; }
}

/* ---- Marquee strip ---- */
.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: 16px;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
  padding-inline: 14px;
}
.marquee__dot { color: var(--border-hover); opacity: 0.6; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Trust strip ---- */
.trust {
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.trust__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--fg-muted);
}
.trust__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--whatsapp);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--whatsapp) 18%, transparent);
}
.trust strong { color: var(--fg); font-weight: 500; }

/* ---- Jobs grid (3-col mockup cards) ---- */
.grid-jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .grid-jobs { grid-template-columns: 1fr; }
}
.jcard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.jcard:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(59,130,246,0.25);
}
.jcard--wide {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}
.jcard--wide .jcard__mock { flex: 0 0 320px; min-height: 130px; }
.jcard--wide .jcard__text { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) {
  .jcard--wide { flex-direction: column; align-items: stretch; }
  .jcard--wide .jcard__mock { flex: none; }
}
.jcard h3 { font-size: 21px; }
.jcard__body { color: var(--fg-muted); font-size: 15px; line-height: 1.55; }
.jcard__mock {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
  min-height: 160px;
}

/* mini browser mockup */
.mock-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.mock-browser__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.mock-browser__url {
  margin-left: 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--fg-muted);
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 3px 8px;
}
.mock-browser__body { padding: 14px; }
.mock-browser__line { height: 8px; border-radius: 4px; background: var(--border); margin-bottom: 8px; }
.mock-browser__line--accent { background: var(--accent); opacity: 0.35; width: 60%; }
.mock-browser__btn {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

/* mini whatsapp chat mockup */
.mock-chat {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-chat__time {
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.mock-chat__bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
.mock-chat__bubble--in {
  background: #fff;
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.mock-chat__bubble--out {
  background: #DCF8C6;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  color: #111;
}

/* sequential reveal of the chat mockup, triggered when the parent .jcard scrolls into view */
.mock-anim {
  opacity: 0;
  animation: chatFadeIn 420ms var(--ease) forwards;
  animation-delay: var(--d, 0ms);
  animation-play-state: paused;
}
.jcard.is-in .mock-anim { animation-play-state: running; }
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mock-chat__typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  border-bottom-left-radius: 3px;
}
.mock-chat__typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg-muted);
  animation: typingDot 1s ease-in-out infinite;
}
.mock-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.mock-chat__typing span:nth-child(3) { animation-delay: 0.3s; }
.mock-chat__typing.mock-anim {
  animation-name: typingInOut;
  animation-duration: 900ms;
}
@keyframes typingInOut {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* mini google maps local pack mockup */
.mock-maps { padding: 14px; }
.mock-maps__result {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
}
.mock-maps__pin {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
}
.mock-maps__lines { flex: 1; }
.mock-maps__lines .mock-browser__line { height: 7px; }
.mock-maps__stars { color: #F5A623; font-size: 11px; }

/* ---- Deep case study ---- */
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 32px; }
}
.case__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .case__stats { grid-template-columns: 1fr; }
}
.stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
}
.stat__num {
  font-family: "DM Mono", monospace;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.stat__label {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.4;
}
.case__col--wide { grid-column: 1 / -1; }

/* ---- Problem grid ---- */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 760px) {
  .grid-4 { grid-template-columns: 1fr; }
}

.pcard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.pcard:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(59,130,246,0.25);
}
.pcard__tag {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.pcard h3 { font-size: 22px; line-height: 1.2; }
.pcard__body { color: var(--fg-muted); font-size: 15.5px; line-height: 1.6; }
.pcard__metric {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--fg);
  letter-spacing: 0.01em;
}

/* ---- Steps ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-top: 1px solid var(--border); border-left: none; }
}
.step {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: background 240ms var(--ease);
}
.step + .step { border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  .step + .step { border-left: none; }
}
.step:hover { background: var(--bg-alt); }
.step__num {
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.step h3 { font-size: 22px; line-height: 1.2; }
.step__body { color: var(--fg-muted); font-size: 15.5px; line-height: 1.6; }

/* ---- Réalisations ---- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
}
.rcard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: all 240ms var(--ease);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.rcard:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(59,130,246,0.25);
}
.rcard__thumb {
  height: 140px;
  background: linear-gradient(135deg, var(--bg-alt), #EFF3FA);
  border-bottom: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rcard__body { padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.rcard__tag {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rcard h3 { font-size: 21px; line-height: 1.25; }
.rcard__desc { color: var(--fg-muted); font-size: 15px; line-height: 1.6; flex: 1; }

/* ---- Pour qui : segment cards ---- */
.grid-seg { align-items: stretch; }
.segcard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: border-color 280ms var(--ease), transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.segcard::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(420px 220px at 20% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
  z-index: -1;
}
.segcard:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(59,130,246,0.32);
}
.segcard:hover::before { opacity: 1; }
.segcard__tag {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.segcard h3 { font-size: 20px; line-height: 1.25; }
.segcard__body { color: var(--fg-muted); font-size: 15px; line-height: 1.6; flex: 1; }

/* ---- Industries chips ---- */
.industries {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.industries__label {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.industries__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 14px;
  color: var(--fg);
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.chip:hover { border-color: var(--border-hover); background: #fff; }

/* ---- Packs (tiers) ---- */
.tier {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.tier:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(59,130,246,0.25);
}
.tier--popular {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -22px rgba(59,130,246,0.35);
}
.tier__badge {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--accent);
  color: #fff;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
}
.tier__name {
  font-family: "DM Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--fg);
}
.tier__desc { color: var(--fg-muted); font-size: 15px; margin: 0; }
.tier__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.tier__features li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  padding-left: 24px;
  position: relative;
}
.tier__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}
.tier__cta { justify-content: center; margin-top: 8px; }

/* ---- bcard note (in-development mention) ---- */
.bcard__note {
  font-family: "DM Mono", monospace;
  font-size: 12.5px;
  color: var(--fg-muted);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

/* ---- Témoignages (structure ready, hidden until real quotes exist) ---- */
.testimonials--hidden { display: none; }
.tcard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tcard__quote { font-size: 16.5px; line-height: 1.6; color: var(--fg); margin: 0; }
.tcard__author { display: flex; flex-direction: column; gap: 2px; }
.tcard__name { font-weight: 500; font-size: 14.5px; }
.tcard__company { font-size: 13px; color: var(--fg-muted); }

/* ---- FAQ ---- */
.faq {
  border-top: 1px solid var(--border);
}
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__q {
  width: 100%;
  text-align: left;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  transition: color 200ms var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  transition: all 240ms var(--ease);
  position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--fg);
  transition: transform 240ms var(--ease), background 240ms var(--ease);
}
.faq__icon::before { width: 10px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 10px; }
.faq__item--open .faq__icon {
  background: var(--accent);
  border-color: var(--accent);
}
.faq__item--open .faq__icon::before { background: #fff; }
.faq__item--open .faq__icon::after { background: #fff; transform: rotate(90deg); }
.faq__a {
  overflow: hidden;
  transition: grid-template-rows 320ms var(--ease);
  display: grid;
  grid-template-rows: 0fr;
}
.faq__item--open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner {
  min-height: 0;
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 72ch;
}
.faq__a-inner > p {
  margin: 0;
  padding-bottom: 28px;
}

.faq__footer {
  margin-top: 56px;
  padding: 36px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.faq__footer-text h3 { margin-bottom: 6px; font-size: 20px; }
.faq__footer-text p { margin: 0; color: var(--fg-muted); font-size: 15px; }

/* ---- Final CTA ---- */
.final {
  text-align: left;
}
.final__inner { max-width: 880px; }
.final h2 { margin-bottom: 24px; }
.final .lede { margin-bottom: 40px; }
.final__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.final__note {
  margin-top: 24px;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.wa-btn {
  background: #fff;
  color: var(--fg);
  border: 1px solid var(--border);
}
.wa-btn:hover {
  border-color: var(--whatsapp);
  color: var(--whatsapp);
  transform: translateY(-1px);
}

/* ---- Footer ---- */
.footer {
  border-top: 1px solid var(--border);
  padding-block: 56px 28px;
  background: var(--bg);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}
.footer__tag {
  color: var(--fg-muted);
  font-size: 14px;
  margin-top: 14px;
  max-width: 32ch;
}
.footer__col-title {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.footer__links a { color: var(--fg); transition: color 200ms var(--ease); }
.footer__links a:hover { color: var(--accent); }
.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-grid;
  place-items: center;
  transition: all 200ms var(--ease);
  color: var(--fg);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.icon-btn--wa:hover { border-color: var(--whatsapp); color: var(--whatsapp); }
.footer__bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--fg-muted);
}
.footer__bottom a { color: var(--fg-muted); }
.footer__bottom a:hover { color: var(--fg); }
.footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- Reveal animation ---- */
:root { --motion-y: 14px; --motion-d: 600ms; }
.reveal {
  opacity: 0;
  transform: translateY(var(--motion-y));
  transition: opacity var(--motion-d) var(--ease), transform var(--motion-d) var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* logo mark subtle pulse */
.logo__mark img { animation: logoPulse 7s ease-in-out infinite; transform-origin: center; }
@keyframes logoPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ---- Blue section variant ---- */
#commencer.section--blue {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
#commencer.section--blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 360px at 80% 0%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(700px 320px at 10% 100%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}
#commencer.section--blue > * { position: relative; }
#commencer.section--blue .eyebrow { color: rgba(255,255,255,0.72); }
#commencer.section--blue .lede { color: rgba(255,255,255,0.86); }
#commencer.section--blue h2 .accent {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 8px;
  text-decoration-color: rgba(255,255,255,0.55);
}
#commencer.section--blue .btn--primary {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset, 0 10px 24px -10px rgba(0,0,0,0.3);
}
#commencer.section--blue .btn--primary:hover {
  background: #f5f9ff;
  color: var(--accent-hover);
}
#commencer.section--blue .wa-btn {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
#commencer.section--blue .wa-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff;
}
#commencer.section--blue .final__note { color: rgba(255,255,255,0.7); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .logo__mark img { animation: none !important; }
  .marquee__track { animation: none !important; }
  .mock-anim { animation: none !important; opacity: 1 !important; }
  .mock-chat__typing { display: none !important; }
  .mock-chat__typing span { animation: none !important; }
  .segcard, .segcard::before { transition: none !important; }
  .fcard { animation: none !important; }
  .hero__cards { transition: none !important; transform: none !important; }
  .tier { transition: none !important; }
  .hero__photocard-slide { animation: none !important; opacity: 0 !important; }
  .hero__photocard-slide:first-child { opacity: 1 !important; }
  .hero__badge-chip { animation: none !important; }
}

/* ---- Service page hero (simpler, no motion graphic needed) ---- */
.svc-hero {
  padding-block: clamp(64px, 9vw, 110px) clamp(56px, 7vw, 90px);
  position: relative;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 5%, transparent) 0%, transparent 45%),
    linear-gradient(135deg, var(--bg-alt) 0%, var(--bg) 55%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.svc-hero::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.svc-hero__inner { max-width: 900px; position: relative; z-index: 1; }
.breadcrumb {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 20px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.breadcrumb a { color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--accent); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.bcard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bcard h3 { font-size: 21px; }
.bcard p { color: var(--fg-muted); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* ---- Mobile fixes ---- */
@media (max-width: 768px) {
  :root { --section-y: 48px; --gutter: 16px; }
  main { padding-top: 60px; }

  h1 { font-size: 36px; }
  .hero { padding-block: 48px; }
  .grid-4 { grid-template-columns: 1fr; }

  .nav__inner { height: 60px; }

  .nav__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 200ms var(--ease);
  }
  .nav__mobile-toggle:hover { background: var(--bg-alt); }

  .nav__links--open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 8px 0 16px;
    z-index: 9998;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  }
  .nav__links--open .nav__link {
    padding: 14px 24px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .btn--wa-nav span.wa-label { display: none; }
  .btn--wa-nav { padding: 10px 12px; }
}

@media (max-width: 375px) {
  h1 { font-size: 28px; }
}

/* ==========================================================================
   V4 additions: nav dropdowns, client logo strip, security band, carousel
   ========================================================================== */

/* ---- Nav dropdowns (desktop hover / focus, JS click-toggle for touch) ---- */
.nav__drop { position: relative; }
.nav__drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--fg-muted);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.nav__drop-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms var(--ease);
  opacity: 0.7;
}
.nav__drop:hover .nav__drop-toggle,
.nav__drop:focus-within .nav__drop-toggle,
.nav__drop--open .nav__drop-toggle { color: var(--fg); background: var(--bg-alt); }
.nav__drop:hover .nav__drop-toggle::after,
.nav__drop:focus-within .nav__drop-toggle::after,
.nav__drop--open .nav__drop-toggle::after { transform: rotate(225deg) translateY(1px); }

.nav__drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -16px rgba(24,24,27,0.22);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
  z-index: 20;
}
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu,
.nav__drop--open .nav__drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__drop-menu a {
  font-size: 14px;
  color: var(--fg);
  padding: 9px 12px;
  border-radius: 7px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav__drop-menu a:hover { background: var(--bg-alt); color: var(--accent); }

@media (max-width: 768px) {
  /* Flat list in the mobile drawer: no hover menus, everything expanded */
  .nav__drop-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 14px 24px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    color: var(--fg);
    cursor: default;
    pointer-events: none;
  }
  .nav__drop-toggle::after { display: none; }
  .nav__drop-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 6px 0 6px 36px;
    background: var(--bg-alt);
  }
  .nav__drop-menu a { padding: 10px 12px; font-size: 15px; }
}

/* ---- Client logo / wordmark strip ---- */
.logos {
  padding-block: 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.logos__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.logos__label {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.logos__row { display: flex; gap: 12px; flex-wrap: wrap; }
.logos__chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--fg);
  transition: border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.logos__chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* ---- Hero industry carousel (rotating chip, crossfade) ---- */
/* Swap-in slot: replace this text+icon carousel with real client industry
   photos once available (see comment in index.html hero markup). */
.hero__carousel {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-muted);
}
.hero__carousel-track {
  position: relative;
  height: 26px;
  min-width: 160px;
  display: inline-block;
}
.hero__carousel-item {
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.hero__carousel-item.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__carousel-item { transition: none; }
}

/* ---- Security / confiance band (dark section) ---- */
.section--dark {
  background: #101014;
  color: #F4F4F5;
  border-color: rgba(255,255,255,0.08);
}
.section--dark .eyebrow { color: rgba(244,244,245,0.55); }
.section--dark .lede { color: rgba(244,244,245,0.72); }
.section--dark h2 { color: #F4F4F5; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.trust-card h3 { font-size: 17px; color: #fff; margin-bottom: 8px; }
.trust-card p { font-size: 14.5px; line-height: 1.6; color: rgba(244,244,245,0.7); margin: 0; }

/* diagram: client -> systeme Krateon -> canaux, CSS only */
.trust-diagram {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 36px 20px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
}
.trust-diagram__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  text-align: center;
}
.trust-diagram__box {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: "DM Mono", monospace;
  font-size: 12.5px;
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.trust-diagram__box--accent {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 22%, transparent);
}
.trust-diagram__label { font-size: 11.5px; color: rgba(244,244,245,0.55); }
.trust-diagram__channels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust-diagram__chan {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: rgba(244,244,245,0.65);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 4px 10px;
}
.trust-diagram__arrow {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.4), rgba(255,255,255,0.05));
  position: relative;
  flex-shrink: 0;
  margin-inline: 4px;
}
.trust-diagram__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(255,255,255,0.6);
  border-bottom: 1.5px solid rgba(255,255,255,0.6);
  transform: translateY(-50%) rotate(-45deg);
}
@media (max-width: 700px) {
  .trust-diagram { flex-direction: column; }
  .trust-diagram__arrow { width: 1px; height: 32px; }
  .trust-diagram__arrow::after { right: 50%; top: 0; transform: translateX(50%) rotate(45deg); }
}

/* ---- Subtle parallax drift on section decorations (transform-only) ---- */
.section-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.section-decor__blob {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 70%);
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-decor__blob {
      animation: blobDrift linear;
      animation-timeline: view();
      animation-range: entry 0% cover 100%;
    }
  }
}
@keyframes blobDrift {
  from { transform: translate(-30px, -20px) scale(0.94); }
  to   { transform: translate(30px, 24px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .section-decor__blob { animation: none !important; }
}

/* ---- Réalisations card link ---- */
.rcard__link { margin-top: auto; }

/* ---- Case study pages (realisations/*.html) ---- */
.cs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.cs-hero__meta span {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
}
.cs-mechanism {
  counter-reset: mech;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.cs-mechanism__step {
  counter-increment: mech;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.cs-mechanism__step::before {
  content: counter(mech, decimal-leading-zero);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--accent);
}
.cs-mechanism__step h3 { font-size: 17px; margin-bottom: 6px; }
.cs-mechanism__step p { margin: 0; color: var(--fg-muted); font-size: 15px; line-height: 1.6; }

/* =========================================================
   v5 additions: real logos, live-link cards, workflow canvas,
   Krateon.ai bridge, motion polish
   ========================================================= */

/* ---- Client logo strip: real logos ---- */
.logos__chip--logo {
  padding: 6px 20px;
  min-width: 96px;
  justify-content: center;
}
.logos__chip--logo img {
  height: 26px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}
.logos__chip--dark {
  background: #16302B;
  border-color: #16302B;
}
.logos__chip--dark:hover { border-color: #A38560; }
.logos__chip--dark img { height: 34px; }

/* ---- Case-page logo badge (hero) ---- */
.cs-logo-badge {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  margin-bottom: 20px;
}
.cs-logo-badge img { height: 24px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.cs-logo-badge--dark { background: #16302B; border-color: #16302B; }
.cs-logo-badge--dark img { height: 30px; }

/* ---- Réalisations card: outbound "voir le site" link ---- */
.rcard__site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Mono", monospace;
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 6px;
  transition: color 200ms var(--ease);
}
.rcard__site-link:hover { color: var(--accent); }
.rcard__site-link svg { flex-shrink: 0; }

/* ---- Case visual: browser-frame styled screenshot container ---- */
.cs-browser {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.25);
}
.cs-browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.cs-browser__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.cs-browser__url {
  margin-left: 8px;
  font-family: "DM Mono", monospace;
  font-size: 12.5px;
  color: var(--fg-muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  flex: 1;
  max-width: 320px;
}
.cs-browser__body { background: #f4f4f4; display: flex; align-items: center; justify-content: center; max-height: 560px; overflow: hidden; }
.cs-browser__body img { width: 100%; height: auto; display: block; object-fit: cover; object-position: top center; max-height: 560px; }
.cs-visual-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 860px) { .cs-visual-row { grid-template-columns: 1fr; } }
.cs-visual-side {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.cs-visual-side img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cs-visual-caption {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 10px;
}
.cs-live-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 15px;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  padding-bottom: 3px;
  transition: border-color 200ms var(--ease);
}
.cs-live-link:hover { border-color: var(--accent); }

/* ---- Krateon.ai bridge band ---- */
.bridge {
  padding-block: clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.bridge__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
@media (max-width: 800px) {
  .bridge__inner { grid-template-columns: 1fr; text-align: left; }
}
.bridge__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}
.bridge__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.bridge__text { max-width: 62ch; }
.bridge__text p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-muted); }
.bridge__text strong { color: var(--fg); font-weight: 500; }
.bridge__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 22px;
  white-space: nowrap;
  transition: border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.bridge__cta:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* ---- Motion polish: gradient headline words ---- */
.grad-text {
  background: linear-gradient(100deg, var(--accent) 0%, #8B5CF6 55%, var(--accent) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grad-text {
      animation: gradTextShift 6s ease-in-out infinite alternate;
    }
  }
}
@keyframes gradTextShift {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) { .grad-text { animation: none !important; } }

/* ---- Motion polish: drifting glow orbs (reuses .section-decor host) ---- */
.section-decor__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .section-decor__glow { animation: glowDrift 14s ease-in-out infinite alternate; }
}
@keyframes glowDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(24px, -18px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .section-decor__glow { animation: none !important; } }

/* ---- Motion polish: animated border-gradient on card hover ---- */
.jcard, .rcard, .segcard, .bcard, .trust-card {
  position: relative;
}
.jcard::before, .rcard::before, .segcard::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--accent), #8B5CF6, var(--accent));
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}
.jcard:hover::before, .rcard:hover::before, .segcard:hover::before {
  opacity: 1;
  animation: borderGradientShift 3s linear infinite;
}
@keyframes borderGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .jcard:hover::before, .rcard:hover::before, .segcard:hover::before { animation: none !important; }
}

/* =========================================================
   Automation workflow canvas (n8n-style animated node graph)
   ========================================================= */
.workflow {
  position: relative;
  padding-block: clamp(72px, 9vw, 120px);
  background: #0B0D12;
  color: #F4F4F5;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.workflow__dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
  pointer-events: none;
}
.workflow__head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 72px); position: relative; z-index: 1; }
.workflow__head .eyebrow { color: rgba(244,244,245,0.55); }
.workflow__head h2 { color: #F4F4F5; }
.workflow__head p { color: rgba(244,244,245,0.68); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; max-width: 62ch; margin-top: 16px; }

.workflow__canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}
.workflow__canvas svg { width: 100%; height: auto; display: block; overflow: visible; }

.wf-connector {
  fill: none;
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1.5;
}
.wf-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 10 340;
  stroke-dashoffset: 0;
  opacity: 0;
}
.workflow.is-active .wf-pulse {
  opacity: 1;
  animation: wfPulseTravel 2.6s linear infinite;
}
.wf-pulse[data-delay="1"] { animation-delay: 0.4s !important; }
.wf-pulse[data-delay="2"] { animation-delay: 0.8s !important; }
.wf-pulse[data-delay="3"] { animation-delay: 1.2s !important; }
.wf-pulse[data-delay="4"] { animation-delay: 1.6s !important; }
@keyframes wfPulseTravel {
  from { stroke-dashoffset: 350; }
  to   { stroke-dashoffset: -350; }
}

.wf-node {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1.2;
  transition: fill 500ms var(--ease), stroke 500ms var(--ease);
}
.wf-node-icon { opacity: 0.55; transition: opacity 500ms var(--ease); }
.wf-node-label {
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  fill: rgba(244,244,245,0.62);
  transition: fill 500ms var(--ease);
}
.wf-node-sub {
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  fill: rgba(244,244,245,0.32);
}
.workflow.is-active .wf-node.is-lit {
  fill: color-mix(in oklab, var(--accent) 16%, rgba(255,255,255,0.05));
  stroke: var(--accent);
}
.workflow.is-active .wf-node.is-lit + .wf-node-icon,
.workflow.is-active g.is-lit .wf-node-icon { opacity: 1; }
.workflow.is-active g.is-lit .wf-node-label { fill: #fff; }
.workflow.is-active g.is-lit .wf-node { fill: color-mix(in oklab, var(--accent) 18%, rgba(255,255,255,0.05)); stroke: var(--accent); filter: drop-shadow(0 0 12px color-mix(in oklab, var(--accent) 55%, transparent)); }

@media (prefers-reduced-motion: reduce) {
  .wf-pulse { animation: none !important; opacity: 0.6 !important; }
  .workflow.is-active g.is-lit .wf-node { filter: none; }
}

@media (max-width: 640px) {
  .workflow__canvas { max-width: 100%; }
}


/* =========================================================
   v7: shared animated-diagram framework (service pages)
   All diagrams use IntersectionObserver-driven .reveal/.is-in
   (already wired in main.js) plus transform/opacity-only CSS
   animation. Everything below is muted under reduced motion.
   ========================================================= */
.svc-diagram {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  padding: clamp(20px, 4vw, 32px);
  margin-block: 44px;
}
.svc-diagram__label {
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  display: block;
}
.svc-diagram__frame {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
}
.diagram-anim {
  opacity: 0;
  animation: chatFadeIn 480ms var(--ease) forwards;
  animation-delay: var(--d, 0ms);
  animation-play-state: paused;
}
.svc-diagram.is-in .diagram-anim,
.diagram-loop.svc-diagram.is-in .diagram-anim-loop { animation-play-state: running; }

/* ---- 1. Site web : assemblage de page ---- */
.assembly {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.assembly__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.assembly__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.assembly__url {
  margin-left: 6px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--fg-muted);
}
.assembly__body { position: relative; padding: 20px 20px 60px; min-height: 190px; }
.assembly__block { height: 12px; border-radius: 4px; background: var(--border); margin-bottom: 10px; }
.assembly__block--hero {
  height: 44px;
  background: color-mix(in oklab, var(--accent) 12%, var(--bg-alt));
  border-radius: var(--radius-sm);
}
.assembly__block--accent { background: var(--accent); opacity: 0.32; width: 58%; }
.assembly__block--wide { width: 88%; }
.assembly__block--half { width: 50%; }
.assembly__cta-row { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; }
.assembly__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
}
.assembly__cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid var(--whatsapp);
  opacity: 0;
}
.svc-diagram.is-in .assembly__cta::after {
  animation: assemblyRipple 2200ms var(--ease) infinite;
  animation-delay: 2.1s;
}
@keyframes assemblyRipple {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.assembly__cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
}
.assembly__cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.svc-diagram.is-in .assembly__cursor {
  animation: cursorTravel 1400ms var(--ease) forwards;
  animation-delay: 1.8s;
}
@keyframes cursorTravel {
  0%   { opacity: 0; top: 4px; left: 260px; transform: scale(1); }
  12%  { opacity: 1; }
  70%  { top: 140px; left: 46px; transform: scale(1); opacity: 1; }
  82%  { top: 140px; left: 46px; transform: scale(0.72); }
  100% { top: 140px; left: 46px; transform: scale(1); opacity: 1; }
}

/* ---- 2. Agent WhatsApp : conversation qui se tape ---- */
.chat-demo { padding: 4px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.chat-demo__time {
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.chat-demo__row { display: flex; flex-direction: column; gap: 2px; }
.chat-demo__row--in { align-items: flex-start; }
.chat-demo__row--out { align-items: flex-end; }
.chat-demo__bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.42;
}
.chat-demo__row--in .chat-demo__bubble { background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.chat-demo__row--out .chat-demo__bubble { background: #DCF8C6; border-bottom-right-radius: 3px; color: #111; }
.chat-demo__stamp { font-family: "DM Mono", monospace; font-size: 9.5px; color: var(--fg-muted); padding: 0 3px; }
.chat-demo__badge {
  align-self: center;
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: #fff;
  background: var(--whatsapp);
  border-radius: 999px;
  padding: 5px 14px;
}

/* ---- 3. Google Maps : recherche qui se tape + classement ---- */
.gmaps-demo { padding: 4px; }
.gmaps-demo__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  margin-bottom: 18px;
  background: #fff;
}
.gmaps-demo__search svg { flex-shrink: 0; color: var(--fg-muted); }
.gmaps-demo__typed {
  font-family: "DM Mono", monospace;
  font-size: 12.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 1.5px solid transparent;
}
.svc-diagram.is-in .gmaps-demo__typed {
  animation: gmapsType 1600ms steps(21, end) forwards,
             gmapsCaret 500ms step-end 6 1600ms;
  animation-delay: 0.3s, 0.3s;
}
@keyframes gmapsType { from { width: 0; } to { width: 21ch; } }
@keyframes gmapsCaret { 50% { border-color: var(--fg-muted); } }
.gmaps-demo__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  transition: transform 700ms var(--ease);
}
.gmaps-demo__pin {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--fg-muted);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  transition: background 700ms var(--ease), color 700ms var(--ease);
}
.gmaps-demo__lines { flex: 1; }
.gmaps-demo__lines .mock-browser__line { height: 7px; }
.gmaps-demo__stars { display: inline-flex; align-items: center; gap: 4px; color: #F5A623; font-size: 11px; }
.gmaps-demo__spark { opacity: 0; transform: scale(0.4); display: inline-block; transition: none; }
.gmaps-demo__result--client { position: relative; }
.svc-diagram.is-in .gmaps-demo__result--client { animation: gmapsRise 600ms var(--ease) forwards; animation-delay: 2.4s; }
.svc-diagram.is-in .gmaps-demo__result--client .gmaps-demo__pin { animation: gmapsPinAccent 10ms linear forwards; animation-delay: 2.4s; }
.svc-diagram.is-in .gmaps-demo__result--client .gmaps-demo__spark { animation: gmapsSpark 700ms var(--ease) forwards; animation-delay: 2.9s; }
@keyframes gmapsRise {
  from { transform: translateY(0); }
  to   { transform: translateY(-80px); }
}
@keyframes gmapsPinAccent {
  to { background: var(--accent); color: #fff; }
}
@keyframes gmapsSpark {
  0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1.15) rotate(20deg); }
  100% { opacity: 0; transform: scale(1) rotate(30deg); }
}

/* ---- 4. Automatisation : cartes qui traversent vers "fait" ---- */
.flow-demo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 6px;
}
.flow-demo__col { display: flex; flex-direction: column; gap: 10px; }
.flow-demo__col-label {
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.flow-demo__card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px 12px;
  font-size: 12px;
  position: relative;
}
.flow-demo__card--traveling {
  animation: flowTravel 3.6s var(--ease) infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes flowTravel {
  0%   { transform: translateX(0); opacity: 1; }
  38%  { transform: translateX(78px); opacity: 1; }
  46%  { transform: translateX(78px) scale(0.92); opacity: 0.85; }
  54%  { transform: translateX(150px) scale(0.92); opacity: 0.85; }
  62%  { transform: translateX(150px) scale(1); opacity: 0; }
  63%, 100% { transform: translateX(150px) scale(1); opacity: 0; }
}
.flow-demo__node {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 10%, var(--bg-alt));
  border: 1px solid var(--border);
}
.flow-demo__gear {
  animation: gearSpin 6s linear infinite;
  transform-origin: center;
}
@keyframes gearSpin { to { transform: rotate(360deg); } }
.flow-demo__done-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.flow-demo__count {
  font-family: "DM Mono", monospace;
  color: var(--accent);
  font-weight: 500;
  font-size: 12.5px;
}

/* ---- 5. Back-office : tableau qui se met a jour ---- */
.dash-demo { padding: 4px; }
.dash-demo__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.dash-demo__row:last-child { border-bottom: none; }
.dash-demo__row .mock-browser__line { margin-bottom: 0; }
.dash-demo__status {
  position: relative;
  display: inline-flex;
  height: 18px;
  align-items: center;
}
.dash-demo__status span {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.dash-demo__status .is-pending { background: var(--bg-alt); color: var(--fg-muted); border: 1px solid var(--border); }
.dash-demo__status .is-confirmed {
  background: color-mix(in oklab, var(--whatsapp) 16%, #fff);
  color: #1a8a45;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
}
.svc-diagram.is-in .dash-demo__status .is-pending { animation: dashFadeOut 10ms linear forwards; animation-delay: 2.6s; }
.svc-diagram.is-in .dash-demo__status .is-confirmed { animation: dashFadeIn 10ms linear forwards; animation-delay: 2.6s; }
@keyframes dashFadeOut { to { opacity: 0; } }
@keyframes dashFadeIn { to { opacity: 1; } }

@media (max-width: 560px) {
  .flow-demo { grid-template-columns: 1fr; justify-items: center; }
  .dash-demo__row { grid-template-columns: 1.2fr 1fr auto; }
  .dash-demo__row span[data-col="date"] { display: none; }
}

/* =========================================================
   v7: homepage "Comment ca marche" connecting line + icons
   ========================================================= */
.steps { position: relative; }
.steps__line {
  position: absolute;
  top: 19px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border);
  overflow: hidden;
  z-index: 0;
}
.steps__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms var(--ease);
}
.steps.is-in .steps__line::after { transform: scaleX(1); }
@media (max-width: 760px) { .steps__line { display: none; } }
.step { position: relative; z-index: 1; }
.step__num {
  transition: transform 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease);
}
.steps.is-in .step:nth-child(2) .step__num { transition-delay: 100ms; }
.steps.is-in .step:nth-child(3) .step__num { transition-delay: 500ms; }
.steps.is-in .step:nth-child(4) .step__num { transition-delay: 900ms; }
.steps.is-in .step__num {
  animation: stepPop 480ms var(--ease) backwards;
}
.steps.is-in .step:nth-child(2) .step__num { animation-delay: 100ms; }
.steps.is-in .step:nth-child(3) .step__num { animation-delay: 500ms; }
.steps.is-in .step:nth-child(4) .step__num { animation-delay: 900ms; }
@keyframes stepPop {
  0%   { transform: scale(0.6); color: var(--fg-muted); }
  60%  { transform: scale(1.12); color: var(--accent); }
  100% { transform: scale(1); color: var(--accent); }
}

/* =========================================================
   v7: solutions pages, lightweight retinted visuals
   ========================================================= */
.sol-diagram {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
}
.sol-diagram__panel {
  flex: 1 1 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
  min-width: 200px;
}
.sol-diagram__panel-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--fg-muted);
  margin-bottom: 8px;
  display: block;
}
.sol-diagram__arrow {
  align-self: center;
  color: var(--border-hover);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
@media (max-width: 700px) { .sol-diagram__arrow { transform: rotate(90deg); } }

/* =========================================================
   v7: polish, hover states, focus-visible, active nav
   ========================================================= */
a, button, [tabindex] {
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.faq__q:focus-visible { outline-offset: -2px; }
.chip:focus-visible,
.rcard__site-link:focus-visible { outline-offset: 2px; }

.bcard {
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.bcard:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -18px rgba(0,0,0,0.18);
}
.trust-card { transition: border-color 220ms var(--ease), transform 220ms var(--ease); }
.trust-card:hover { border-color: rgba(255,255,255,0.28); transform: translateY(-3px); }

.nav__link[aria-current="page"],
.nav__drop-toggle[aria-current="page"] {
  color: var(--fg);
  background: var(--bg-alt);
  font-weight: 500;
}
.nav__drop[data-active="true"] .nav__drop-toggle {
  color: var(--fg);
  background: var(--bg-alt);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .diagram-anim { opacity: 1 !important; animation: none !important; }
  .svc-diagram.is-in .assembly__cta::after,
  .svc-diagram.is-in .assembly__cursor,
  .svc-diagram.is-in .gmaps-demo__typed,
  .svc-diagram.is-in .gmaps-demo__result--client,
  .svc-diagram.is-in .gmaps-demo__result--client .gmaps-demo__pin,
  .svc-diagram.is-in .gmaps-demo__result--client .gmaps-demo__spark,
  .flow-demo__card--traveling,
  .flow-demo__gear,
  .svc-diagram.is-in .dash-demo__status .is-pending,
  .svc-diagram.is-in .dash-demo__status .is-confirmed,
  .steps__line::after,
  .steps.is-in .step__num {
    animation: none !important;
    transition: none !important;
  }
  .gmaps-demo__typed { width: 21ch !important; border-color: transparent !important; }
  .gmaps-demo__result--client { transform: translateY(-80px) !important; }
  .gmaps-demo__result--client .gmaps-demo__pin { background: var(--accent) !important; color: #fff !important; }
  .gmaps-demo__spark { opacity: 1 !important; transform: scale(1) !important; }
  .dash-demo__status .is-pending { opacity: 0 !important; }
  .dash-demo__status .is-confirmed { opacity: 1 !important; }
  .steps__line::after { transform: scaleX(1) !important; }
  .step__num { color: var(--accent) !important; }
}

/* ======================================================================
   v8: dual-site packaging spec, additions
   Stat chips, before/after compare panel, capability cards, case cluster,
   cross-link grid, section decor helpers, risk-reversal note.
   ====================================================================== */

/* ---- Stat chip: inline stat next to a headline or lede ---- */
.stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 13.5px;
  color: var(--fg-muted);
  margin-top: 20px;
}
.stat-chip strong {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 16px;
  color: var(--accent);
}
.section--dark .stat-chip,
.section--blue .stat-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: rgba(244,244,245,0.75);
}

/* ---- Before / after comparison panel ---- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--card-bg);
}
.compare__side {
  padding: clamp(24px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.compare__side--before {
  background: var(--bg-alt);
  filter: saturate(0.55);
}
.compare__side--after {
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 7%, var(--bg)) 0%, var(--bg) 60%);
}
.compare__label {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.compare__side--after .compare__label { color: var(--accent); }
.compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.compare__item { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--fg); }
.compare__side--before .compare__item { color: var(--fg-muted); }
.compare__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  margin-top: 1px;
}
.compare__icon--x { background: rgba(220,38,38,0.1); color: #DC2626; }
.compare__icon--check { background: rgba(22,163,74,0.12); color: #16A34A; }
.compare__divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.compare__divider span {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg-muted);
}
@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }
  .compare__divider { display: none; }
  .compare__side--before { border-bottom: 1px solid var(--border); }
}
.compare.reveal .compare__side { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.compare.reveal.is-in .compare__side { opacity: 1; transform: none; }
.compare.reveal.is-in .compare__side--after { transition-delay: 140ms; }
@media (prefers-reduced-motion: reduce) {
  .compare.reveal .compare__side { opacity: 1; transform: none; transition: none; }
}

/* ---- Compact capability card row (feature block compression) ---- */
.cap-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
}
.cap-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--card-bg);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.cap-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.cap-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
  margin-bottom: 12px;
}
.cap-card h4 { font-size: 15.5px; margin: 0 0 6px; }
.cap-card p { font-size: 13.5px; line-height: 1.55; color: var(--fg-muted); margin: 0; }

/* ---- Case study card cluster ---- */
.case-cluster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
}
.case-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.case-mini:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -20px rgba(0,0,0,0.18); border-color: var(--border-hover); }
.case-mini__logo { font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.05em; color: var(--fg-muted); text-transform: uppercase; }
.case-mini__stat { font-size: 22px; font-weight: 600; color: var(--accent); }
.case-mini__desc { font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; flex: 1; }
.case-mini__link { font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--border); align-self: flex-start; }
.case-mini:hover .case-mini__link { border-color: var(--accent); color: var(--accent); }

/* ---- Cross-link grid to adjacent services ---- */
.cross-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
}
.cross-card {
  display: block;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.cross-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.cross-card h4 { font-size: 15.5px; margin: 0 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cross-card h4 .arrow { color: var(--fg-muted); transition: transform 220ms var(--ease), color 220ms var(--ease); }
.cross-card:hover h4 .arrow { color: var(--accent); transform: translateX(3px); }
.cross-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; margin: 0; }

/* ---- Feature block 2: human-in-the-loop / escalation ---- */
.svc-escalation {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 860px) { .svc-escalation { grid-template-columns: 1fr; } }
.svc-escalation__visual {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.esc-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.esc-step__num {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent);
  flex: 0 0 auto;
}
.esc-step p { margin: 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; }
.esc-step--handoff { border-color: var(--border-hover); background: color-mix(in oklab, var(--accent) 5%, var(--card-bg)); }

/* ---- Risk-reversal note in final CTA ---- */
.final__risk {
  font-size: 13.5px;
  color: rgba(244,244,245,0.65);
  margin-top: 6px;
}

/* ---- Section decor: subtle gradient wash reused on flatter sections ---- */
.section-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 15% 0%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%);
  z-index: 0;
}
.section-wash ~ .container { position: relative; z-index: 1; }

/* ---- Technical process variant: terminal-styled step markers ---- */
.term-steps {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #101114;
  padding: clamp(20px, 3vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.9;
  overflow-x: auto;
}
.term-steps__bar { display: flex; gap: 6px; margin-bottom: 16px; }
.term-steps__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.term-line { white-space: pre; }
.term-line .term-comment { color: #6B7280; }
.term-line .term-num { color: #60A5FA; }
.term-line .term-key { color: #34D399; }
.term-line .term-str { color: #F4F4F5; }

@media (prefers-reduced-motion: reduce) {
  .cap-card:hover, .case-mini:hover, .cross-card:hover { transform: none; }
}

/* ================================================================
   v9 additions: AI-first nav, premium AI services, packs restructure,
   SVG icon set, themed workflow canvases
   ================================================================ */

/* ---- Nav dropdown sublabels ---- */
.nav__drop-menu a { display: flex; flex-direction: column; gap: 2px; }
.nav__sublabel { font-size: 11.5px; color: var(--fg-muted); font-weight: 400; letter-spacing: 0; line-height: 1.3; }
.nav__drop-menu a:hover .nav__sublabel { color: var(--accent); opacity: 0.85; }
.nav__drop-menu a.is-ai { position: relative; }
.nav__drop-menu a.is-ai::after {
  content: "IA";
  position: absolute;
  right: 10px;
  top: 9px;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, #7C3AED, #3B82F6);
  padding: 2px 6px;
  border-radius: 999px;
}
@media (max-width: 768px) {
  .nav__sublabel { font-size: 11px; }
}

/* ---- Inline SVG icon set (replaces emoji icons sitewide) ---- */
.icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-svg svg { width: 100%; height: 100%; }
.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip .icon-svg { width: 15px; height: 15px; color: var(--fg-muted); }
.hero__carousel-item { display: inline-flex; align-items: center; gap: 8px; }
.hero__carousel-item .icon-svg { width: 16px; height: 16px; color: var(--accent); }

/* ---- Premium AI service treatment (jobs grid, cross-link grids) ---- */
.jcard--ai {
  background: linear-gradient(160deg, color-mix(in oklab, #7C3AED 7%, var(--card-bg)), color-mix(in oklab, var(--accent) 5%, var(--card-bg)));
  border-color: color-mix(in oklab, #7C3AED 30%, var(--border));
  position: relative;
  overflow: hidden;
}
.jcard--ai::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(124,58,237,0.22), transparent 70%);
  pointer-events: none;
}
.jcard--ai .jcard__ai-tag {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, #7C3AED, #3B82F6);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.cross-card--ai {
  background: linear-gradient(160deg, color-mix(in oklab, #7C3AED 6%, var(--card-bg)), var(--card-bg));
  border-color: color-mix(in oklab, #7C3AED 25%, var(--border));
}
.cross-card--ai:hover { border-color: #7C3AED; }

/* mini voice-call mockup (agents vocaux card + service page) */
.mock-call { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mock-call__bar { display: flex; align-items: center; gap: 8px; font-family: "DM Mono", monospace; font-size: 10.5px; color: var(--fg-muted); }
.mock-call__dot { width: 7px; height: 7px; border-radius: 50%; background: #10B981; animation: callPulse 1.4s ease-in-out infinite; }
@keyframes callPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.mock-call__wave { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin: 4px 0; }
.mock-call__wave span { width: 3px; border-radius: 2px; background: var(--accent); opacity: 0.55; animation: callWave 1.1s ease-in-out infinite; }
.mock-call__wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
.mock-call__wave span:nth-child(2) { height: 80%; animation-delay: .1s; }
.mock-call__wave span:nth-child(3) { height: 55%; animation-delay: .2s; }
.mock-call__wave span:nth-child(4) { height: 95%; animation-delay: .3s; }
.mock-call__wave span:nth-child(5) { height: 60%; animation-delay: .4s; }
.mock-call__wave span:nth-child(6) { height: 35%; animation-delay: .5s; }
.mock-call__wave span:nth-child(7) { height: 75%; animation-delay: .6s; }
.mock-call__wave span:nth-child(8) { height: 45%; animation-delay: .7s; }
@keyframes callWave { 0%,100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }
.mock-call__line { font-size: 12px; color: var(--fg); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
@media (prefers-reduced-motion: reduce) {
  .mock-call__dot, .mock-call__wave span { animation: none; }
}

/* ---- Packs restructure v9 ---- */
.tier--enterprise {
  background: #101114;
  color: #F4F4F5;
  border-color: rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.tier--enterprise::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,58,237,0.28), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(59,130,246,0.22), transparent 55%);
  pointer-events: none;
}
.tier--enterprise .tier__name, .tier--enterprise .tier__desc { color: #F4F4F5; position: relative; }
.tier--enterprise .tier__desc { color: rgba(244,244,245,0.65); }
.tier--enterprise .tier__features { position: relative; color: rgba(244,244,245,0.85); }
.tier--enterprise .tier__features li::before { color: #A78BFA; }
.tier--enterprise .tier__foundation {
  position: relative;
  font-size: 12.5px;
  color: rgba(244,244,245,0.5);
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 14px;
  padding-top: 12px;
}
.tier__foundation {
  font-size: 12.5px;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 12px;
}
.tier__outcome {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.tier--enterprise .tier__outcome { color: #A78BFA; }

/* ---- Themed workflow canvas variants (retint the shared .workflow machinery) ---- */
.workflow--insurance .wf-node,
.workflow--sdr .wf-node,
.workflow--booking .wf-node,
.workflow--support .wf-node,
.workflow--maps .wf-node,
.workflow--site .wf-node,
.workflow--backoffice .wf-node { stroke: var(--border); }
.workflow--insurance { --accent: #3B82F6; }
.workflow--sdr { --accent: #7C3AED; }
.workflow--booking { --accent: #F59E0B; }
.workflow--support { --accent: #10B981; }
.workflow--maps { --accent: #EF4444; }
.workflow--site { --accent: #3B82F6; }
.workflow--backoffice { --accent: #7C3AED; }

/* ---- v9: dark packs band (security-band-style treatment) ---- */
.section--packs-dark .tier {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(244,244,245,0.85);
}
.section--packs-dark .tier:hover { border-color: rgba(255,255,255,0.22); }
.section--packs-dark .tier__name { color: #F4F4F5; }
.section--packs-dark .tier__desc { color: rgba(244,244,245,0.65); }
.section--packs-dark .tier__features li { color: rgba(244,244,245,0.78); }
.section--packs-dark .tier__foundation { color: rgba(244,244,245,0.5); border-top-color: rgba(255,255,255,0.12); }
.section--packs-dark .tier--popular {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -18px rgba(59,130,246,0.5);
}
.section--packs-dark .tier--enterprise { border-color: rgba(167,139,250,0.35); }

/* ---- v9: agents vocaux, call timeline diagram ---- */
.call-demo {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 4px;
}
.call-demo__step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 26px;
}
.call-demo__step:last-child { padding-bottom: 0; }
.call-demo__step::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--border));
  opacity: 0.4;
}
.call-demo__step:last-child::before { display: none; }
.call-demo__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex: 0 0 auto;
}
.call-demo__body { padding-top: 4px; }
.call-demo__label {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: block;
  margin-bottom: 3px;
}
.call-demo__text { font-size: 14px; color: var(--fg); line-height: 1.5; margin: 0; }
.call-demo__stamp { font-family: "DM Mono", monospace; font-size: 10px; color: var(--fg-muted); }
.dev-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7C3AED;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.3);
  padding: 5px 12px;
  border-radius: 999px;
}