/* =====================================================================
   PAGES PARTAGÉES v2 — Ads · Réalisations · SaaS
   Système visuel premium avec composants animés dédiés.
   ===================================================================== */

/* ============== TYPOGRAPHY OVERRIDES (cohérence avec site-web) ============== */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  box-shadow: 0 4px 12px -8px rgba(10, 22, 40, 0.12);
}
.eyebrow-pill i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
  flex: none;
}
.eyebrow-pill i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Section header pattern */
.shead {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 820px;
  margin-bottom: var(--s-14, 56px);
}
.shead h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
  font-weight: 700;
}
.shead h2 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.shead p {
  margin-top: var(--s-3);
  color: var(--mute);
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 62ch;
}
.shead--split {
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  max-width: none;
  gap: var(--s-12);
}
.shead--split p { margin-top: 0; }
@media (max-width: 880px) {
  .shead--split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* =====================================================================
   ADS HERO — already great, slight polish
   ===================================================================== */
.hero-ads {
  position: relative;
  min-height: 100dvh;
  padding-top: 140px;
  padding-bottom: var(--s-16);
  display: flex;
  align-items: center;
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero-ads::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 22, 40, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 22, 40, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
}
.hero-ads__mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(85px);
  opacity: 0.55;
}
.hero-ads__mesh-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}
.hero-ads__mesh-blob--1 {
  width: 580px; height: 580px;
  top: -10%; right: -10%;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.32) 0%, transparent 70%);
  animation: blobDriftA 24s ease-in-out infinite;
}
.hero-ads__mesh-blob--2 {
  width: 460px; height: 460px;
  bottom: -10%; left: -6%;
  background: radial-gradient(circle, rgba(255, 180, 100, 0.26) 0%, transparent 70%);
  animation: blobDriftB 30s ease-in-out infinite;
}
@keyframes blobDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-40px, 50px, 0) scale(1.12); }
}
@keyframes blobDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(60px, -30px, 0) scale(1.08); }
}
.hero-ads__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--s-10);
  align-items: center;
  width: 100%;
}
.hero-ads__title {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink);
  margin-block: var(--s-5);
}
.hero-ads__title em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.hero-ads__sub {
  font-size: 1.15rem;
  max-width: 52ch;
  line-height: 1.55;
  color: var(--mute);
}
.hero-ads__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}
.hero-ads__live-strip {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}
.hero-ads__live-stat { padding-left: var(--s-4); border-left: 1px solid var(--line); }
.hero-ads__live-stat:first-child { border-left: 0; padding-left: 0; }
.hero-ads__live-stat em {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: uppercase;
  font-style: normal;
}
.hero-ads__live-stat strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-ads__live-stat strong em { color: var(--orange); font-size: 0.85rem; margin-left: 4px; }

.hero-ads__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-ads__machine {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 1 / 0.84;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow:
    0 40px 80px -40px rgba(10, 22, 40, 0.22),
    0 12px 32px -16px rgba(10, 22, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  padding: var(--s-7);
}
.hero-ads__machine::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 26, 0.2) 50%, transparent);
}

/* =====================================================================
   ENGINE — Premium dashboard composition (replaces machine SVG)
   ===================================================================== */
.engine {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-5);
  font-family: var(--font-body);
}

/* Status bar */
.engine__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.engine__status-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}
.engine__status-left i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2DD881;
  position: relative;
  flex: none;
}
.engine__status-left i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #2DD881;
  opacity: 0;
  animation: pulseRing 1.8s ease-out infinite;
}
.engine__status-right {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
}

/* Hero row : Investissement → ROI */
.engine__hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) 0;
}
.engine__chip,
.engine__roi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.engine__chip em,
.engine__roi em {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  font-style: normal;
}
.engine__roi em { color: var(--orange); }
.engine__chip strong,
.engine__roi strong {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.engine__chip strong small {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--mute);
  margin-left: 2px;
}
.engine__roi {
  text-align: right;
  align-items: flex-end;
}
.engine__roi strong { color: var(--orange); }
.engine__roi-x {
  font-size: 0.7em;
  margin-right: 2px;
  font-weight: 500;
  color: var(--orange);
}

/* Flow connector between chip and ROI */
.engine__flow {
  position: relative;
  width: 80px;
  height: 28px;
}
.engine__flow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.engine__flow-line {
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.engine__flow-particle {
  fill: var(--orange);
  filter: drop-shadow(0 0 6px rgba(255, 107, 26, 0.5));
}
.engine__flow-arrow {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Channel rows */
.engine__channels {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.engine__channel {
  display: grid;
  grid-template-columns: 28px 1fr 110px 38px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.engine__channel:last-child { border-bottom: 0; }

.engine__logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--cream);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.engine__logo svg { width: 16px; height: 16px; }
/* Filled variant: branded backgrounds (Snapchat yellow / TikTok black) fill the chip edge-to-edge */
.engine__logo--filled { background: transparent; border: 0; padding: 0; }
.engine__logo--filled svg,
.engine__logo--filled img {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 7px;
}

.engine__name {
  font-size: 0.93rem;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.engine__bar {
  position: relative;
  height: 4px;
  background: var(--linen);
  border-radius: 2px;
  overflow: hidden;
}
.engine__bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #FF6B1A 0%, #FF8C42 100%);
  border-radius: 2px;
}
.engine__bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(2px);
}

.engine__pct {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: right;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Output bills */
.engine__output {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.engine__output-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.engine__output-head em {
  color: var(--mute);
  font-style: normal;
}
.engine__output-head strong {
  color: var(--orange);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.engine__bills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
}
.engine__bill {
  position: relative;
  aspect-ratio: 1.55 / 1;
  background: linear-gradient(135deg, #FF7A2E 0%, #E55A0F 100%);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(10, 22, 40, 0.1),
    0 6px 16px -6px rgba(255, 107, 26, 0.45);
  overflow: hidden;
  will-change: transform, opacity;
}
.engine__bill::before {
  content: "";
  position: absolute;
  top: -10%; right: -20%;
  width: 70%; height: 130%;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
  pointer-events: none;
  transform: skewX(-15deg);
}
.engine__bill::after {
  content: "";
  position: absolute;
  bottom: 4px; right: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.engine__bill em {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-style: normal;
  font-weight: 500;
}
.engine__bill strong {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (max-width: 980px) {
  .hero-ads__machine { aspect-ratio: 1 / 0.96; padding: var(--s-6); }
  .engine__channel { grid-template-columns: 24px 1fr 80px 32px; gap: var(--s-2); }
  .engine__bill { padding: 6px 8px; }
  .engine__bill em { font-size: 0.52rem; }
}
@media (max-width: 540px) {
  .engine__bills { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .engine__channel { padding: 8px 0; }
}
.hero-ads__badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(10, 22, 40, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: var(--white);
  box-shadow:
    0 22px 44px -16px rgba(10, 22, 40, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero-ads__badge strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.hero-ads__badge strong em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--orange);
  font-weight: 500;
  margin-left: 2px;
}
.hero-ads__badge-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
}
.hero-ads__badge--roas { top: 8%; left: -6%; animation: floatA 6s ease-in-out infinite; }
.hero-ads__badge--cpl { top: 50%; right: -8%; animation: floatB 7s ease-in-out infinite; }
.hero-ads__badge--leads { bottom: 6%; left: 10%; animation: floatA 8s ease-in-out infinite 1s; }
@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

@media (max-width: 980px) {
  .hero-ads__grid { grid-template-columns: 1fr; gap: var(--s-9); }
  .hero-ads__machine { max-width: 100%; }
  .hero-ads__badge { font-size: 0.85rem; padding: 8px 12px; }
  .hero-ads__badge strong { font-size: 1.2rem; }
  .hero-ads__badge--roas { top: 4%; left: 0%; }
  .hero-ads__badge--cpl  { top: 40%; right: 0%; }
  .hero-ads__badge--leads { bottom: 4%; left: 6%; }
}

/* =====================================================================
   PERSONAS GRID (Pour qui — illustrated split cards)
   ===================================================================== */
.personas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--white);
}
.persona {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--s-5);
  padding: var(--s-10) var(--s-9);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
  transition: background 0.5s var(--ease-out-expo);
}
.persona:nth-child(2n) { border-right: 0; }
.persona:nth-last-child(-n+2) { border-bottom: 0; }
.persona::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(540px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 26, 0.07) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: -1;
  pointer-events: none;
}
.persona:hover::before { opacity: 1; }
.persona__num {
  position: absolute;
  top: var(--s-7);
  right: var(--s-7);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--mute-soft);
}
.persona__copy { padding-right: var(--s-3); display: flex; flex-direction: column; }
.persona__copy h4 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.22;
  margin-bottom: var(--s-4);
}
.persona__copy h4 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.persona__copy p {
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.65;
}
.persona__tags {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.persona__tags span {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--orange-soft);
  border-radius: var(--r-pill);
}
.persona__viz {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.persona__viz svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 1000px) {
  .personas { grid-template-columns: 1fr; }
  .persona { border-right: 0; }
  .persona:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .persona:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .persona {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding: var(--s-6) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    background: var(--white);
  }
  .persona__viz {
    width: 180px;
    max-width: 180px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }
  .persona__viz svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .persona__copy h4 { font-size: 1.2rem; }
  .persona__copy p { font-size: 0.92rem; line-height: 1.55; }
  .persona__num { top: var(--s-4); right: var(--s-5); }
}

/* Persona viz — base styles (animations driven by GSAP attr animations on height/y) */
.viz-leads__pulse { transform-box: fill-box; transform-origin: center; }
.viz-burn__leak { transform-box: fill-box; transform-origin: center; }

/* =====================================================================
   FUNNEL LEAK (Bloc problème Ads — entonnoir qui fuit)
   ===================================================================== */
.leak-block {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: var(--s-12);
  align-items: center;
  margin-top: var(--s-10);
}
.leak-funnel {
  position: relative;
  aspect-ratio: 1 / 0.95;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--s-9);
  overflow: hidden;
  isolation: isolate;
}
.leak-funnel__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 107, 26, 0.08), transparent 60%);
  z-index: -1;
}
.leak-funnel svg { width: 100%; height: 100%; display: block; }
.leak-funnel__caption {
  position: absolute;
  bottom: var(--s-5);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: uppercase;
}
.leak-funnel__caption strong { color: var(--orange); }

.leak-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.leak-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease-out-expo);
}
.leak-item:hover { padding-left: var(--s-4); }
.leak-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
  transition: width 0.4s var(--ease-out-expo);
}
.leak-item:hover::before { width: 3px; }
.leak-item__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.leak-item__txt {
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 500;
}
.leak-item__loss {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mute);
  letter-spacing: 0.06em;
}
.leak-item__loss strong { color: var(--orange-deep); }
.leak-page { display: contents; } /* default: items flow inline with their parent's column */

@media (max-width: 880px) {
  .leak-block { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Mobile: convert leak-list into a 2-page horizontal slider (4 items per page) */
  .leak-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-x);
    gap: var(--s-6);
    padding-inline: var(--container-x);
    padding-block: 12px;
    margin-inline: calc(var(--container-x) * -1);
    margin-top: var(--s-6);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-top: 0;
  }
  .leak-list::-webkit-scrollbar { display: none; }
  .leak-page {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 86vw;
    max-width: 380px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-top: 1px solid var(--line);
  }
  .leak-item {
    padding: var(--s-4) 0;
    grid-template-columns: 32px 1fr;
    gap: var(--s-3);
  }
  .leak-item__loss { display: none; }
  .leak-item__txt { font-size: 0.95rem; }
}

/* =====================================================================
   ORBIT (Plateformes Ads — constellation autour du business)
   ===================================================================== */
.orbit-block {
  margin-top: var(--s-12);
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 720px;
  background: var(--ink);
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
}
.orbit-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(450px circle at 50% 50%, rgba(255, 107, 26, 0.18), transparent 55%),
    radial-gradient(380px circle at 12% 22%, rgba(255, 180, 100, 0.08), transparent 60%);
  z-index: -1;
}
.orbit-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
}
.orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orbit-ring { animation: orbitSpin var(--orbit-d, 30s) linear infinite; transform-origin: center; transform-box: fill-box; }
.orbit-ring--reverse { animation-direction: reverse; }
@keyframes orbitSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.orbit-planet {
  position: absolute;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 18px 36px -16px rgba(255, 107, 26, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.5s var(--ease-out-expo);
  overflow: hidden;
}
.orbit-planet:hover { transform: scale(1.08); }
.orbit-planet svg { width: 38px; height: 38px; }
.orbit-planet__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.orbit-planet--meta { top: 12%; left: 14%; }
.orbit-planet--google { top: 18%; right: 16%; }
.orbit-planet--tiktok { bottom: 18%; left: 18%; }
.orbit-planet--snap { bottom: 12%; right: 14%; }
.orbit-planet--yt { top: 50%; right: 8%; transform: translateY(-50%); width: 64px; height: 64px; }
.orbit-planet--yt svg { width: 28px; height: 28px; }
.orbit-planet--yt:hover { transform: translateY(-50%) scale(1.08); }

.orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow:
    0 30px 60px -20px rgba(255, 107, 26, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
}
.orbit-core::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  animation: orbitSpin 18s linear infinite;
}
.orbit-core::after {
  content: "";
  position: absolute;
  inset: -36px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  animation: orbitSpin 30s linear infinite reverse;
}
.orbit-core strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.orbit-core span {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.orbit-stats {
  position: absolute;
  bottom: var(--s-9);
  left: var(--s-9);
  right: var(--s-9);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
}
.orbit-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.orbit-stat em {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
}
.orbit-stat strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.orbit-stat strong em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--orange);
  font-weight: 500;
  margin-left: 4px;
}

@media (max-width: 800px) {
  .orbit-block { aspect-ratio: 1 / 1; }
  .orbit-planet { width: 64px; height: 64px; }
  .orbit-planet svg { width: 28px; height: 28px; }
  .orbit-core { width: 140px; height: 140px; }
  .orbit-core strong { font-size: 1.2rem; }
  .orbit-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}

/* =====================================================================
   PROCESS RAIL (Approche — sticky horizontal scroll)
   ===================================================================== */
.process-section {
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px circle at 80% 20%, rgba(255, 107, 26, 0.15), transparent 50%),
    radial-gradient(400px circle at 10% 80%, rgba(255, 180, 100, 0.06), transparent 60%);
  z-index: 0;
}
.process-pin {
  position: relative;
  z-index: 1;
  height: 100vh;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  padding-top: 120px;
}
.process-pin .container { width: 100%; }
.process-pin__head {
  margin-bottom: var(--s-10);
}
.process-pin__head h2 { color: var(--white); }
.process-pin__head h2 em { color: var(--orange); font-style: italic; font-family: 'Cabinet Grotesk', serif; }
.process-pin__head p { color: rgba(255, 255, 255, 0.6); margin-top: var(--s-3); max-width: 60ch; }
.process-track {
  display: flex;
  gap: var(--s-7);
  padding: 0 var(--container-x);
  flex: 1;
  align-items: center;
}
.process-card {
  flex: none;
  width: 520px;
  height: 76%;
  max-height: 540px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-2xl);
  padding: var(--s-9);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--s-5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.process-card::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.18), transparent 70%);
  z-index: -1;
}
.process-card__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--orange);
}
.process-card__num strong { color: var(--white); margin-right: var(--s-2); }
.process-card__viz {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-card__viz svg {
  width: 100%;
  height: 100%;
  max-width: 320px;
  max-height: 260px;
  display: block;
  margin: auto;
}
@media (max-width: 760px) {
  .process-card__viz svg { max-width: 280px; max-height: 220px; }
}
.process-card__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--white);
  line-height: 1.2;
}
.process-card__title em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.process-card__desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.65;
}
.process-progress {
  display: flex;
  gap: 6px;
  padding: 0 var(--container-x);
  margin-top: var(--s-7);
  margin-bottom: var(--s-8);
}
.process-progress span {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.process-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.process-progress span.is-active::after { transform: scaleX(1); }
/* Tablet (641–1023px): vertical stack — pin-scrub unreliable on touch tablets */
@media (max-width: 1023px) and (min-width: 641px) {
  .process-pin { height: auto; min-height: 0; padding-bottom: var(--s-12); }
  .process-track { flex-direction: column; padding-bottom: var(--s-9); }
  .process-card { width: 100%; max-width: 600px; height: auto; }
}
/* Mobile (≤640px): keep desktop horizontal pin-scroll, just resize the cards */
@media (max-width: 640px) {
  .process-pin { padding-top: clamp(80px, 12vh, 120px); padding-bottom: 0; min-height: 0; }
  .process-pin__head { margin-bottom: var(--s-6); }
  .process-pin__head h2 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .process-pin__head p { font-size: 0.95rem !important; }
  .process-track { gap: var(--s-4); align-items: stretch; }
  .process-card {
    width: 86vw;
    max-width: 380px;
    height: auto;
    max-height: none;
    min-height: 440px;
    padding: var(--s-6);
    gap: var(--s-4);
  }
  .process-card__viz svg { max-width: 220px; max-height: 200px; }
  .process-card__title { font-size: 1.35rem; }
  .process-card__desc { font-size: 0.92rem; line-height: 1.5; }
  .process-progress { margin-top: var(--s-5); margin-bottom: var(--s-6); }
}

/* =====================================================================
   BEFORE / AFTER (Résultats Ads + Bénéfices SaaS)
   ===================================================================== */
.beforeafter {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: var(--s-10);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--white);
  overflow: hidden;
}
.beforeafter__col { padding: var(--s-12) var(--s-10); }
.beforeafter__col--before { background: var(--linen); position: relative; }
.beforeafter__col--before::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(10, 22, 40, 0.025) 8px 9px);
  pointer-events: none;
}
.beforeafter__divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.beforeafter__divider::before,
.beforeafter__divider::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 1px;
  background: var(--line);
}
.beforeafter__divider::before { top: 0; bottom: calc(50% + 24px); }
.beforeafter__divider::after { top: calc(50% + 24px); bottom: 0; }
.beforeafter__arrow {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 14px 30px -12px rgba(255, 107, 26, 0.65);
  z-index: 1;
  position: relative;
}
.beforeafter__arrow::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 107, 26, 0.4);
}
.beforeafter__head {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s-7);
}
.beforeafter__head--before { color: var(--mute); }
.beforeafter__head--after { color: var(--orange); }
.beforeafter__head--after::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-right: var(--s-2);
  vertical-align: middle;
}
.beforeafter__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.beforeafter__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-4);
  align-items: flex-start;
  font-size: 1.04rem;
  line-height: 1.55;
}
.beforeafter__item--before { color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(82, 82, 91, 0.4); }
.beforeafter__item--before svg { color: rgba(82, 82, 91, 0.55); margin-top: 4px; flex: none; }
.beforeafter__item--after { color: var(--ink); }
.beforeafter__item--after svg { color: var(--orange); margin-top: 4px; flex: none; }
.beforeafter__item strong { color: var(--orange); font-weight: 600; }
@media (max-width: 800px) {
  .beforeafter { grid-template-columns: 1fr; }
  .beforeafter__divider { padding: var(--s-5) 0; }
  .beforeafter__divider::before, .beforeafter__divider::after { display: none; }
  .beforeafter__arrow { transform: rotate(90deg); }
}

/* =====================================================================
   ADS — LEVER LANES (Bloc 7) — 3 thematic lanes (Acquisition / Créa
   / Conversion). Each lane has a sticky category label on the left
   and a horizontal scrolling marquee of pills on the right.
   ===================================================================== */
.lever-lanes {
  margin-top: var(--s-9);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.lever-lane {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--line);
  min-height: 84px;
}
.lever-lane:last-child { border-bottom: 0; }
.lever-lane__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-7);
  border-right: 1px solid var(--line);
  background: var(--cream);
  height: 100%;
}
.lever-lane__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.18);
  flex-shrink: 0;
}
.lever-lane__cat {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lever-lane__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.lever-lane__track-wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}
.lever-lane__track-wrap::before,
.lever-lane__track-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.lever-lane__track-wrap::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.lever-lane__track-wrap::after { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }
.lever-lane__track {
  display: flex;
  gap: var(--s-3);
  white-space: nowrap;
  animation: leverLaneScroll 50s linear infinite;
  will-change: transform;
  padding-left: var(--s-5);
}
.lever-lane__track--reverse { animation: leverLaneScrollReverse 38s linear infinite; }
.lever-lane[data-lane="conversion"] .lever-lane__track { animation-duration: 65s; }
@keyframes leverLaneScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes leverLaneScrollReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lever-lane__track { animation: none; }
}
@media (max-width: 760px) {
  .lever-lane { grid-template-columns: 1fr; min-height: 0; }
  .lever-lane__label { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-4) var(--s-5); }
  .lever-lane__track-wrap { padding: var(--s-4) 0; }
  .lever-lane__track { padding-left: var(--s-4); }
}

/* =====================================================================
   ADS — LEVER CONSOLE (legacy — kept for reduced-motion fallback only)
   ===================================================================== */
.lever-console {
  margin-top: var(--s-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-7) var(--s-8);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.lever-console__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-9);
  flex-wrap: wrap;
}
.lever-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.lever-switch__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.4s;
}
.lever-switch.is-on .lever-switch__label { color: var(--orange); }
.lever-switch__svg {
  width: 60px;
  height: 30px;
  display: block;
}
.lever-console__gauge {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}
.lever-console__gauge-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.lever-console__gauge-bar {
  height: 6px;
  background: rgba(255, 107, 26, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.lever-console__gauge-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange), #E55A0F);
  border-radius: 3px;
}
.lever-console__gauge-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--orange);
  letter-spacing: -0.02em;
  min-width: 38px;
  text-align: right;
}
.lever-console__gauge-unit {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--orange);
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .lever-console__row { gap: var(--s-5); }
  .lever-console__gauge { grid-template-columns: 1fr auto auto; gap: var(--s-2); }
  .lever-console__gauge-label { grid-column: 1 / -1; }
}

/* =====================================================================
   LEVERS MARQUEE (Bloc 7 Ads — leviers dans une bande infinie)
   ===================================================================== */
.levers-marquee {
  margin-top: var(--s-10);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-7) 0;
  overflow: hidden;
  position: relative;
  background: var(--white);
}
.levers-marquee + .levers-marquee {
  border-top: 0;
}
.levers-marquee::before,
.levers-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.levers-marquee::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.levers-marquee::after { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }
.levers-marquee.bg-cream-mq::before { background: linear-gradient(90deg, var(--cream), transparent); }
.levers-marquee.bg-cream-mq::after { background: linear-gradient(-90deg, var(--cream), transparent); }
.levers-marquee__track {
  display: flex;
  gap: var(--s-6);
  animation: leversMarquee 60s linear infinite;
  width: max-content;
}
.levers-marquee__track--reverse { animation: leversMarqueeReverse 50s linear infinite; }
.levers-marquee:hover .levers-marquee__track { animation-play-state: paused; }
.lever-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
  background: var(--white);
  transition: all 0.4s var(--ease-out-expo);
}
.lever-pill em {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--orange);
  font-style: normal;
  text-transform: uppercase;
}
.lever-pill svg { color: var(--orange); flex: none; }
.lever-pill:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.lever-pill:hover em { color: var(--orange); }
@keyframes leversMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes leversMarqueeReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (max-width: 640px) {
  .levers-marquee { padding: var(--s-5) 0; margin-top: var(--s-6); }
  .levers-marquee::before, .levers-marquee::after { width: 56px; }
  .levers-marquee__track { gap: var(--s-4); animation-duration: 40s; }
  .levers-marquee__track--reverse { animation-duration: 36s; }
  .lever-pill { padding: 10px 18px; font-size: 0.88rem; gap: var(--s-2); }
  .lever-pill em { font-size: 0.62rem; }
}

/* =====================================================================
   ANTIFIT BAND (dark "ce qu'on ne fait pas")
   ===================================================================== */
.antifit {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-2xl);
  padding: var(--s-16, 64px) var(--s-12);
  margin-top: var(--s-10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.antifit::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px circle at 90% 10%, rgba(255, 107, 26, 0.18), transparent 55%),
    radial-gradient(400px circle at 5% 90%, rgba(255, 180, 100, 0.1), transparent 60%);
  z-index: -1;
}
.antifit__head .eyebrow-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.antifit h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-top: var(--s-4);
}
.antifit h2 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.antifit__lead {
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--s-4);
  max-width: 50ch;
  font-size: 1.02rem;
  line-height: 1.55;
}
.antifit__list {
  display: flex;
  flex-direction: column;
}
.antifit__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: var(--s-4);
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
  line-height: 1.55;
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.antifit__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.antifit__cross {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 107, 26, 0.15);
  border: 1px solid rgba(255, 107, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex: none;
}
.antifit__cross svg { width: 14px; height: 14px; }
@media (max-width: 880px) {
  .antifit { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-9) var(--s-6); }
}

/* =====================================================================
   PROMISE CARDS (Réassurance)
   ===================================================================== */
.promises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--s-10);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.promise {
  padding: var(--s-10) var(--s-7);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.4s var(--ease-out-expo);
}
.promise:first-child { border-left: 0; }
.promise:hover { background: rgba(255, 107, 26, 0.04); }
.promise__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.promise__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 107, 26, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  transition: background 0.3s, transform 0.3s var(--ease-out-expo);
}
.promise__icon svg { width: 24px; height: 24px; display: block; overflow: visible; }
.promise:hover .promise__icon { background: rgba(255, 107, 26, 0.18); transform: scale(1.06); }
.promise h4 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.28;
  margin-top: var(--s-2);
}
.promise p {
  font-size: 0.96rem;
  color: var(--mute);
  line-height: 1.6;
}
@media (max-width: 1024px) and (min-width: 641px) {
  .promises { grid-template-columns: repeat(2, 1fr); }
  .promise:nth-child(odd) { border-left: 0; }
}
@media (max-width: 640px) {
  .promises { margin-top: var(--s-6); border-top: 0 !important; border-bottom: 0 !important; }
  .promise {
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    background: var(--white);
    padding: var(--s-6) var(--s-5);
  }
  .promise:first-child { border-left: 1px solid var(--line); }
  .promise h4 { font-size: 1.1rem; }
}

/* =====================================================================
   DARK CTA CLOSING
   ===================================================================== */
.darkcta {
  margin-top: var(--s-7);
  padding: var(--s-16, 64px) var(--s-12);
  background: var(--ink);
  border-radius: var(--r-2xl);
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.darkcta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px circle at 85% 10%, rgba(255, 107, 26, 0.32), transparent 55%);
  z-index: -1;
}
.darkcta__layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--s-12);
  align-items: center;
}
.darkcta__copy { min-width: 0; }
.darkcta h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--white);
}
.darkcta h2 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.darkcta p {
  margin-top: var(--s-4);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  max-width: 56ch;
}
.darkcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.darkcta__stage {
  position: relative;
  aspect-ratio: 5 / 4;
  min-height: 320px;
  width: 100%;
}
.darkcta__browser {
  position: absolute;
  top: 4%;
  left: 0;
  width: 88%;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}
.darkcta__browser svg { display: block; width: 100%; height: auto; }
.darkcta__phone {
  position: absolute;
  bottom: 0;
  right: 4%;
  width: 28%;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
  border-radius: 18px;
  overflow: hidden;
  z-index: 3;
}
.darkcta__phone svg { display: block; width: 100%; height: auto; }
.darkcta__metric {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 132px;
  z-index: 4;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.4));
}
.darkcta__metric-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}
.darkcta__metric-value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.darkcta__metric svg { width: 60px; height: 18px; margin-top: 2px; }
.darkcta__metric--1 { top: -8px; right: -2%; }
.darkcta__metric--2 { bottom: 18%; left: -4%; }
.darkcta__line {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.darkcta__line i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2DD881;
  position: relative;
}
.darkcta__line i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #2DD881;
  opacity: 0;
  animation: pulseRing 2s ease-out infinite;
}
.darkcta .btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.darkcta .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 980px) {
  .darkcta__layout { grid-template-columns: 1fr; gap: var(--s-9); }
  .darkcta__stage { min-height: 280px; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 800px) {
  .darkcta { padding: var(--s-9) var(--s-6); }
  .darkcta__metric--1 { top: -4px; right: 4%; }
  .darkcta__metric--2 { bottom: 12%; left: 4%; }
  .darkcta__metric { min-width: 110px; padding: 8px 12px; }
  .darkcta__metric-value { font-size: 1.2rem; }
}
@media (max-width: 540px) {
  .darkcta__stage { display: none; }
}

/* =====================================================================
   FORM PREMIUM — single-step compact editorial layout
   ===================================================================== */
.formx {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--s-9);
  margin-top: var(--s-10);
  box-shadow: 0 40px 80px -36px rgba(10, 22, 40, 0.16);
  position: relative;
  overflow: hidden;
}
.formx::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange) 0%, #FF8E4D 50%, var(--orange) 100%);
  z-index: 2;
}
.formx__pattern {
  position: absolute;
  top: -200px; right: -200px;
  width: 460px; height: 460px;
  border-radius: 50%;
  border: 1.5px dashed var(--orange-soft);
  pointer-events: none;
  animation: orbitSpin 60s linear infinite;
  opacity: 0.45;
}
.formx__pattern::after {
  content: "";
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 107, 26, 0.12);
}
.formx__layout {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  position: relative;
  z-index: 1;
}
.formx__head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-9);
  align-items: stretch;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}
.formx__intro {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.formx__intro h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.65rem, 2.6vw, 2.05rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.formx__intro h3 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.formx__intro p {
  color: var(--mute);
  line-height: 1.6;
  max-width: 50ch;
  margin: 0;
}
.formx__quickfacts {
  list-style: none;
  margin: 0;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: linear-gradient(180deg, rgba(255, 107, 26, 0.05) 0%, rgba(255, 107, 26, 0.02) 100%);
  border: 1px solid rgba(255, 107, 26, 0.18);
  border-radius: var(--r-xl);
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 380px;
}
.formx__quickfacts li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.4;
}
.formx__quickfacts > li > svg {
  width: 18px; height: 18px;
  color: var(--orange);
  flex-shrink: 0;
}
/* Detailed variant — used on ADS form (icon + bold title + sub-text) */
.formx__quickfacts--detailed {
  gap: var(--s-4);
}
.formx__quickfacts--detailed li {
  align-items: flex-start;
  gap: var(--s-3);
}
.formx__quickfacts-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid rgba(255, 107, 26, 0.22);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.formx__quickfacts-icon svg { width: 18px; height: 18px; }
.formx__quickfacts--detailed li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.formx__quickfacts--detailed li strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--ink);
}
.formx__quickfacts--detailed li span {
  font-size: 0.84rem;
  color: var(--mute);
  line-height: 1.4;
}
.formx__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #15803d;
  align-self: flex-start;
}
.formx__status i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
  flex-shrink: 0;
}
.formx__status i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #22c55e;
  opacity: 0;
  animation: pulseRing 2s ease-out infinite;
}
.formx__alt-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--mute);
  text-decoration: none;
  margin-top: var(--s-2);
  align-self: flex-start;
  transition: color 0.3s;
}
.formx__alt-link svg {
  transition: transform 0.3s var(--ease-out-expo);
}
.formx__alt-link:hover {
  color: var(--orange);
}
.formx__alt-link:hover svg {
  transform: translate(2px, -2px);
}
.formx__form { display: flex; flex-direction: column; gap: var(--s-6); position: relative; z-index: 1; }
.formx__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-2);
}
.formx__group-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-1);
}
.formx__group-label em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--orange);
  font-weight: 700;
}
.formx__group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}
.formx__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.formx__row--3 { grid-template-columns: repeat(3, 1fr); }
.formx__row--2 { grid-template-columns: repeat(2, 1fr); }
.formx__row--full { grid-template-columns: 1fr; }
.formx__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.formx__field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  transition: color 0.3s;
}
.formx__field input,
.formx__field select,
.formx__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  background: var(--white);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  appearance: none;
  -webkit-appearance: none;
}
.formx__field input::placeholder,
.formx__field textarea::placeholder {
  color: rgba(82, 82, 91, 0.45);
  font-weight: 400;
}
.formx__field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.formx__field--select { position: relative; }
.formx__field--select::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 22px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
  transition: border-color 0.25s;
}
.formx__field select { padding-right: 42px; cursor: pointer; }
.formx__field input:hover,
.formx__field select:hover,
.formx__field textarea:hover { border-color: rgba(255, 107, 26, 0.4); }
.formx__field input:focus,
.formx__field select:focus,
.formx__field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.12);
}
.formx__field:focus-within label { color: var(--orange); }
.formx__field--select:focus-within::after { border-color: var(--orange); }
.formx__submit-bar {
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  margin: var(--s-7) calc(var(--s-9) * -1) calc(var(--s-9) * -1);
  padding: var(--s-5) var(--s-9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  position: relative;
  isolation: isolate;
}
.formx__submit-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 90% 50%, rgba(255, 107, 26, 0.22), transparent 60%);
  z-index: -1;
  border-radius: inherit;
}
.formx__submit-bar .btn--primary {
  box-shadow: 0 18px 30px -10px rgba(255, 107, 26, 0.45);
}
.formx__hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.formx__hint i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2DD881;
  display: inline-block;
  flex: none;
  position: relative;
}
.formx__hint i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #2DD881;
  opacity: 0;
  animation: pulseRing 2s ease-out infinite;
}
@media (max-width: 1100px) {
  .formx__row,
  .formx__row--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .formx { padding: var(--s-7); }
  .formx__head { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; padding-bottom: var(--s-5); }
  .formx__quickfacts { justify-self: start; max-width: 100%; }
  .formx__pattern { width: 280px; height: 280px; top: -120px; right: -120px; }
  .formx__submit-bar { margin: var(--s-7) calc(var(--s-7) * -1) calc(var(--s-7) * -1); padding: var(--s-5) var(--s-7); }
}
@media (max-width: 700px) {
  .formx__row,
  .formx__row--2,
  .formx__row--3 { grid-template-columns: 1fr; }
  .formx__submit-bar { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .formx__submit-bar .btn { width: 100%; justify-content: center; }
}

/* --- Formspree : retour succès / erreur --- */
.formx__feedback {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg, 12px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.formx__feedback.is-pending {
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 107, 26, 0.25);
  color: #b1490a;
}
.formx__feedback.is-success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #15803d;
}
.formx__feedback.is-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #b91c1c;
}
.formx__form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* =====================================================================
   RÉALISATIONS — Hero éditorial 3D collage
   ===================================================================== */
.hero-cases {
  position: relative;
  min-height: 92dvh;
  padding-top: 140px;
  padding-bottom: var(--s-12);
  display: flex;
  align-items: center;
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero-cases::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 22, 40, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 22, 40, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
}
.hero-cases__halo {
  position: absolute;
  width: 800px;
  height: 800px;
  right: -200px;
  top: -300px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.18) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
}
.hero-cases__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10);
  align-items: center;
  width: 100%;
}
.hero-cases__copy { max-width: 560px; }
.hero-cases__title {
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  letter-spacing: -0.035em;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-block: var(--s-5);
}
.hero-cases__title em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.hero-cases__sub {
  max-width: 50ch;
  font-size: 1.14rem;
  color: var(--mute);
  line-height: 1.55;
}
.hero-cases__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }

/* ============== HERO RÉALISATIONS — Stack composition curée ==============
   Différent du hero accueil (galerie scroll 3 cols).
   4 mockups device : 2 laptops site + 2 phones vidéo ads, layered en 3D. */
.cases-stack {
  position: relative;
  aspect-ratio: 1 / 0.95;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.cases-mock {
  position: absolute;
  display: block;
  background: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -22px rgba(10, 22, 40, 0.42),
    0 12px 28px -10px rgba(10, 22, 40, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.5s;
  will-change: transform;
}
.cases-mock__screen {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--linen);
}
.cases-mock__screen img,
.cases-mock__screen video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cases-mock__screen img { object-position: top center; }

/* Laptop variant : bar with traffic-light dots + URL */
.cases-mock--laptop {
  border-radius: 14px;
}
.cases-mock--laptop .cases-mock__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: clamp(20px, 2.2cqw, 28px);
  padding: 0 10px;
  background: #f5f4f1;
  border-bottom: 1px solid var(--line);
}
.cases-mock--laptop .cases-mock__bar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
}
.cases-mock--laptop .cases-mock__bar i:nth-child(1) { background: #FF5F57; }
.cases-mock--laptop .cases-mock__bar i:nth-child(2) { background: #FEBC2E; }
.cases-mock--laptop .cases-mock__bar i:nth-child(3) { background: #28C840; }
.cases-mock--laptop .cases-mock__url {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--mute);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 2px 12px;
  border-radius: 999px;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cases-mock--laptop .cases-mock__screen {
  aspect-ratio: 16 / 10;
}

/* Video card variant : simple card 9/16 sans encoche, juste un rounded frame */
.cases-mock--video {
  border-radius: 18px;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}
.cases-mock--video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cases-mock--video .cases-mock__play {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.45);
}
.cases-mock--video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0) 55%, rgba(10, 22, 40, 0.35) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Positions composition layered */
.cases-mock--a {
  /* Laptop Enrobé — gros, arrière-plan haut gauche */
  width: 64%;
  top: 4%;
  left: 0;
  transform: rotate(-3.5deg);
  z-index: 2;
}
.cases-mock--b {
  /* Phone big — milieu droite, dominant */
  width: 28%;
  top: 8%;
  right: 4%;
  transform: rotate(4deg);
  z-index: 4;
}
.cases-mock--c {
  /* Laptop Forum Éco — bas gauche, premier plan */
  width: 58%;
  bottom: 4%;
  left: 8%;
  transform: rotate(2.5deg);
  z-index: 3;
}
.cases-mock--d {
  /* Phone small — bas droite, accent */
  width: 22%;
  bottom: 0;
  right: 0;
  transform: rotate(-2deg);
  z-index: 5;
}

/* Hover : la card s'aligne et monte */
.cases-mock:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  z-index: 6;
  box-shadow:
    0 50px 100px -32px rgba(10, 22, 40, 0.5),
    0 22px 48px -14px rgba(255, 107, 26, 0.28);
}

/* Float subtil au repos pour donner de la vie */
.cases-mock--a:not(:hover) { animation: stackFloatA 9s ease-in-out infinite; }
.cases-mock--b:not(:hover) { animation: stackFloatB 7s ease-in-out infinite 0.5s; }
.cases-mock--c:not(:hover) { animation: stackFloatA 10s ease-in-out infinite 1.5s; }
.cases-mock--d:not(:hover) { animation: stackFloatB 8s ease-in-out infinite 0.2s; }
@keyframes stackFloatA {
  0%, 100% { transform: rotate(var(--rot, -3.5deg)) translateY(0); }
  50%      { transform: rotate(var(--rot, -3.5deg)) translateY(-6px); }
}
@keyframes stackFloatB {
  0%, 100% { transform: rotate(var(--rot, 4deg)) translateY(0); }
  50%      { transform: rotate(var(--rot, 4deg)) translateY(6px); }
}
.cases-mock--a { --rot: -3.5deg; }
.cases-mock--b { --rot: 4deg; }
.cases-mock--c { --rot: 2.5deg; }
.cases-mock--d { --rot: -2deg; }

@media (max-width: 640px) {
  .cases-stack { aspect-ratio: 1 / 1; }
  .cases-mock--a { width: 70%; top: 0; left: 0; }
  .cases-mock--b { width: 32%; top: 2%; right: 0; }
  .cases-mock--c { width: 64%; bottom: 0; left: 4%; }
  .cases-mock--d { width: 24%; bottom: 2%; right: -2%; }
}

/* Old mosaic CSS kept commented for reference (deprecated) */
.cases-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  perspective: 1200px;
  padding: clamp(8px, 1vw, 16px);
}
.cases-mosaic__card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px -16px rgba(10, 22, 40, 0.25);
  isolation: isolate;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.4s;
  will-change: transform;
}
.cases-mosaic__card--site { aspect-ratio: 16 / 11; }
.cases-mosaic__card--video { aspect-ratio: 9 / 14; }
.cases-mosaic__card img,
.cases-mosaic__card video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cases-mosaic__card img { object-position: top center; }
.cases-mosaic__card--video::after {
  content: "▶";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 9px;
  line-height: 26px;
  text-align: center;
  z-index: 3;
  box-shadow: 0 4px 12px -2px rgba(255, 107, 26, 0.55);
}
.cases-mosaic__card--video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0) 60%, rgba(10, 22, 40, 0.35) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Tilts individuels — chaque card a sa propre rotation pour un feel moodboard */
.cases-mosaic__card:nth-child(1)  { transform: rotate(-2.5deg) translateY(2px); }
.cases-mosaic__card:nth-child(2)  { transform: rotate(1.8deg) translateY(-4px); }
.cases-mosaic__card:nth-child(3)  { transform: rotate(-1.2deg) translateY(3px); }
.cases-mosaic__card:nth-child(4)  { transform: rotate(2.2deg) translateY(-2px); }
.cases-mosaic__card:nth-child(5)  { transform: rotate(2deg) translateY(-3px); }
.cases-mosaic__card:nth-child(6)  { transform: rotate(-1.5deg) translateY(2px); }
.cases-mosaic__card:nth-child(7)  { transform: rotate(1deg) translateY(4px); }
.cases-mosaic__card:nth-child(8)  { transform: rotate(-2deg) translateY(-2px); }
.cases-mosaic__card:nth-child(9)  { transform: rotate(-1.8deg) translateY(3px); }
.cases-mosaic__card:nth-child(10) { transform: rotate(1.5deg) translateY(-2px); }
.cases-mosaic__card:nth-child(11) { transform: rotate(-1deg) translateY(4px); }
.cases-mosaic__card:nth-child(12) { transform: rotate(2.5deg) translateY(-3px); }
/* Hover : remonte légèrement + retire le tilt */
.cases-mosaic__card:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.04);
  box-shadow: 0 30px 60px -18px rgba(10, 22, 40, 0.35), 0 12px 28px -10px rgba(255, 107, 26, 0.2);
  z-index: 5;
}
/* Petite respiration au repos (float subtil) */
.cases-mosaic__card:not(:hover) { animation: mosaicFloat 8s ease-in-out infinite; }
.cases-mosaic__card:nth-child(2n) { animation-delay: 1.5s; animation-duration: 9s; }
.cases-mosaic__card:nth-child(3n) { animation-delay: 0.8s; animation-duration: 10s; }
@keyframes mosaicFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}
@media (max-width: 1024px) {
  .cases-mosaic { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cases-mosaic { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cases-mosaic__card { border-radius: var(--r-md); }
}

/* Legacy collage (kept for backward compat but unused) */
.collage {
  position: relative;
  aspect-ratio: 1 / 0.95;
  perspective: 1200px;
}
.collage__card {
  position: absolute;
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: 0 30px 60px -25px rgba(10, 22, 40, 0.28);
  overflow: hidden;
  border: 1px solid var(--line);
  will-change: transform;
}
.collage__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* All hero screenshots share the 16:10 (1200x750) browser ratio — cards use the same
   aspect so screenshots fit without cropping. Cards arranged in a tight 2×2 cluster
   with a ~12% overlap so they "touch" but every preview stays fully readable. */
.collage__card { aspect-ratio: 16 / 10; }
.collage__card img { object-fit: contain; background: var(--white); }
.collage__card--a { width: 60%; top: 4%;  left: 2%;  transform: rotate(-4deg); z-index: 2; }
.collage__card--b { width: 60%; top: 10%; right: 2%; transform: rotate(4deg);  z-index: 3; }
.collage__card--c { width: 60%; bottom: 6%; left: 2%; transform: rotate(3deg);  z-index: 4; }
.collage__card--d { width: 60%; bottom: 0%; right: 2%; transform: rotate(-3deg); z-index: 5; }
.collage__sticker {
  position: absolute;
  bottom: 8%;
  right: 10%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 22px 44px -16px rgba(255, 107, 26, 0.55);
  z-index: 6;
  font-family: 'Cabinet Grotesk', serif;
  transform: rotate(-12deg);
  animation: collageStickerSpin 28s linear infinite;
}
.collage__sticker strong {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.collage__sticker span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.9;
}
/* Per-card float keyframes — each card keeps its own resting rotation matching its
   inline transform so the deck stays balanced when the animation cycles. */
.collage__card--a { animation: collageFloatA1 9s ease-in-out infinite; }
.collage__card--b { animation: collageFloatB1 11s ease-in-out infinite 1s; }
.collage__card--c { animation: collageFloatA2 10s ease-in-out infinite 2s; }
.collage__card--d { animation: collageFloatB2 8s ease-in-out infinite 0.5s; }
@keyframes collageFloatA1 {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-8px); }
}
@keyframes collageFloatB1 {
  0%, 100% { transform: rotate(4deg)  translateY(0); }
  50%      { transform: rotate(6deg)  translateY(8px); }
}
@keyframes collageFloatA2 {
  0%, 100% { transform: rotate(3deg)  translateY(0); }
  50%      { transform: rotate(1deg)  translateY(-7px); }
}
@keyframes collageFloatB2 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(7px); }
}
@keyframes collageStickerSpin {
  from { transform: rotate(-12deg); }
  to { transform: rotate(348deg); }
}
@media (max-width: 1024px) and (min-width: 641px) {
  .hero-cases__layout { grid-template-columns: 1fr; gap: var(--s-9); }
  .hero-cases__copy { order: 2; }
  .collage,
  .cases-stack { order: 1; width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hero-cases__layout { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-cases__copy { order: 2; }
  .collage {
    order: 1;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }
  .cases-stack { order: 1; width: 100%; max-width: 400px; margin: 0 auto; }
  .collage__card { border-radius: var(--r-md); box-shadow: 0 18px 36px -18px rgba(10, 22, 40, 0.28); }
  .collage__sticker { width: 90px; height: 90px; right: 4%; bottom: 4%; }
  .collage__sticker strong { font-size: 1.1rem; }
  .collage__sticker span { font-size: 0.52rem; margin-top: 2px; }
}

/* Hero stats strip */
.hero-cases__strip {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s-8);
}
.hero-cases__stat {
  padding-left: var(--s-4);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-cases__stat:first-child { border-left: 0; padding-left: 0; }
.hero-cases__stat em {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  text-transform: uppercase;
  font-style: normal;
}
.hero-cases__stat strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-cases__stat span {
  font-size: 0.86rem;
  color: var(--mute);
}

/* =====================================================================
   PROJECT BENTO (Réalisations — adapté avec hover spotlight)
   ===================================================================== */
.cat-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-7);
}
.cat-band__num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(10, 22, 40, 0.08);
  font-variant-numeric: tabular-nums;
}
.cat-band__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-band__heading em {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  text-transform: uppercase;
  font-style: normal;
}
.cat-band__heading h3 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  font-weight: 700;
  max-width: 720px;
}
.cat-band__heading h3 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
  font-size: inherit;
  letter-spacing: inherit;
}
.cat-band__count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Project bento — each card shows the full 16:10 hero screenshot at the top with a
   meta panel below. Cards alternate sizes for a visual rhythm without cropping the previews. */
.proj-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6);
}
.proj {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.55s var(--ease-out-expo), box-shadow 0.55s, border-color 0.4s;
  text-decoration: none;
  color: inherit;
}
.proj:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 26, 0.32);
  box-shadow: 0 30px 50px -28px rgba(10, 22, 40, 0.32);
}
.proj__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream), var(--linen));
  border-bottom: 1px solid var(--line);
}
.proj__shot img,
.proj__shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s var(--ease-out-expo);
}
.proj:hover .proj__shot img, .proj:hover .proj__shot video { transform: scale(1.04); }
.proj__head {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  right: var(--s-4);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.proj__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px -6px rgba(10, 22, 40, 0.18);
}
.proj__cat i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.proj__chevron {
  width: 38px; height: 38px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  opacity: 0;
  transform: translate(-4px, -4px);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo), background 0.3s;
}
.proj:hover .proj__chevron { opacity: 1; transform: translate(0, 0); background: var(--orange); border-color: var(--orange); }

.proj__meta {
  position: relative;
  padding: var(--s-6) var(--s-6) var(--s-5);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--white);
}
.proj__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0;
  color: var(--ink);
}
.proj__sub {
  font-size: 0.9rem;
  color: var(--mute);
  line-height: 1.5;
  margin: 0;
}
.proj__kpis {
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mute);
}
.proj__kpis strong { color: var(--orange); }

/* Card size variants — only column span varies; rows are auto-sized by content */
.proj--xl   { grid-column: span 7; }
.proj--lg   { grid-column: span 6; }
.proj--md   { grid-column: span 5; }
.proj--wide { grid-column: span 8; }
.proj--sm   { grid-column: span 4; }
.proj--tall { grid-column: span 4; }
/* Default rhythm: rows of 7+5, 5+7 — large/small alternation */
.proj-bento > .proj:nth-child(4n+1) { grid-column: span 7; }
.proj-bento > .proj:nth-child(4n+2) { grid-column: span 5; }
.proj-bento > .proj:nth-child(4n+3) { grid-column: span 5; }
.proj-bento > .proj:nth-child(4n) { grid-column: span 7; }

@media (max-width: 1080px) {
  .proj-bento { grid-template-columns: repeat(6, 1fr); }
  .proj--xl, .proj--lg, .proj--md, .proj--wide, .proj--sm, .proj--tall,
  .proj-bento > .proj { grid-column: span 6 !important; }
}
@media (max-width: 600px) {
  .proj-bento { grid-template-columns: 1fr; gap: var(--s-5); }
  .proj-bento > .proj { grid-column: span 1 !important; }
  .proj__meta { padding: var(--s-5); }
  .proj__title { font-size: 1.15rem; }
  .proj__sub { font-size: 0.86rem; }
}

/* =====================================================================
   ADS KPI CARDS (with sparkline)
   ===================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}
.kpi {
  position: relative;
  padding: var(--s-9);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s, transform 0.5s var(--ease-out-expo);
}
.kpi:hover { transform: translateY(-4px); border-color: rgba(255, 107, 26, 0.4); }
.kpi__head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.kpi__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--orange-soft);
  border-radius: var(--r-pill);
}
.kpi__client {
  font-size: 0.84rem;
  color: var(--mute);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.kpi h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: var(--s-7);
}
.kpi__chart {
  position: relative;
  height: 96px;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.kpi__chart svg { width: 100%; height: 100%; display: block; }
.kpi__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.kpi__metric {
  padding: 0 var(--s-4);
  border-left: 1px solid var(--line);
}
.kpi__metric:first-child { border-left: 0; padding-left: 0; }
.kpi__metric em {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  font-style: normal;
  margin-bottom: var(--s-2);
}
.kpi__metric strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
}
.kpi__metric--up strong { color: var(--orange); }
@media (max-width: 880px) {
  .kpi-grid { grid-template-columns: 1fr; }
}
/* Mobile : 4 colonnes deviennent illisibles (« < 500 € » se brise lettre par lettre).
   On passe à 2×2 avec espace vertical entre les rangées. */
@media (max-width: 640px) {
  .kpi__metrics {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--s-5);
  }
  .kpi__metric { padding: 0 var(--s-3); }
  /* On retire les borders verticales des cellules en 2e colonne pour conserver
     une seule ligne de séparation, et on enlève sur 1re cellule de chaque rangée. */
  .kpi__metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kpi__metric:nth-child(even) { padding-right: 0; }
  /* Empêche les valeurs courtes (« < 500 € ») de se briser */
  .kpi__metric strong { white-space: nowrap; font-size: 1.2rem; }
  .kpi__metric em { font-size: 0.6rem; }
}

/* =====================================================================
   VIDEO GALLERY
   ===================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.video-grid--5 { grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.video-card {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  isolation: isolate;
  border: 1px solid var(--line);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s;
}
.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -32px rgba(10, 22, 40, 0.4);
}
.video-card video,
.video-card img,
.video-card .video-illus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s;
}
.video-card .video-illus { background: var(--ink); }
.video-card:hover video,
.video-card:hover img,
.video-card:hover .video-illus { transform: scale(1.05); }
.video-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0) 30%, rgba(10, 22, 40, 0.92) 100%);
  z-index: 1;
}
.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--ink);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s;
}
.video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); }
.video-card__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--s-5);
  color: var(--white);
}
.video-card__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-2);
}
.video-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.video-card__desc {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 0.35s var(--ease-out-expo);
}
.video-card.is-playing .video-card__meta,
.video-card.is-playing .video-card__veil { opacity: 0; }
.video-card__veil, .video-card__meta { transition: opacity 0.35s var(--ease-out-expo); }
@media (max-width: 980px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .video-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   VIDEO LIGHTBOX (click-to-play modal)
   ===================================================================== */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 14, 28, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-expo);
}
.video-lightbox.is-open { display: flex; opacity: 1; }
.video-lightbox__stage {
  position: relative;
  width: min(420px, calc((100vh - 96px) * 9 / 16));
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 0.4s var(--ease-out-expo);
}
.video-lightbox.is-open .video-lightbox__stage { transform: scale(1); }
.video-lightbox__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.video-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  z-index: 2;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s, background 0.3s;
}
.video-lightbox__close:hover { transform: scale(1.08); background: var(--white); }

/* =====================================================================
   VIDEO SLIDER (horizontal scroll, larger cards)
   ===================================================================== */
.video-slider {
  position: relative;
  margin-top: var(--s-7);
}
.video-slider__track {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Padding généreux pour que le translateY(-5px) au hover + le box-shadow ne soient pas clippés
     par l'overflow horizontal. */
  padding-top: 24px;
  padding-bottom: 60px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Full-bleed : on sort du .container pour aller jusqu'aux bords du viewport.
     Le padding interne aligne la 1re card avec la grille, et un fade sur la droite
     signale visuellement la possibilité de scroll (plus de cut net). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  --video-edge-px: max(var(--container-x), calc((100vw - var(--max-w)) / 2 + var(--container-x)));
  padding-left: var(--video-edge-px);
  padding-right: var(--video-edge-px);
  scroll-padding-left: var(--video-edge-px);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
}
.video-slider__track::-webkit-scrollbar { display: none; }
.video-slider .video-card {
  flex: 0 0 calc((var(--max-w) - var(--container-x) * 2 - var(--s-4) * 2 - 48px) / 3);
  scroll-snap-align: start;
  aspect-ratio: 9 / 14;
  cursor: pointer;
  align-self: flex-start;
}
/* Override home.css mosaic offset: in the slider, cards must align (no nth-child decalage). */
.video-slider .video-card:nth-child(n) { transform: none; }
.video-slider .video-card:hover { transform: translateY(-5px); }
.video-slider .video-card:nth-child(n):hover { transform: translateY(-5px) scale(1.01); }
.video-slider .video-card__meta { padding: var(--s-5); }
.video-slider .video-card__title { font-size: 1.05rem; }

.video-slider__arrow {
  position: absolute;
  top: -68px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px -12px rgba(10, 22, 40, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s, background 0.3s, opacity 0.3s;
}
.video-slider__arrow:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 18px 40px -14px rgba(10, 22, 40, 0.35); }
.video-slider__arrow:active { transform: translateY(0); }
.video-slider__arrow:disabled { opacity: 0.35; cursor: default; }
/* Top-right placement (groupés) */
.video-slider__arrow--prev { left: auto; right: 60px; }
.video-slider__arrow--next { left: auto; right: 0; }
/* Réserve l'espace au-dessus du track pour que les flèches ne chevauchent pas la header */
.video-slider { padding-top: 12px; }
@media (max-width: 540px) {
  /* Sur petit écran on cache : le scroll-snap suffit, et y aurait pas la place */
  .video-slider__arrow { display: none; }
}

@media (max-width: 1180px) {
  .video-slider .video-card { flex-basis: calc((100% - var(--s-4) * 1) / 2); }
}
@media (max-width: 760px) {
  .video-slider .video-card { flex-basis: 78%; }
  .video-slider__arrow { display: none; }
}

/* =====================================================================
   SAAS HERO — Dashboard mock
   ===================================================================== */
.hero-saas {
  position: relative;
  min-height: 100dvh;
  padding-top: 140px;
  padding-bottom: var(--s-16);
  display: flex;
  align-items: center;
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero-saas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 22, 40, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 22, 40, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
}
.hero-saas__mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(85px);
  opacity: 0.55;
}
.hero-saas__mesh-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}
.hero-saas__mesh-blob--1 {
  width: 540px; height: 540px;
  top: -8%; right: -10%;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.32) 0%, transparent 70%);
  animation: blobDriftA 24s ease-in-out infinite;
}
.hero-saas__mesh-blob--2 {
  width: 420px; height: 420px;
  bottom: -10%; left: -6%;
  background: radial-gradient(circle, rgba(255, 180, 100, 0.26) 0%, transparent 70%);
  animation: blobDriftB 30s ease-in-out infinite;
}
.hero-saas__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-10);
  align-items: center;
  width: 100%;
}
.hero-saas__title {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink);
  margin-block: var(--s-5);
}
.hero-saas__title em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.hero-saas__sub {
  font-size: 1.15rem;
  max-width: 52ch;
  line-height: 1.55;
  color: var(--mute);
}
.hero-saas__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}
.hero-saas__pulses {
  margin-top: var(--s-7);
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.hero-saas__pulses span { display: inline-flex; align-items: center; gap: 8px; }
.hero-saas__pulses i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
  flex: none;
}
.hero-saas__pulses i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  animation: pulseRing 2.4s ease-out infinite;
}
.hero-saas__visual { position: relative; }

/* Dashboard mock */
.dash {
  position: relative;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow:
    0 50px 100px -50px rgba(10, 22, 40, 0.32),
    0 20px 40px -20px rgba(10, 22, 40, 0.18);
  overflow: hidden;
}
.dash__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--linen);
  border-bottom: 1px solid var(--line);
}
.dash__bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.18);
}
.dash__bar i:nth-child(1) { background: #FF6363; }
.dash__bar i:nth-child(2) { background: #FFC247; }
.dash__bar i:nth-child(3) { background: #2DD881; }
.dash__bar span {
  margin-left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mute);
}
.dash__body {
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-4);
  min-height: 380px;
}
.dash__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.dash__side-item {
  width: 100%;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--linen);
  position: relative;
  overflow: hidden;
}
.dash__side-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(10, 22, 40, 0.2);
}
.dash__side-item.is-active {
  background: rgba(255, 107, 26, 0.12);
  border: 1px solid rgba(255, 107, 26, 0.3);
}
.dash__side-item.is-active::before { background: var(--orange); }
.dash__main { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-4); }
.dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.dash__kpi {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
}
.dash__kpi em {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--mute);
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: 4px;
}
.dash__kpi strong {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
}
.dash__kpi span {
  font-size: 0.74rem;
  color: var(--orange);
  font-family: var(--font-mono);
}
.dash__chart {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  min-height: 160px;
  overflow: hidden;
}
.dash__chart svg { width: 100%; height: 100%; }
.dash__chart-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: chartDraw 4s ease-out forwards infinite alternate;
}
.dash__chart-fill {
  fill: url(#chartGrad);
  opacity: 0;
  animation: chartFill 5s ease-out 0.6s forwards infinite alternate;
}
@keyframes chartDraw { to { stroke-dashoffset: 0; } }
@keyframes chartFill { to { opacity: 1; } }
.dash__chart-dot {
  fill: var(--orange);
  filter: drop-shadow(0 0 6px rgba(255, 107, 26, 0.6));
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.dash__rows { display: flex; flex-direction: column; gap: 8px; }
.dash__row {
  display: grid;
  grid-template-columns: 24px 1fr 60px;
  gap: var(--s-3);
  align-items: center;
  padding: 8px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 0.82rem;
}
.dash__row-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
}
.dash__row-name { display: flex; flex-direction: column; }
.dash__row-name em { font-style: normal; font-weight: 600; color: var(--ink); }
.dash__row-name span { font-size: 0.72rem; color: var(--mute); font-family: var(--font-mono); }
.dash__row-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--orange);
  text-align: right;
  letter-spacing: 0.06em;
}
.hero-saas__notif {
  position: absolute;
  bottom: -22px;
  left: 8%;
  background: var(--ink);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.92rem;
  box-shadow: 0 22px 44px -16px rgba(10, 22, 40, 0.45);
  animation: notifPop 5s ease-in-out infinite;
}
.hero-saas__notif i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2DD881;
  position: relative;
}
.hero-saas__notif i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #2DD881;
  animation: pulseRing 1.6s ease-out infinite;
}
.hero-saas__notif strong { color: var(--orange); }
@keyframes notifPop {
  0%, 25%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.04); }
}
@media (max-width: 1024px) {
  .hero-saas__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .hero-saas__grid > * { min-width: 0; }
  .hero-saas__notif { left: 4%; right: 4%; bottom: -18px; justify-content: center; }
  .dash__body { grid-template-columns: 1fr; }
  .dash__side { display: none; }
}
@media (max-width: 640px) {
  .hero-saas { padding-top: 100px; padding-bottom: var(--s-10); min-height: 0; }
  .hero-saas__grid { gap: var(--s-6); }
  .hero-saas__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero-saas__sub { font-size: 0.95rem; }
  .hero-saas__actions { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .hero-saas__actions .btn { justify-content: center; }
  .dash { min-width: 0; }
  .dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .dash__kpi { padding: var(--s-2) var(--s-3); }
  .dash__kpi strong { font-size: 1rem; }
  .dash__bar { padding: 10px 12px; }
  .dash__bar span { font-size: 0.65rem; }
}

/* =====================================================================
   FORMAT MOCK CARDS (SaaS bloc 4)
   ===================================================================== */
.format-stack {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-10);
}
.format {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--s-9);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  gap: var(--s-5);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.55s var(--ease-out-expo), box-shadow 0.55s, border-color 0.4s;
}
.format:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 107, 26, 0.35);
  box-shadow: 0 40px 70px -36px rgba(255, 107, 26, 0.22);
}
.format::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.12), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s;
}
.format:hover::before { opacity: 1; }
.format__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--orange-soft);
  border-radius: var(--r-pill);
  width: fit-content;
}
.format__viz {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
}
.format__viz svg { width: 100%; height: 100%; display: block; }
.format__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.format__desc {
  color: var(--mute);
  line-height: 1.65;
  font-size: 1rem;
}
.format__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.format__list span {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--mute);
}
@media (max-width: 1024px) and (min-width: 641px) { .format-stack { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .format-stack { margin-top: var(--s-6); }
  .format { padding: var(--s-6); }
  .format__name { font-size: 1.1rem; }
}

/* Format viz animations */
.fmt-window { transform-box: fill-box; transform-origin: center; }
.fmt-cursor { transform-box: fill-box; transform-origin: center; }
.fmt-orbit-dot { transform-box: fill-box; transform-origin: center; }
.fmt-phone-screen path { transform-box: fill-box; transform-origin: left; }

/* =====================================================================
   FUZZY (SaaS — besoin flou avec connexions)
   ===================================================================== */
.fuzzy {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: var(--s-12);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--s-12);
  position: relative;
  overflow: hidden;
}
.fuzzy__halo {
  position: absolute;
  width: 480px; height: 480px;
  right: -180px; bottom: -200px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.16) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.fuzzy__copy { position: relative; z-index: 1; }
.fuzzy__copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--s-4);
  font-weight: 700;
}
.fuzzy__copy h3 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.fuzzy__copy p { color: var(--mute); line-height: 1.55; }
.fuzzy__steps {
  list-style: none;
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.fuzzy__steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.fuzzy__steps li:last-child { border-bottom: 0; }
.fuzzy__steps li svg { color: var(--orange); flex: none; margin-top: 4px; }
.fuzzy__steps li span { color: var(--ink); font-size: 1rem; line-height: 1.6; }
.fuzzy__steps li span strong { color: var(--orange); font-weight: 600; }
.fuzzy__diagram {
  position: relative;
  aspect-ratio: 1 / 1;
}
.fuzzy__diagram svg { width: 100%; height: 100%; display: block; }
.fuzzy-dot { transform-box: fill-box; transform-origin: center; }
.fuzzy-line { stroke-dasharray: 4 6; }
@media (max-width: 900px) {
  .fuzzy { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7); }
  .fuzzy__diagram { max-width: 360px; margin: 0 auto; }
}

/* =====================================================================
   EXAMPLES STRIP (SaaS bloc 8 — projects strip)
   ===================================================================== */
.examples {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.ex-tile {
  position: relative;
  aspect-ratio: 1 / 0.9;
  padding: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease-out-expo), border-color 0.4s, box-shadow 0.5s;
}
.ex-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 26, 0.4);
  box-shadow: 0 22px 40px -22px rgba(10, 22, 40, 0.18);
}
.ex-tile::before {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.15), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s;
}
.ex-tile:hover::before { opacity: 1; }
.ex-tile__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 107, 26, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  transition: background 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo);
}
.ex-tile__icon svg { width: 24px; height: 24px; display: block; overflow: visible; }
.ex-tile:hover .ex-tile__icon {
  background: var(--orange);
  color: var(--white);
}
.ex-tile h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
}
.ex-tile span {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--mute);
  text-transform: uppercase;
}
@media (max-width: 1000px) { .examples { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .examples { grid-template-columns: 1fr; } }

/* Eyebrow color override on dark sections */
.process-section .eyebrow-pill { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }

/* =====================================================================
   SAAS — POUR QUI: 2-col card grid (compact replacement for the
   former full-width zigzag)
   ===================================================================== */
.editorial-grid {
  margin-top: var(--s-9);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.editorial-grid .edit-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--white);
  overflow: hidden;
  align-items: stretch;
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s, box-shadow 0.4s;
}
.editorial-grid .edit-row::before { content: none; }
.editorial-grid .edit-row:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 26, 0.32);
  box-shadow: 0 24px 40px -22px rgba(10, 22, 40, 0.16);
}
.editorial-grid .edit-row:nth-child(even) .edit-row__copy { order: unset; }
.editorial-grid .edit-row:nth-child(even) .edit-row__viz { order: unset; }
.editorial-grid .edit-row__viz {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.editorial-grid .edit-row__viz svg {
  width: 100%;
  height: 100%;
  max-width: 320px;
  max-height: 180px;
  display: block;
}
.editorial-grid .edit-row__copy {
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
}
.editorial-grid .edit-row__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.editorial-grid .edit-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 var(--s-3);
}
.editorial-grid .edit-row__title em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.editorial-grid .edit-row__copy p {
  color: var(--mute);
  font-size: 0.97rem;
  line-height: 1.55;
  max-width: none;
  margin: 0;
}
@media (max-width: 1024px) and (min-width: 641px) {
  .editorial-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .editorial-grid .edit-row__viz { aspect-ratio: 16 / 7; }
  .editorial-grid .edit-row__copy { padding: var(--s-5) var(--s-6); }
}
@media (max-width: 640px) {
  .editorial-grid { margin-top: var(--s-6); }
  .editorial-grid .edit-row {
    flex: 0 0 86vw;
    max-width: 380px;
  }
  .editorial-grid .edit-row__viz { aspect-ratio: 16 / 9; }
  .editorial-grid .edit-row__viz svg { max-width: 220px; max-height: 140px; }
  .editorial-grid .edit-row__copy { padding: var(--s-5); }
  .editorial-grid .edit-row__title { font-size: 1.1rem; }
  .editorial-grid .edit-row__copy p { font-size: 0.92rem; }
}

/* =====================================================================
   SAAS — EDITORIAL ZIGZAG (Pour qui — legacy alternating large rows)
   ===================================================================== */
.editorial-stack {
  margin-top: var(--s-12);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.edit-row {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-12);
  align-items: center;
  padding: var(--s-14) 0;
  border-top: 1px solid var(--line);
}
.edit-row:last-child { border-bottom: 1px solid var(--line); }
.edit-row:nth-child(even) .edit-row__copy { order: 2; }
.edit-row:nth-child(even) .edit-row__viz { order: 1; }
.edit-row__num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.edit-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: var(--s-5);
}
.edit-row__title em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.edit-row__copy p {
  color: var(--mute);
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 56ch;
}
.edit-row__viz {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.edit-row__viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(450px circle at 70% 30%, rgba(255, 107, 26, 0.08), transparent 60%);
}
.edit-row__viz svg { width: 80%; height: 80%; position: relative; z-index: 1; }
@media (max-width: 880px) {
  .edit-row { grid-template-columns: 1fr; padding: var(--s-9) 0; gap: var(--s-7); }
  .edit-row:nth-child(even) .edit-row__copy { order: 1; }
  .edit-row:nth-child(even) .edit-row__viz { order: 2; }
}

/* =====================================================================
   ADS — PLATFORM TILES (Ce qu'on gère — 7 tiles asymmetric)
   ===================================================================== */
.platforms-asym {
  margin-top: var(--s-12);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
  grid-auto-rows: 220px;
}
.ptile {
  position: relative;
  padding: var(--s-7);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease-out-expo), border-color 0.4s, box-shadow 0.5s;
}
.ptile:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 26, 0.4);
  box-shadow: 0 30px 50px -28px rgba(255, 107, 26, 0.2);
}
.ptile::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.14), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
}
.ptile:hover::after { opacity: 1; }
.ptile__logo {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ptile__logo svg { width: 26px; height: 26px; }
.ptile__name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ptile__desc {
  font-size: 0.94rem;
  color: var(--mute);
  line-height: 1.55;
  flex: 1;
}
.ptile__pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--mute);
  text-transform: uppercase;
}
.ptile__pulse i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
}
.ptile__pulse i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.4px solid var(--orange);
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
}

.ptile--meta { grid-column: span 5; grid-row: span 2; }
.ptile--meta .ptile__name { font-size: 1.5rem; }
.ptile--meta .ptile__logo { width: 64px; height: 64px; }
.ptile--meta .ptile__logo svg { width: 34px; height: 34px; }

.ptile--google { grid-column: span 4; grid-row: span 1; }
.ptile--tiktok { grid-column: span 3; grid-row: span 1; }
.ptile--snap { grid-column: span 3; grid-row: span 1; }
.ptile--track { grid-column: span 4; grid-row: span 1; }
.ptile--creas { grid-column: span 4; grid-row: span 1; }
.ptile--landing { grid-column: span 8; grid-row: span 1; }

@media (max-width: 1000px) {
  .platforms-asym { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; }
  .ptile--meta { grid-column: span 6; }
  .ptile--google, .ptile--tiktok, .ptile--snap, .ptile--track, .ptile--creas, .ptile--landing {
    grid-column: span 3; grid-row: span 1;
  }
}
@media (max-width: 560px) {
  .platforms-asym { grid-template-columns: 1fr; }
  .ptile { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* =====================================================================
   ADS — BENEFITS ZIGZAG (Ce que vous achetez — 10 alternating items)
   ===================================================================== */
.benefits-grid {
  margin-top: var(--s-9);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.benefit-card {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s, box-shadow 0.4s;
  margin: 0;
}
.benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 26, 0.4);
  box-shadow: 0 8px 24px rgba(255, 107, 26, 0.08);
}
.benefit-card__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  background: rgba(255, 107, 26, 0.1);
  border-radius: 12px;
  transition: background 0.3s, transform 0.3s var(--ease-out-expo);
}
.benefit-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
}
.benefit-card:hover .benefit-card__icon {
  background: rgba(255, 107, 26, 0.18);
  transform: scale(1.06);
}
.benefit-card__txt {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}

/* Desktop default: page wrappers are flattened so cards flow inline in the grid */
.benefits-page { display: contents; }

/* Mobile-hidden cards: shown on desktop/tablet, removed on phones */
@media (max-width: 640px) {
  .benefit-card--desktop-only { display: none !important; }
}

@media (max-width: 1024px) and (min-width: 641px) {
  .benefits-grid { gap: var(--s-2); }
  .benefit-card { padding: var(--s-4) var(--s-5); gap: var(--s-4); }
  .benefit-card__icon { width: 38px; height: 38px; border-radius: 10px; }
  .benefit-card__icon svg { width: 22px; height: 22px; }
  .benefit-card__txt { font-size: 0.98rem; }
}
@media (max-width: 640px) {
  /* Mobile: horizontal 3-page slider, 3 cards per page stacked vertically */
  .benefits-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-x);
    gap: var(--s-6) !important;
    padding-inline: var(--container-x);
    padding-block: 12px;
    margin-inline: calc(var(--container-x) * -1);
    margin-top: var(--s-6);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .benefits-grid::-webkit-scrollbar { display: none; }
  .benefits-page {
    display: flex !important;
    flex-direction: column;
    gap: var(--s-3);
    flex: 0 0 86vw;
    max-width: 380px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .benefit-card {
    padding: var(--s-4) var(--s-5);
    gap: var(--s-4);
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  .benefit-card__icon { width: 40px; height: 40px; border-radius: 10px; }
  .benefit-card__icon svg { width: 22px; height: 22px; }
  .benefit-card__txt { font-size: 0.95rem; line-height: 1.3; }
}

/* =====================================================================
   SAAS — BÉNÉFICES BUSINESS (Bloc 7) : 12-card gain grid
   ===================================================================== */
.gains-grid {
  margin-top: var(--s-9);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.gain-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s, box-shadow 0.4s;
  margin: 0;
}
.gain-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 26, 0.4);
  box-shadow: 0 16px 30px -20px rgba(10, 22, 40, 0.18);
}
.gain-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 107, 26, 0.12);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, transform 0.3s var(--ease-out-expo);
}
.gain-card__icon svg { width: 16px; height: 16px; display: block; overflow: visible; }
.gain-card:hover .gain-card__icon {
  background: rgba(255, 107, 26, 0.22);
  transform: scale(1.06);
}
.gain-card h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
/* Desktop default: page wrappers are transparent so cards flow inline in the grid */
.gains-page { display: contents; }

@media (max-width: 1024px) and (min-width: 641px) {
  .gains-grid { grid-template-columns: repeat(3, 1fr); margin-top: var(--s-6); }
}
@media (max-width: 640px) {
  /* Mobile: 3-page horizontal slider, 4 gains per page */
  .gains-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-x);
    gap: var(--s-6) !important;
    padding-inline: var(--container-x);
    padding-block: 12px;
    margin-inline: calc(var(--container-x) * -1);
    margin-top: var(--s-6);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gains-grid::-webkit-scrollbar { display: none; }
  .gains-page {
    display: flex !important;
    flex-direction: column;
    gap: var(--s-2);
    flex: 0 0 86vw;
    max-width: 380px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .gain-card { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .gain-card__icon { width: 36px; height: 36px; }
  .gain-card__icon svg { width: 20px; height: 20px; }
  .gain-card h4 { font-size: 0.92rem; }
}

/* =====================================================================
   GAIN-CARD PICTOGRAM ANIMATIONS (one per data-gain value)
   ===================================================================== */
/* time — clock hands rotate */
.gain-card[data-gain="time"] .gain-anim-hand-h { transform-origin: 12px 13px; animation: gainClockH 4s linear infinite; }
.gain-card[data-gain="time"] .gain-anim-hand-m { transform-origin: 12px 13px; animation: gainClockM 1s linear infinite; }
@keyframes gainClockH { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes gainClockM { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* errors — shield check draws on */
.gain-card[data-gain="errors"] .gain-anim-shield-check { animation: gainShieldDraw 2.4s ease-in-out infinite; }
@keyframes gainShieldDraw {
  0%, 100% { stroke-dashoffset: 100; }
  40%, 70% { stroke-dashoffset: 0; }
}

/* clarity — eye iris pulses */
.gain-card[data-gain="clarity"] .gain-anim-iris {
  transform-origin: 12px 12px;
  animation: gainIris 2.6s ease-in-out infinite;
}
@keyframes gainIris {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.6); }
}

/* ux — smile bobs */
.gain-card[data-gain="ux"] .gain-anim-smile {
  transform-origin: 12px 14px;
  animation: gainSmile 2.4s ease-in-out infinite;
}
@keyframes gainSmile {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.25) translateY(-1px); }
}

/* adoption — new user fades in/out */
.gain-card[data-gain="adoption"] .gain-anim-newuser {
  animation: gainNewUser 2.2s ease-in-out infinite;
}
@keyframes gainNewUser {
  0%, 30%, 100% { opacity: 0; transform: translateX(-3px); }
  55%, 80%      { opacity: 1; transform: translateX(0); }
}

/* data — central blip pulses */
.gain-card[data-gain="data"] .gain-anim-data-blip {
  transform-origin: 12px 12px;
  animation: gainDataBlip 1.6s ease-out infinite;
}
@keyframes gainDataBlip {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* auto — gear rotates */
.gain-card[data-gain="auto"] .gain-anim-gear {
  animation: gainGear 6s linear infinite;
}
@keyframes gainGear {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* scale — bars grow in sequence */
.gain-card[data-gain="scale"] .gain-anim-scale-bar { transform-origin: bottom; transform-box: fill-box; }
.gain-card[data-gain="scale"] .gain-anim-scale-bar--1 { animation: gainBarGrow 2.6s ease-in-out infinite; }
.gain-card[data-gain="scale"] .gain-anim-scale-bar--2 { animation: gainBarGrow 2.6s ease-in-out 0.15s infinite; }
.gain-card[data-gain="scale"] .gain-anim-scale-bar--3 { animation: gainBarGrow 2.6s ease-in-out 0.3s infinite; }
@keyframes gainBarGrow {
  0%, 80%, 100% { transform: scaleY(1); }
  40%           { transform: scaleY(1.15); }
}

/* durable — extra brick appears at top */
.gain-card[data-gain="durable"] .gain-anim-brick {
  animation: gainBrick 2.4s ease-in-out infinite;
}
@keyframes gainBrick {
  0%, 30%, 100% { opacity: 0; transform: translateY(-4px); }
  55%, 85%      { opacity: 1; transform: translateY(0); }
}

/* money — coin flips */
.gain-card[data-gain="money"] .gain-anim-coin {
  transform-origin: 12px 12px;
  animation: gainCoin 3s ease-in-out infinite;
}
@keyframes gainCoin {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.2); }
}

/* flow — three lines stream */
.gain-card[data-gain="flow"] .gain-anim-flow { animation: gainFlow 2.4s linear infinite; }
.gain-card[data-gain="flow"] .gain-anim-flow--2 { animation-delay: 0.4s; }
.gain-card[data-gain="flow"] .gain-anim-flow--3 { animation-delay: 0.8s; }
@keyframes gainFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}

/* roi — line draws then arrow tip pops */
.gain-card[data-gain="roi"] .gain-anim-roi-line { animation: gainRoiLine 2.6s ease-in-out infinite; }
.gain-card[data-gain="roi"] .gain-anim-roi-tip {
  transform-origin: 21px 6px;
  animation: gainRoiTip 2.6s ease-in-out infinite;
}
@keyframes gainRoiLine {
  0%, 100%   { stroke-dashoffset: 100; }
  45%, 75%   { stroke-dashoffset: 0; }
}
@keyframes gainRoiTip {
  0%, 45%, 100% { opacity: 0; transform: scale(0.5); }
  55%, 75%      { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .gain-card [class*="gain-anim"] { animation: none !important; }
}

/* =====================================================================
   SAAS — LIVE TICKER (legacy, replaced by .gains-grid above)
   ===================================================================== */
.ticker-block {
  margin-top: var(--s-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
.ticker-block__copy { padding: var(--s-7) 0; }
.ticker-block__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: var(--s-4);
}
.ticker-block__copy h3 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.ticker-block__copy p {
  color: var(--mute);
  font-size: 1.04rem;
  line-height: 1.65;
  max-width: 50ch;
}
.ticker-feed {
  position: relative;
  background: var(--ink);
  border-radius: var(--r-2xl);
  padding: var(--s-9);
  height: 460px;
  overflow: hidden;
  isolation: isolate;
}
.ticker-feed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 80% 30%, rgba(255, 107, 26, 0.18), transparent 60%);
  z-index: 0;
}
.ticker-feed__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-5);
  position: relative;
  z-index: 1;
}
.ticker-feed__head em {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
}
.ticker-feed__head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--orange);
  letter-spacing: 0.14em;
}
.ticker-feed__head span i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
}
.ticker-feed__head span i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  animation: pulseRing 1.6s ease-out infinite;
}
.ticker-feed__list {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: calc(100% - 50px);
  overflow: hidden;
}
.ticker-feed__item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  color: var(--white);
  font-size: 0.96rem;
  transition: transform 0.4s var(--ease-out-expo);
  flex: none;
}
.ticker-feed__item--new { border-color: rgba(255, 107, 26, 0.5); background: rgba(255, 107, 26, 0.08); }
.ticker-feed__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.ticker-feed__check svg { width: 12px; height: 12px; }
.ticker-feed__time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
}
@media (max-width: 980px) {
  .ticker-block { grid-template-columns: 1fr; gap: var(--s-7); }
  .ticker-feed { height: 420px; }
}

/* =====================================================================
   SAAS — RADIAL PROBLEM (Le problème — 8 issues on a circle)
   ===================================================================== */
.radial-problem {
  margin-top: var(--s-12);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.radial-problem__viz {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radial-problem__viz svg { width: 100%; height: 100%; }
.radial-problem__center {
  position: absolute;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ink), #1F2937);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-4);
  box-shadow: 0 30px 60px -20px rgba(10, 22, 40, 0.45);
  z-index: 2;
}
.radial-problem__center strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.radial-problem__center span {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Pictogram cluster: 8 icons stacked in the slot that "// system" occupies */
.radial-problem__picts {
  position: relative;
  width: 36px;
  height: 36px;
  margin-top: 6px;
  pointer-events: none;
}
.problem-pict {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--orange);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.28s var(--ease-out-expo), transform 0.32s var(--ease-out-expo);
}
.problem-pict.is-active {
  opacity: 1;
  transform: scale(1);
  animation: problemPictBob 2.4s ease-in-out infinite;
}
@keyframes problemPictBob {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.06) translateY(-2px); }
}
/* When a pict is active: swap out the "// system" label */
.radial-problem__center.is-pict .radial-problem__sys {
  opacity: 0;
  transform: translateY(4px);
  position: absolute;
  pointer-events: none;
}
.radial-problem__node {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: 0.86rem;
  color: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(10, 22, 40, 0.18);
  white-space: nowrap;
  font-weight: 500;
  z-index: 3;
}
.radial-problem__node em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--orange);
  letter-spacing: 0.18em;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.radial-problem__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
.radial-problem__list li {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  font-size: 1rem;
  color: var(--ink);
  transition: padding-left 0.3s var(--ease-out-expo);
}
.radial-problem__list li:hover { padding-left: var(--s-3); }
.radial-problem__list li:last-child { border-bottom: 0; }
.radial-problem__list li.is-active { padding-left: var(--s-3); }
.radial-problem__list li.is-active em { color: var(--orange); }
.radial-problem__list li.is-active span { color: var(--orange); font-weight: 700; }
.problem-dot {
  transition: fill 0.25s ease, filter 0.25s ease;
}
.problem-dot.is-active {
  filter: drop-shadow(0 0 10px rgba(255, 107, 26, 0.9)) drop-shadow(0 0 22px rgba(255, 107, 26, 0.5));
}
.radial-problem__list li em {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--orange);
  letter-spacing: 0.18em;
  font-style: normal;
}
.radial-problem__list li b {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mute);
  letter-spacing: 0.06em;
}

@media (max-width: 1024px) and (min-width: 641px) {
  .radial-problem { grid-template-columns: 1fr; gap: var(--s-9); }
  .radial-problem__viz { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .radial-problem {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    margin-top: var(--s-6);
  }
  .radial-problem__viz {
    max-width: 320px;
    margin: 0 auto;
  }
  .radial-problem__center { width: 36%; }
  .radial-problem__center strong { font-size: 1rem; }
  .radial-problem__center span { font-size: 0.55rem; }
  .radial-problem__picts { width: 30px; height: 30px; margin-top: 4px; }
  .radial-problem__list {
    border-top: 1px solid var(--line);
  }
  .radial-problem__list li {
    padding: var(--s-4) 0;
    grid-template-columns: 28px 1fr auto;
    gap: var(--s-3);
    font-size: 0.95rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .radial-problem__list li em { font-size: 0.7rem; }
  .radial-problem__list li.is-active { padding-left: var(--s-2); }
  .problem-dot { r: 6; }
  .problem-dot.is-active { filter: drop-shadow(0 0 6px rgba(255, 107, 26, 0.9)) drop-shadow(0 0 14px rgba(255, 107, 26, 0.5)); }
}

/* =====================================================================
   SAAS — VERTICAL TIMELINE (Notre accompagnement — sticky vertical)
   ===================================================================== */
.vtimeline {
  margin-top: var(--s-12);
  position: relative;
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: var(--s-12);
  align-items: start;
}
.vtimeline__intro {
  position: sticky;
  top: 120px;
  padding-top: var(--s-3);
}
.vtimeline__steps {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
.vtimeline__steps::before {
  content: "";
  position: absolute;
  left: 25px; top: 25px; bottom: 25px;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(255, 107, 26, 0.4) 0 6px, transparent 6px 12px);
}
.vstep {
  position: relative;
  padding: 0 0 var(--s-12) var(--s-14);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.vstep:last-child { padding-bottom: 0; }
.vstep__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
  z-index: 2;
  box-shadow: 0 6px 16px -6px rgba(255, 107, 26, 0.4);
  transition: background 0.4s var(--ease-out-expo), color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-out-expo);
}
.vstep:hover .vstep__num {
  background: var(--orange);
  color: var(--white);
}
.vstep.is-passed .vstep__num {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 8px 22px -6px rgba(255, 107, 26, 0.6);
}
.vstep__title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.vstep__title em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.vstep__desc {
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.65;
}
.vstep__viz {
  margin-top: var(--s-5);
  aspect-ratio: 16 / 7;
  border-radius: var(--r-xl);
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.vstep__viz svg { width: 100%; height: 100%; display: block; }
.vstep__pic {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 107, 26, 0.08);
  border-radius: 12px;
  color: var(--orange);
  margin-top: var(--s-1);
  margin-bottom: var(--s-1);
  transition: background 0.3s, transform 0.3s var(--ease-out-expo);
}
.vstep__pic svg {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
}
.vstep:hover .vstep__pic {
  background: rgba(255, 107, 26, 0.16);
  transform: scale(1.06);
}
.vtimeline__progress {
  position: absolute;
  left: 25px;
  top: 25px;
  width: 2px;
  height: 0;
  background: var(--orange);
  border-radius: 1px;
  transform-origin: top;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 26, 0.15);
}
@media (max-width: 880px) {
  .vtimeline { grid-template-columns: 1fr; gap: var(--s-7); }
  .vtimeline__intro { position: static; }
  .vstep { padding-left: var(--s-12); padding-bottom: var(--s-9); }
  .vstep__num { width: 44px; height: 44px; font-size: 0.92rem; }
  .vtimeline__steps::before { left: 22px; }
  .vtimeline__progress { left: 22px; }
  .vstep__pic { width: 42px; height: 42px; border-radius: 10px; }
  .vstep__pic svg { width: 24px; height: 24px; }
}

/* =====================================================================
   ADS — SOLUTION RAIL (Réassurance — 4 cards inline with progress)
   ===================================================================== */
/* Already covered by .promises */

/* =====================================================================
   RÉALISATIONS — Coverflow horizontal (SaaS section)
   ===================================================================== */
.coverflow-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-7);
}
.coverflow-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s var(--ease-out-expo), color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out-expo), box-shadow 0.3s, opacity 0.3s;
}
.coverflow-nav__btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(255, 107, 26, 0.55);
}
.coverflow-nav__btn:active { transform: translateY(0); }
.coverflow-nav__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.coverflow {
  margin-top: var(--s-4);
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--s-3) 0 var(--s-7);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.coverflow::-webkit-scrollbar { height: 6px; }
.coverflow::-webkit-scrollbar-track { background: var(--linen); border-radius: 3px; }
.coverflow::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }
.coverflow__card {
  flex: none;
  width: 480px;
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s;
}
.coverflow__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -28px rgba(10, 22, 40, 0.3);
}
.coverflow__img {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.coverflow__img img,
.coverflow__img svg {
  width: 100%; height: 100%;
  display: block;
  transition: transform 0.6s;
}
.coverflow__img img { object-fit: cover; }
.coverflow__card:hover .coverflow__img img,
.coverflow__card:hover .coverflow__img svg { transform: scale(1.04); }
.coverflow__body { padding: var(--s-7); }
.coverflow__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-3);
}
.coverflow__cat i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.coverflow__title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: var(--s-3);
}
.coverflow__desc {
  font-size: 0.96rem;
  color: var(--mute);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.coverflow__desc span {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.coverflow__desc span svg {
  color: var(--orange);
  flex: none;
  margin-top: 4px;
  width: 14px; height: 14px;
}
@media (max-width: 540px) {
  .coverflow__card { width: 86vw; }
}

/* =====================================================================
   ADS — VERTICAL ANTIFIT (different from SaaS antifit)
   ===================================================================== */
.antifit-v {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-2xl);
  padding: var(--s-10) var(--s-12);
  margin-top: var(--s-10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.antifit-v::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px circle at 90% 0%, rgba(255, 107, 26, 0.18), transparent 50%),
    radial-gradient(380px circle at 10% 100%, rgba(255, 180, 100, 0.08), transparent 60%);
  z-index: -1;
}
.antifit-v__head { max-width: 720px; }
.antifit-v h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-top: var(--s-4);
  font-weight: 700;
}
.antifit-v h2 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.antifit-v__lead {
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--s-4);
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.65;
}
.antifit-v__list {
  margin-top: var(--s-9);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s-10);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.antifit-v__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: padding-left 0.3s var(--ease-out-expo);
}
.antifit-v__row:hover { padding-left: var(--s-2); }
.antifit-v__row em {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  font-style: normal;
}
.antifit-v__row span {
  font-size: 1rem;
  color: var(--white);
  line-height: 1.35;
}
.antifit-v__row strong {
  color: var(--orange);
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 107, 26, 0.5);
}
@media (max-width: 760px) {
  .antifit-v__list { grid-template-columns: 1fr; gap: 0; }
  .antifit-v { padding: var(--s-9) var(--s-7); }
}

/* =====================================================================
   SAAS — REASSURANCE 2x2 grid (different from Ads 4-col)
   ===================================================================== */
.reassure-2x2 {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.reassure-card {
  position: relative;
  padding: var(--s-9);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-5);
  align-items: start;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s, transform 0.5s var(--ease-out-expo);
}
.reassure-card:hover {
  border-color: rgba(255, 107, 26, 0.4);
  transform: translateY(-3px);
}
.reassure-card::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.1), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
}
.reassure-card:hover::after { opacity: 1; }
.reassure-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--orange-soft), rgba(255, 107, 26, 0.05));
  border: 1px solid rgba(255, 107, 26, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-deep);
}
.reassure-card__icon svg { width: 24px; height: 24px; }
.reassure-card__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: var(--s-2);
}
.reassure-card h4 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: var(--s-3);
}
.reassure-card p {
  font-size: 0.98rem;
  color: var(--mute);
  line-height: 1.65;
}
@media (max-width: 1024px) and (min-width: 641px) {
  .reassure-2x2 { grid-template-columns: 1fr; }
  .reassure-card { padding: var(--s-7); }
}
@media (max-width: 640px) {
  .reassure-2x2 { margin-top: var(--s-6); }
  .reassure-card { padding: var(--s-6); grid-template-columns: 48px 1fr; gap: var(--s-4); }
  .reassure-card__icon { width: 48px; height: 48px; }
  .reassure-card__icon svg { width: 20px; height: 20px; }
  .reassure-card h4 { font-size: 1.05rem; margin-bottom: 0; }
}

/* =====================================================================
   ADS — CTA centered (different from SaaS)
   ===================================================================== */
.cta-centered {
  margin-top: var(--s-7);
  padding: var(--s-16) var(--s-12);
  background: var(--ink);
  border-radius: var(--r-2xl);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-centered::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px circle at 50% 0%, rgba(255, 107, 26, 0.32), transparent 55%),
    radial-gradient(400px circle at 50% 100%, rgba(255, 180, 100, 0.08), transparent 60%);
  z-index: -1;
}
.cta-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.cta-roi-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  display: block;
}
@media (max-width: 760px) {
  .cta-roi-flow text { display: none; }
}
.cta-particle {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  color: rgba(255, 107, 26, 0.18);
  font-size: 1.6rem;
  user-select: none;
  bottom: -3rem;
  opacity: 0;
  will-change: transform, opacity;
}
.cta-particle:nth-child(1) { left: 6%; font-size: 1.4rem; }
.cta-particle:nth-child(2) { left: 18%; font-size: 2rem; }
.cta-particle:nth-child(3) { left: 28%; font-size: 1.2rem; }
.cta-particle:nth-child(4) { left: 38%; font-size: 1.7rem; }
.cta-particle:nth-child(5) { left: 47%; font-size: 1.3rem; }
.cta-particle:nth-child(6) { left: 56%; font-size: 1.9rem; }
.cta-particle:nth-child(7) { left: 65%; font-size: 1.4rem; }
.cta-particle:nth-child(8) { left: 74%; font-size: 1.6rem; }
.cta-particle:nth-child(9) { left: 84%; font-size: 1.3rem; }
.cta-particle:nth-child(10) { left: 92%; font-size: 1.5rem; }

/* CTA tiles — floating mini mockups (réalisations page CTA) */
.cta-tiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.cta-tile {
  position: absolute;
  opacity: 0.22;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  will-change: transform, opacity;
}
.cta-tile svg { display: block; width: 100%; height: 100%; }
.cta-tile--web    { top: 8%;     left: 5%;   width: 110px; height: 77px; }
.cta-tile--saas   { top: 12%;    right: 6%;  width: 120px; height: 84px; }
.cta-tile--mobile { bottom: 10%; left: 8%;   width: 56px;  height: 94px; }
.cta-tile--ad     { bottom: 8%;  right: 7%;  width: 100px; height: 70px; }
@media (max-width: 900px) {
  .cta-tile--web    { width: 80px;  height: 56px; }
  .cta-tile--saas   { width: 86px;  height: 60px; }
  .cta-tile--mobile { width: 42px;  height: 70px; }
  .cta-tile--ad     { width: 76px;  height: 53px; }
}
@media (max-width: 700px) {
  .cta-tile { display: none; }
}
.cta-centered .eyebrow-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--s-5);
}
.cta-centered h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--white);
  font-weight: 700;
  margin-bottom: var(--s-5);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-centered h2 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.cta-centered p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0 auto var(--s-9);
}
.cta-centered__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}
.cta-centered .btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.cta-centered .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.06); }

/* =====================================================================
   RÉALISATIONS — Intro section (just text, breathy)
   ===================================================================== */
.intro-band {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--s-12);
  padding: var(--s-9) 0;
  align-items: end;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.intro-band__head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  font-weight: 700;
}
.intro-band__head h2 em {
  font-family: 'Cabinet Grotesk', serif;
  font-style: italic;
  color: var(--orange);
}
.intro-band__copy p {
  color: var(--mute);
  font-size: 1.1rem;
  line-height: 1.65;
  margin-bottom: var(--s-5);
}
.intro-band__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.intro-band__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.intro-band__cat i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.intro-cat-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
}
.intro-cat-icon svg { width: 18px; height: 18px; display: block; overflow: visible; }
@media (max-width: 880px) {
  .intro-band { grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }
}

/* ============================================================
   LEGAL PAGES — Mentions légales, Politique de confidentialité, Cookies
   ============================================================ */
.legal-hero {
  padding-top: clamp(140px, 16vh, 200px);
  padding-bottom: var(--s-12);
  position: relative;
  overflow: hidden;
}
.legal-hero__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
.legal-hero__mesh::before,
.legal-hero__mesh::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
}
.legal-hero__mesh::before {
  top: -120px; left: -120px;
  background: var(--orange);
}
.legal-hero__mesh::after {
  bottom: -180px; right: -120px;
  background: var(--ink);
}
.legal-hero .container { position: relative; z-index: 1; }
.legal-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--orange);
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.legal-hero__eyebrow i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.legal-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--s-4);
  max-width: 22ch;
}
.legal-hero__title em {
  font-style: normal;
  color: var(--orange);
}
.legal-hero__sub {
  color: var(--mute);
  font-size: 1.05rem;
  max-width: 56ch;
  line-height: 1.6;
}
.legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.legal-hero__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legal-hero__meta b { color: var(--ink); font-weight: 600; }

.legal-doc {
  padding: var(--s-12) 0 var(--s-20);
}
.legal-doc__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-12);
  align-items: start;
}
.legal-doc__toc {
  position: sticky;
  top: 110px;
  border-left: 1px solid var(--line);
  padding-left: var(--s-5);
}
.legal-doc__toc-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute);
  margin-bottom: var(--s-4);
}
.legal-doc__toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  counter-reset: toc;
}
.legal-doc__toc a {
  display: flex;
  gap: var(--s-3);
  font-size: 0.88rem;
  color: var(--ink-soft);
  transition: color var(--d-fast);
  line-height: 1.4;
}
.legal-doc__toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--mute);
  flex-shrink: 0;
  padding-top: 2px;
}
.legal-doc__toc a:hover { color: var(--orange); }

.legal-doc__article {
  max-width: 70ch;
}
.legal-doc__section {
  padding-bottom: var(--s-10);
  margin-bottom: var(--s-10);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.legal-doc__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.legal-doc__section-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-3);
  display: block;
}
.legal-doc__section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-5);
}
.legal-doc__section h3 {
  font-size: 1.05rem;
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
  font-weight: 600;
}
.legal-doc__section p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: var(--s-4);
  max-width: 64ch;
}
.legal-doc__section a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc__section a:hover { color: var(--ink); }
.legal-doc__section ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-5);
  padding-left: var(--s-1);
}
.legal-doc__section ul li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.65;
}
.legal-doc__section ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1.5px;
  background: var(--orange);
}
.legal-doc__section ul li strong { color: var(--ink); font-weight: 600; }
.legal-info-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  background: rgba(255,255,255,0.5);
  margin: var(--s-4) 0 var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-5);
  font-size: 0.92rem;
}
.legal-info-card dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute);
  padding-top: 2px;
}
.legal-info-card dd {
  color: var(--ink);
  line-height: 1.5;
}
.legal-info-card dd a { color: var(--orange); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-3) 0 var(--s-6);
  font-size: 0.92rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}
.legal-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute);
  background: rgba(0,0,0,0.02);
  font-weight: 500;
}
.legal-table td strong { color: var(--ink); font-weight: 600; }

.legal-end {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mute);
  letter-spacing: 0.08em;
}

@media (max-width: 920px) {
  .legal-doc__layout { grid-template-columns: 1fr; }
  .legal-doc__toc {
    position: static;
    border-left: none;
    padding-left: 0;
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 600px) {
  .legal-info-card { grid-template-columns: 1fr; gap: 2px var(--s-5); padding: var(--s-4); }
  .legal-info-card dt { padding-top: var(--s-3); }
  .legal-info-card dt:first-child { padding-top: 0; }
}

/* =====================================================================
   RÉALISATIONS — Sites web slider (8 cartes clients, horizontal scroll)
   ===================================================================== */
.sites-slider-wrap {
  position: relative;
  margin-top: var(--s-7);
}
.sites-slider {
  display: flex;
  gap: clamp(28px, 3vw, 48px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--s-3) 0 var(--s-6);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  perspective: 1400px;
  /* Full-bleed : on sort du .container pour que le slider aille jusqu'aux bords
     du viewport. Le padding interne aligne le 1er card avec la grille tout
     en laissant un trail à droite pour que la dernière card respire. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  --sites-edge-px: max(var(--container-x), calc((100vw - var(--max-w)) / 2 + var(--container-x)));
  padding-left: var(--sites-edge-px);
  padding-right: var(--sites-edge-px);
  /* scroll-snap doit respecter le padding gauche (sinon 1re card collée au bord) */
  scroll-padding-left: var(--sites-edge-px);
  /* Fade doux à droite pour signaler la possibilité de scroll */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
}
.sites-slider::-webkit-scrollbar { height: 6px; }
.sites-slider::-webkit-scrollbar-track { background: var(--linen); border-radius: 3px; }
.sites-slider::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }
.sites-slider .realisation {
  flex: none;
  width: clamp(340px, 38vw, 540px);
  scroll-snap-align: start;
  transform: none !important;
}
.sites-slider .realisation__index {
  font-size: clamp(6rem, 9vw, 11rem);
}
.sites-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.sites-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s var(--ease-out-expo), color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out-expo), box-shadow 0.3s, opacity 0.3s;
}
.sites-nav__btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(255, 107, 26, 0.55);
}
.sites-nav__btn:active { transform: translateY(0); }
.sites-nav__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 640px) {
  .sites-slider .realisation { width: 86vw; }
  .sites-nav { display: none; }
}