/* ==========================================================================
   AdWaves — Refonte (positionnement « système d'acquisition de devis »)
   Construit PAR-DESSUS style.css : on garde l'ADN visuel de base
   (crème + orange + sections sombres, mêmes typos) et on ajoute les
   nouvelles sections + une palette disciplinée (orange = action, vert = preuve).
   L'original index.html / style.css restent inchangés.
   ========================================================================== */
@import url("style.css");

:root {
  /* couleur « succès / preuve » ajoutée à la palette existante */
  --green: #1F9D55;
  --green-soft: #E7F6EE;
  --slate: #5B6470;
  /* rayon & ombre uniques (discipline visuelle) */
  --radius: 24px;
  --shadow-soft: 0 18px 50px rgba(16, 16, 16, 0.10);
}

/* respect du mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== Icônes uniformes : coche verte / croix grise ===== */
.ico { flex-shrink: 0; width: 20px; height: 20px; display: inline-block; position: relative; }
.ico::before,
.ico::after { content: ""; position: absolute; }
.ico-check {
  border-radius: 50%;
  background: var(--green-soft);
}
.ico-check::before {
  left: 50%; top: 45%; width: 4px; height: 8px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ico-cross::before,
.ico-cross::after {
  left: 9px; top: 3px; width: 2px; height: 14px;
  background: #AEB4BD; border-radius: 2px;
}
.ico-cross::before { transform: rotate(45deg); }
.ico-cross::after { transform: rotate(-45deg); }
.compare-card--dark .ico-check { background: rgba(31, 157, 85, 0.22); }

/* ==========================================================================
   Navigation : logo centré
   ========================================================================== */
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 120px 0;
  max-width: 1440px;
  margin: 0 auto;
}
.nav__logo { text-align: center; }

/* ==========================================================================
   Hero : badge de réassurance visible partout
   ========================================================================== */
.hero { padding: 96px 0 110px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.10);
  border-radius: 50px;
  box-shadow: var(--shadow-soft);
}
.hero__badge p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--off-black);
}

/* ==========================================================================
   Bandeau de preuve immédiate (remplace l'ancienne section stats)
   ========================================================================== */
.proof {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.proof__quote {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: #fff;
  border: 1px dashed rgba(0, 0, 0, 0.30);
  border-radius: 50px;
}
.proof__avatar {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.proof__quote p {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
}
.proof__stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.proof-stat {
  text-align: center;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(16, 16, 16, 0.08);
  background: #fff;
}
.proof-stat__number { display: inline-flex; align-items: flex-start; }
.proof-stat__value {
  font-family: var(--font-alt);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1em;
  color: var(--ink);
}
.proof-stat__suffix {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--orange);
  padding-top: 4px;
}
.proof-stat__label {
  margin-top: 10px;
  font-family: var(--font-alt);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
}

/* ==========================================================================
   Section « Le constat » — cartes posées directement sur le fond crème
   (pas de wrapper sombre : on garde l'ADN crème + orange, accent vert/preuve)
   ========================================================================== */
@keyframes brokenFlow {
  from { background-position: 0 0; }
  to { background-position: 0 20px; }
}
@keyframes missedCall {
  0%, 76%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  80% { transform: translate3d(-1.5px, 0, 0) rotate(-3deg); }
  84% { transform: translate3d(1.5px, 0, 0) rotate(3deg); }
  88% { transform: translate3d(-1px, 0, 0) rotate(-2deg); }
  92% { transform: translate3d(1px, 0, 0) rotate(2deg); }
}

.eyebrow--light { color: #fff; opacity: .7; }

.problem {
  margin: 130px 120px 0;
  padding: 0;
}
.constat-head {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.problem__title {
  margin: 18px auto 0;
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.05em;
  letter-spacing: -0.03em;
  color: var(--off-black);
  text-align: center;
}

.constat-grid {
  margin: 56px auto 0;
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.26fr) minmax(0, 0.92fr);
  gap: 24px;
  align-items: stretch;
}

.constat-card {
  min-height: 548px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 1px solid rgba(16, 16, 16, 0.08);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.constat-card--platform {
  transform: translateY(-14px);
  box-shadow: 0 28px 70px rgba(16, 16, 16, 0.16);
  padding-inline: 30px;
}
/* préserve le décalage de la carte centrale malgré l'animation reveal */
.constat-card--platform.reveal { transform: translateY(20px); }
.constat-card--platform.reveal.visible { transform: translateY(-14px); }

.constat-card h3 {
  margin-top: 0;
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--off-black);
}
.constat-card p {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--slate);
}

/* ----- visuels internes (mini-écrans) ----- */
.mini-graphic {
  margin-top: 30px;
  min-height: 270px;
  border-radius: 22px;
  overflow: hidden;
  color: var(--off-black);
}
.referral-graphic,
.search-graphic {
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: 0 12px 32px rgba(16, 16, 16, 0.06);
}

/* visuel 01 — bouche-à-oreille qui se rompt */
.referral-line {
  display: grid;
  gap: 10px;
  overflow: visible;
  padding: 2px 10px 10px 0;
}
.bubble {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.bubble--active {
  background: var(--green-soft);
  color: var(--green);
}
.bubble--faded {
  width: 86%;
  background: var(--gray-section);
  color: #48505a;
}
.bubble--empty {
  position: relative;
  width: 68%;
  border: 1px dashed rgba(16, 16, 16, 0.18);
  color: #9aa1aa;
  background: #fff;
}
.bubble--empty::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(255, 79, 1, 0.28);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}
.connector {
  width: 2px;
  height: 22px;
  margin-left: 24px;
  background: #dce2e8;
}
.connector--broken {
  height: 24px;
  background: repeating-linear-gradient(180deg, #ff4f01 0 5px, transparent 5px 10px);
  animation: brokenFlow 1.35s linear infinite;
  will-change: background-position;
}
.phone-signal {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: var(--gray-section);
}
.phone-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 16, 16, 0.08);
  animation: missedCall 4.6s ease-in-out infinite;
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform;
}
.phone-icon span {
  width: 18px;
  height: 28px;
  border: 3px solid #c8ced6;
  border-radius: 8px;
  position: relative;
}
.phone-icon span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c8ced6;
  transform: translateX(-50%);
}
.phone-signal strong {
  font-family: var(--font-title);
  font-size: 18px;
  line-height: 1;
  color: var(--off-black);
}
.phone-signal p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--slate);
}

/* visuel 02 — la course au prix (mini-écran sombre = data-viz) */
.platform-graphic {
  padding: 22px;
  background: linear-gradient(180deg, #101010 0%, #262626 100%);
  color: #fff;
  box-shadow: 0 24px 58px rgba(255, 79, 1, 0.18);
}
.price-race-head span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 79, 1, 0.18);
  color: #ff8a55;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.price-race-head strong {
  display: block;
  margin-top: 12px;
  font-family: var(--font-title);
  font-size: 25px;
  line-height: 0.96;
  letter-spacing: -0.045em;
}
.price-race-chart {
  position: relative;
  height: 246px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 36px 0 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.price-race-line {
  position: absolute;
  inset: 8px 0 44px;
  width: 100%;
  height: auto;
  z-index: 1; /* au-dessus des barres, sous les chiffres (z-index:1, plus loin dans le DOM) */
  pointer-events: none;
  opacity: 0.82;
}
.price-race-line path {
  fill: none;
  stroke: rgba(255, 120, 65, 0.86);
  stroke-width: 3;
  stroke-dasharray: 7 10;
  stroke-linecap: round;
}
.price-step {
  --bar-height: 100px;
  position: relative;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
}
.price-step i {
  grid-row: 1;
  align-self: end;
  width: min(54px, 100%);
  height: var(--bar-height);
  border-radius: 8px 8px 4px 4px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
}
.price-step i::before {
  content: "";
  position: absolute;
  top: -29px; /* pastille au-dessus du pilier, avec le prix */
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d5cec9;
  transform: translateX(-50%);
}
.price-step strong {
  position: absolute;
  bottom: calc(var(--bar-height) + 5px);
  z-index: 1;
  font-family: var(--font-title);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #fff;
}
.price-step span {
  grid-row: 2;
  margin-top: 10px;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}
.price-step--one { --bar-height: 126px; }
.price-step--you { --bar-height: 92px; }
.price-step--three { --bar-height: 108px; }
.price-step--four { --bar-height: 72px; }
.price-step--winner { --bar-height: 56px; }
.price-step--you i {
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 2px rgba(255, 120, 65, 0.78);
}
.price-step--you i::before { background: #ffd0bd; }
.price-step--you span { color: #ff7841; }
.price-step--winner i {
  background: var(--orange);
  box-shadow: 0 14px 30px rgba(255, 79, 1, 0.25);
}
.price-step--winner i::before { background: #ffd0bd; }
.price-step--winner span { color: #ff7841; }
.price-step--winner::after {
  content: "Gagnant";
  position: absolute;
  right: 0;
  bottom: -19px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 79, 1, 0.18);
  color: #ff7841;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.price-step--winner strong {
  bottom: calc(var(--bar-height) + 3px);
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff;
  color: var(--orange);
  box-shadow: 0 10px 24px rgba(255, 79, 1, 0.26);
}
.price-race-footer {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  padding-top: 14px;
}
.price-race-footer span,
.price-race-footer b {
  font-family: var(--font-title);
  font-size: 15px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.price-race-footer span { color: rgba(255, 255, 255, 0.64); }
.price-race-footer span strong { color: #fff; }
.price-race-footer b {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 79, 1, 0.14);
  color: #ff7841;
  font-size: 18px;
  line-height: 1.02;
}

/* visuel 03 — recherche Google où le site est introuvable */
.search-logo {
  font-family: var(--font-alt);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.08em;
}
.search-logo span:nth-child(1),
.search-logo span:nth-child(4) { color: #4285F4; }
.search-logo span:nth-child(2),
.search-logo span:nth-child(6) { color: #EA4335; }
.search-logo span:nth-child(3) { color: #FBBC05; }
.search-logo span:nth-child(5) { color: #34A853; }
.search-bar {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 8px 8px 8px 18px;
  border: 1px solid rgba(16, 16, 16, 0.10);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(16, 16, 16, 0.08);
}
.search-bar span {
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #3d444c;
}
.search-bar strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #4285F4;
  color: #fff;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
}
.search-results {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding-right: 8px;
}
.search-result {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(16, 16, 16, 0.10);
  background: #fff;
}
.search-result span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EEF4FF;
  color: #4285F4;
  font-family: var(--font-alt);
  font-weight: 800;
}
.search-result p {
  margin: 0;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--off-black);
}
.search-result--lost {
  border-style: dashed;
  opacity: 0.5;
}
.search-result--lost span {
  color: #9aa1aa;
  background: #F1F2F4;
}

/* ==========================================================================
   « Le constat » — animations d'entrée (au scroll) + micro-boucles
   Les états initiaux cachés sont conditionnés par .reveal (ajoutée par le JS
   uniquement si le mouvement est autorisé) : sans JS / en reduced-motion,
   tout reste visible. Le déclencheur est .visible (système d'observer existant).
   Courbes : cubic-bezier(.22,.61,.36,1) en entrée, ease-in-out en boucle.
   ========================================================================== */

/* --- cascade des 3 cartes (stagger) --- */
.constat-grid .constat-card:nth-child(2).reveal { transition-delay: .1s; }
.constat-grid .constat-card:nth-child(3).reveal { transition-delay: .2s; }

@keyframes constat-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@keyframes constat-pulse-fail {
  0%, 100% { opacity: 0; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes win-glow {
  0%, 100% { box-shadow: 0 14px 30px rgba(255, 79, 1, .25); }
  50% { box-shadow: 0 14px 42px rgba(255, 79, 1, .58); }
}
@keyframes constat-shake {
  0%, 86%, 100% { transform: translateX(0); }
  89% { transform: translateX(-3px); }
  92% { transform: translateX(3px); }
  95% { transform: translateX(-2px); }
  98% { transform: translateX(1px); }
}
@keyframes constat-btn-press {
  0%, 80%, 100% { transform: scale(1); }
  88% { transform: scale(.94); }
}
@keyframes constat-q-blink {
  0%, 100% { opacity: .4; }
  50% { opacity: .85; }
}

/* =========================== Carte 01 — bouche-à-oreille ============= */
/* états initiaux (entrée) */
.constat-card--referral.reveal .referral-line { position: relative; }
.constat-card--referral.reveal .bubble {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.constat-card--referral.reveal .connector {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s ease;
}
.constat-card--referral.reveal .phone-signal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
/* déclenchement + stagger haut → bas */
.constat-card--referral.visible .bubble { opacity: 1; transform: none; }
.constat-card--referral.visible .connector { transform: scaleY(1); }
.constat-card--referral.visible .phone-signal { opacity: 1; transform: none; }
.constat-card--referral.visible .bubble--active { transition-delay: .15s; }
.constat-card--referral.visible .connector:not(.connector--broken) { transition-delay: .3s; }
.constat-card--referral.visible .bubble--faded { transition-delay: .4s; }
.constat-card--referral.visible .connector--broken { transition-delay: .55s; }
.constat-card--referral.visible .bubble--empty { transition-delay: .65s; }
.constat-card--referral.visible .phone-signal { transition-delay: .8s; }
/* boucles (démarrent après l'entrée) */
.constat-card--referral.visible .bubble--active {
  animation: constat-breathe 3.4s ease-in-out 1.2s infinite;
}
.constat-card--referral.visible .bubble--empty::after {
  animation: constat-pulse-fail 2.6s ease-in-out 1.3s infinite;
}

/* =========================== Carte 02 — la course au prix =========== */
/* barres : poussent depuis le bas, stagger gauche → droite */
.constat-card--platform.reveal .price-step i {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.constat-card--platform.reveal .price-step--winner i {
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); /* léger overshoot */
}
.constat-card--platform.visible .price-step i { transform: scaleY(1); }
.constat-card--platform.visible .price-step--one i { transition-delay: .1s; }
.constat-card--platform.visible .price-step--three i { transition-delay: .22s; }
.constat-card--platform.visible .price-step--you i { transition-delay: .34s; }
.constat-card--platform.visible .price-step--four i { transition-delay: .46s; }
.constat-card--platform.visible .price-step--winner i { transition-delay: .58s; }
/* ligne « course au prix » tracée de gauche à droite (garde le pointillé) */
.constat-card--platform.reveal .price-race-line {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s ease .7s;
}
.constat-card--platform.visible .price-race-line { clip-path: inset(0 0 0 0); }
/* badge « Gagnant » qui tombe en place */
.constat-card--platform.reveal .price-step--winner::after {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.constat-card--platform.visible .price-step--winner::after {
  opacity: 1;
  transform: none;
  transition-delay: 1s;
}
/* bandeau rouge qui glisse depuis le bas */
.constat-card--platform.reveal .price-race-footer b {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.constat-card--platform.visible .price-race-footer b {
  opacity: 1;
  transform: none;
  transition-delay: 1.2s;
}
/* boucles : halo du gagnant + shake déçu de « Vous » */
.constat-card--platform.visible .price-step--winner i {
  animation: win-glow 2.2s ease-in-out 1.5s infinite;
}
.constat-card--platform.visible .price-step--you strong {
  animation: constat-shake 4.2s ease-in-out 1.8s infinite;
}

/* =========================== Carte 03 — recherche Google ============ */
.constat-card--site.reveal .search-logo,
.constat-card--site.reveal .search-bar {
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.constat-card--site.reveal .search-result {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.constat-card--site.visible .search-logo,
.constat-card--site.visible .search-bar { opacity: 1; transform: none; }
.constat-card--site.visible .search-bar { transition-delay: .12s; }
/* résultats en cascade ; votre site arrive en dernier et reste en retrait */
.constat-card--site.visible .search-result { opacity: 1; transform: none; }
.constat-card--site.visible .search-result:nth-child(1) { transition-delay: .45s; }
.constat-card--site.visible .search-result:nth-child(2) { transition-delay: .57s; }
.constat-card--site.visible .search-result:nth-child(3) { transition-delay: .69s; }
.constat-card--site.visible .search-result--lost { opacity: .5; transition-delay: .85s; }
/* boucles : bouton qui s'enfonce + « ? » qui clignote */
.constat-card--site.visible .search-bar strong {
  animation: constat-btn-press 4s ease-in-out 1.4s infinite;
}
.constat-card--site.visible .search-result--lost span {
  animation: constat-q-blink 2s ease-in-out 1.4s infinite;
}
/* teasing au survol : votre site remonte et reprend des couleurs */
.constat-card--site .search-result--lost {
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1), border-color .4s ease;
}
.constat-card--site:hover .search-result--lost {
  opacity: 1;
  border-style: solid;
  border-color: rgba(66, 133, 244, .35);
  transform: translateY(-4px);
}
.constat-card--site:hover .search-result--lost span {
  color: #4285F4;
  background: #EEF4FF;
  animation: none;
}

/* ==========================================================================
   Section solution / système
   ========================================================================== */
.system { padding: 130px 120px 0; text-align: center; }
.system__title {
  margin: 18px auto 0;
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1em;
  color: var(--off-black);
  max-width: 760px;
}
.system__subtitle {
  margin: 18px auto 0;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.35em;
  color: var(--off-black);
  max-width: 680px;
}
.system__head { max-width: 760px; margin: 0 auto; }

/* --- Empilement de cartes au scroll (effet « stack » / sticky) --- */
.stack {
  margin: 64px auto 0;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* espace bas pour laisser la dernière carte se détacher proprement */
  padding-bottom: 10px;
}
.stack-card {
  position: sticky;
  top: 120px;
  min-height: 58vh;
  display: flex;
  border-radius: 30px;
  border: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  background: #fff;
  transform-origin: center top;
  will-change: transform;
}
/* léger décalage du point d'accroche pour révéler les cartes empilées dessous */
.stack-card--site  { top: 110px; }
.stack-card--fiche { top: 130px; }
.stack-card--avis  { top: 150px; }
.stack-card--fiche { background: var(--grad-dark-322); border-color: rgba(255,255,255,0.10); }
.stack-card--avis  { background: var(--orange); border-color: transparent; }
.stack-card__inner {
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 48px;
  text-align: left;
  width: 100%;
}
.stack-card__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stack-card__num {
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.stack-card--fiche .stack-card__num { color: #fff; opacity: .65; }
.stack-card--avis  .stack-card__num { color: #fff; opacity: .8; }
.stack-card__title {
  font-family: var(--font-title);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08em;
  color: var(--off-black);
}
.stack-card--fiche .stack-card__title,
.stack-card--avis  .stack-card__title { color: #fff; }
.stack-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55em;
  color: var(--slate);
  max-width: 42ch;
}
.stack-card--fiche .stack-card__desc { color: rgba(255,255,255,0.78); }
.stack-card--avis  .stack-card__desc { color: rgba(255,255,255,0.92); }
.stack-card__proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
}
.stack-card__proof li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 12px;
  border-radius: 50px;
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 600;
  color: var(--off-black);
  background: var(--green-soft);
}
.stack-card__proof li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
  flex-shrink: 0;
}
.stack-card--fiche .stack-card__proof li,
.stack-card--avis  .stack-card__proof li {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* --- Visuels des cartes --- */
.stack-card__visual { min-width: 0; }

/* Animation premium de la carte 02 : fiche Google */
.stack-card--fiche.fiche-motion .stack-card__num,
.stack-card--fiche.fiche-motion .stack-card__title,
.stack-card--fiche.fiche-motion .stack-card__desc,
.stack-card--fiche.fiche-motion .stack-card__proof li {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .52s cubic-bezier(.22, 1, .36, 1),
    transform .52s cubic-bezier(.22, 1, .36, 1);
}
.stack-card--fiche.fiche-motion.is-visible .stack-card__num,
.stack-card--fiche.fiche-motion.is-visible .stack-card__title,
.stack-card--fiche.fiche-motion.is-visible .stack-card__desc,
.stack-card--fiche.fiche-motion.is-visible .stack-card__proof li {
  opacity: 1;
  transform: translateY(0);
}
.stack-card--fiche.fiche-motion.is-visible .stack-card__num { transition-delay: .04s; }
.stack-card--fiche.fiche-motion.is-visible .stack-card__title { transition-delay: .16s; }
.stack-card--fiche.fiche-motion.is-visible .stack-card__desc { transition-delay: .30s; }
.stack-card--fiche.fiche-motion.is-visible .stack-card__proof li:nth-child(1) { transition-delay: .46s; }
.stack-card--fiche.fiche-motion.is-visible .stack-card__proof li:nth-child(2) { transition-delay: .56s; }

.stack-card--fiche.fiche-motion .gmock {
  opacity: 0;
  transform: translateY(22px) scale(.965);
  transform-origin: center bottom;
  transition:
    opacity .68s cubic-bezier(.22, 1, .36, 1),
    transform .68s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.stack-card--fiche.fiche-motion.is-visible .gmock {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: .26s;
}

/* Cadre navigateur (cartes Site & Avis) */
.browser-mock {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16,16,16,0.28);
  border: 1px solid rgba(16,16,16,0.08);
}
.browser-mock__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #f1f1f1;
  border-bottom: 1px solid rgba(16,16,16,0.07);
}
.browser-mock__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d6d6d6;
}
.browser-mock__dot:nth-child(1) { background: #ff5f57; }
.browser-mock__dot:nth-child(2) { background: #febc2e; }
.browser-mock__dot:nth-child(3) { background: #28c840; }
.browser-mock__url {
  margin-left: 10px;
  flex: 1;
  padding: 5px 12px;
  background: #fff;
  border-radius: 50px;
  font-family: var(--font-alt);
  font-size: 12px;
  color: var(--slate);
}
.browser-mock img {
  display: block;
  width: 100%;
  height: auto;
}
.browser-mock--plain { border: none; }

/* Recréation Google + map pack (carte Fiche Google) */
.gmock {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16,16,16,0.30);
  font-family: var(--font-alt);
  /* même largeur que les .browser-mock des autres cartes : remplit la colonne visuelle */
  width: 100%;
}
.gmock__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid #e4e4e4;
  margin: 16px 16px 0;
  border-radius: 50px;
  box-shadow: 0 1px 4px rgba(16,16,16,0.06);
  transition:
    border-color .28s ease,
    box-shadow .28s ease;
}
.gmock__query {
  flex: 1;
  font-size: 15px;
  color: #202124;
  min-height: 1.25em;
}
.fiche-motion.is-typing .gmock__bar {
  border-color: rgba(255,79,1,.30);
  box-shadow: 0 8px 20px rgba(16,16,16,0.08), 0 0 0 3px rgba(255,79,1,.08);
}
.fiche-motion.is-typing .gmock__query::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  background: #202124;
  vertical-align: -2px;
  animation: gmockCaret .82s steps(1) infinite;
}
.gmock__map {
  position: relative;
  height: 150px;
  margin: 14px 16px 0;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 30%, #d8efe0 0 22%, transparent 22%),
    radial-gradient(circle at 20% 80%, #d8efe0 0 18%, transparent 18%),
    #eaf3ef;
}
.gmock__road {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 0 1px #dde6e1;
}
.gmock__road--1 { top: 38%; left: -5%; width: 110%; height: 7px; transform: rotate(-7deg); }
.gmock__road--2 { top: -10%; left: 58%; width: 7px; height: 120%; transform: rotate(9deg); }
.gmock__road--3 { top: 64%; left: -5%; width: 80%; height: 6px; transform: rotate(4deg); }
.gmock__pin {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #ea4335;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(16,16,16,0.3);
}
.gmock__pin--featured {
  top: 28%; left: 60%;
  background: var(--orange);
  width: 34px; height: 34px;
  font-size: 14px;
  z-index: 2;
}
.gmock__pin--2 { top: 58%; left: 26%; }
.gmock__pin--3 { top: 66%; left: 76%; }
.gmock__results { padding: 12px 16px 18px; }
.gmock__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
}
.gmock__result + .gmock__result { border-top: 1px solid #f0f0f0; border-radius: 0; }
.gmock__result--featured {
  background: #fff5f0;
  border: 1px solid rgba(255,79,1,0.22);
}
.gmock__result--featured + .gmock__result { border-top: none; }
.gmock__rank {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gmock__result--featured .gmock__rank { background: var(--orange); color: #fff; }
.gmock__info { flex: 1; min-width: 0; }
.gmock__name {
  font-size: 14px;
  font-weight: 600;
  color: #1a0dab;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmock__meta { font-size: 12.5px; color: #5f6368; margin: 0; }
.gmock__meta b { color: #202124; }
.gmock__stars { color: #fbbc04; letter-spacing: -1px; }
.gmock__badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.stack-card--fiche.fiche-motion .gmock__map,
.stack-card--fiche.fiche-motion .gmock__result {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .48s cubic-bezier(.22, 1, .36, 1),
    transform .48s cubic-bezier(.22, 1, .36, 1),
    border-color .48s ease,
    box-shadow .48s ease,
    background-color .48s ease;
}
.stack-card--fiche.fiche-motion.is-visible .gmock__map {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.30s;
}
.stack-card--fiche.fiche-motion .gmock__road {
  opacity: 0;
  transform-origin: left center;
  transition:
    opacity .36s ease,
    transform .56s cubic-bezier(.22, 1, .36, 1);
}
.stack-card--fiche.fiche-motion .gmock__road--1 { transform: rotate(-7deg) scaleX(.15); }
.stack-card--fiche.fiche-motion .gmock__road--2 { transform: rotate(9deg) scaleY(.15); transform-origin: top center; }
.stack-card--fiche.fiche-motion .gmock__road--3 { transform: rotate(4deg) scaleX(.15); }
.stack-card--fiche.fiche-motion.is-visible .gmock__road { opacity: 1; }
.stack-card--fiche.fiche-motion.is-visible .gmock__road--1 { transform: rotate(-7deg) scaleX(1); transition-delay: 1.48s; }
.stack-card--fiche.fiche-motion.is-visible .gmock__road--2 { transform: rotate(9deg) scaleY(1); transition-delay: 1.58s; }
.stack-card--fiche.fiche-motion.is-visible .gmock__road--3 { transform: rotate(4deg) scaleX(1); transition-delay: 1.68s; }

.stack-card--fiche.fiche-motion .gmock__pin {
  opacity: 0;
  transform: translateY(12px) scale(.72);
  transition:
    opacity .34s ease,
    transform .46s cubic-bezier(.22, 1, .36, 1);
}
.stack-card--fiche.fiche-motion.is-visible .gmock__pin--2 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 1.78s;
}
.stack-card--fiche.fiche-motion.is-visible .gmock__pin--3 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 1.92s;
}
.stack-card--fiche.fiche-motion.is-visible .gmock__pin--featured {
  opacity: 1;
  animation: gmockPinBounce .62s cubic-bezier(.2, .86, .26, 1.22) 2.16s both;
}

.stack-card--fiche.fiche-motion.is-visible .gmock__result:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.88s;
}
.stack-card--fiche.fiche-motion.is-visible .gmock__result:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.02s;
}
.stack-card--fiche.fiche-motion.is-visible .gmock__result--featured {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255,79,1,.34);
  box-shadow: 0 10px 28px rgba(255,79,1,.13), inset 0 0 0 1px rgba(255,79,1,.08);
  transition-delay: 2.30s;
}
.stack-card--fiche.fiche-motion .gmock__badge {
  opacity: 0;
  transform: scale(.78);
  transition:
    opacity .28s ease,
    transform .42s cubic-bezier(.2, .86, .26, 1.22);
}
.stack-card--fiche.fiche-motion.is-visible .gmock__badge {
  opacity: 1;
  transform: scale(1);
  transition-delay: 2.58s;
}

@keyframes gmockCaret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes gmockPinBounce {
  0% { opacity: 0; transform: translateY(14px) scale(.62); }
  58% { opacity: 1; transform: translateY(-5px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Résultats réels — preuve premium
   (carte principale « système complet » + colonne Ramzi / synthèse)
   ========================================================================== */
.proof { padding: 130px 120px 0; }
.proof__head { max-width: 840px; margin: 0 auto; text-align: center; }
.proof__title {
  margin: 18px auto 0;
  font-family: var(--font-title);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05em;
  color: var(--off-black);
  max-width: 840px;
}
.proof__subtitle {
  margin: 20px auto 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.45em;
  color: var(--slate);
  max-width: 680px;
}
.proof__grid {
  margin: 64px auto 0;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Badges partagés */
.proof-badge {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 50px;
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.proof-badge--dark   { background: var(--off-black); color: #fff; }
.proof-badge--orange { background: var(--orange); color: #fff; }

/* ----- Carte principale (système complet — Djeazon) ----- */
.proof-main {
  padding: 36px;
  border-radius: 32px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.07);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.proof-main__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}
.proof-main__label {
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
}
.proof-main__title {
  margin-top: 14px;
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.22em;
  color: var(--off-black);
  max-width: 34ch;
}

/* Composition visuelle : slider avant/après du site + chip « fiche Google » */
.proof-compo {
  position: relative;
  margin: 30px 0 0;
}
.proof-compo__chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(16, 16, 16, 0.18);
  font-family: var(--font-alt);
  font-size: 13px;
  color: var(--off-black);
  white-space: nowrap;
}
.proof-compo__chip img { display: block; height: 13px; width: auto; }
.proof-compo__chip strong { font-weight: 700; }

/* Slider avant/après (transformation du site ACDJ) */
.acdj-slider {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--gray-section);
  border-radius: 20px;
  border: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: 0 22px 54px rgba(16, 16, 16, 0.13);
  cursor: ew-resize;
  overflow: hidden;
  position: relative;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.acdj-slider * { -webkit-user-select: none; user-select: none; }
.acdj-img {
  display: block;
  position: absolute; top: 0; left: 0;
  height: 100%; width: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  -webkit-user-drag: none;
}
.acdj-after { z-index: 1; }
.acdj-before-wrap {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 0;
  overflow: hidden;
  z-index: 2;
}
.acdj-before-wrap .acdj-img { max-width: none; }
.acdj-before-wrap.is-animating,
.acdj-handle.is-animating { transition: width 400ms ease-out, left 400ms ease-out; }
.acdj-handle {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 4px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}
.acdj-handle-line { width: 2px; height: 100%; margin: 0 auto; background: #fff; }
.acdj-handle-button {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 50%;
  cursor: ew-resize;
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.acdj-label {
  position: absolute; top: 16px;
  padding: 6px 12px;
  border-radius: 50px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-family: var(--font-alt);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; line-height: 1;
  pointer-events: none;
  z-index: 5;
}
.acdj-label-left { left: 16px; }
.acdj-label-right { right: 16px; }

/* Trois blocs de résultats */
.proof-stats {
  list-style: none;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.proof-stat {
  padding: 16px;
  border-radius: 18px;
  background: var(--cream);
  border: 1px solid rgba(16, 16, 16, 0.06);
}
.proof-stat__k {
  display: block;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--off-black);
}
.proof-stat__v {
  display: block;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4em;
  color: var(--slate);
}
.proof-main__context {
  margin: 22px 0 0;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(16, 16, 16, 0.08);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55em;
  color: var(--slate);
}
.proof-main__context strong { color: var(--off-black); font-weight: 600; }

/* ----- Colonne droite (deux cartes empilées) ----- */
.proof-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.proof-card {
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.07);
  box-shadow: var(--shadow-soft);
}
.proof-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.proof-card__label {
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
}
.proof-card__title {
  margin-top: 16px;
  font-family: var(--font-title);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25em;
  color: var(--off-black);
}
.proof-card__media {
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  justify-content: center;
  padding: 14px;
}
.proof-card__media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  border-radius: 12px;
}
.proof-card__text {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55em;
  color: var(--slate);
}
.proof-card__text strong { color: var(--off-black); font-weight: 600; }

/* Carte noire de synthèse */
.proof-card--dark {
  background: var(--grad-dark-180);
  border-color: transparent;
}
.proof-card__label--light { color: var(--orange); }
.proof-card__title--light { color: #fff; }
.proof-arrow { color: var(--orange); font-weight: 700; padding: 0 2px; }
.proof-pillars {
  list-style: none;
  margin: 22px 0 0;
}
.proof-pillars li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.proof-pillars li:first-child { border-top: none; padding-top: 0; }
.proof-pillars__k {
  flex-shrink: 0;
  min-width: 108px;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.proof-pillars__v {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4em;
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   Le processus (sections plein écran qui défilent horizontalement)
   N = 5 panneaux → height = N*100vh pour piloter le translateX au scroll
   ========================================================================== */
/* padding:0 obligatoire : style.css définit déjà un .process (section du site
   d'origine) avec padding 100px 120px 92px → sinon le pin est inséré et laisse
   des bandes crème sur les côtés. */
.process { position: relative; height: 760vh; margin-top: 130px; padding: 0; }
.process__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.process__track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.process-panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 120px;
  overflow: hidden;
}
.process-panel--light  { background: var(--cream); }
.process-panel--dark   { background: var(--grad-dark-322); }
.process-panel--orange { background: var(--orange); }
.process-panel__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: left;
}
/* panneau avec visuel : texte à gauche, image décalée vers la droite */
.process-panel--media { padding-right: 56px; }
.process-panel__inner--split {
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 48px;
  align-items: center;
}
.process-panel__col { min-width: 0; }
.process-panel__media { margin: 0; }
.process-panel__media img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: var(--shadow-soft);
}
.process-panel__media-cap {
  margin-top: 14px;
  font-family: var(--font-alt);
  font-size: 13px;
  color: var(--slate);
}
.process-panel--dark .process-panel__media-cap,
.process-panel--orange .process-panel__media-cap { color: rgba(255, 255, 255, 0.9); }
/* sur fond orange, une bordure claire flatte mieux la capture */
.process-panel--orange .process-panel__media img { border-color: rgba(255, 255, 255, 0.35); }
/* mockup d'appareil (fond transparent) : uniquement le PNG, rien derrière */
.process-panel__media--device img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.process-panel__eyebrow {
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.process-panel--dark .process-panel__eyebrow   { color: #fff; opacity: .8; }
.process-panel--orange .process-panel__eyebrow  { color: #fff; opacity: .85; }
.process-panel__title {
  margin-top: 18px;
  font-family: var(--font-title);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02em;
  color: var(--off-black);
}
.process-panel--dark .process-panel__title,
.process-panel--orange .process-panel__title { color: #fff; }
.process-panel__text {
  margin-top: 22px;
  max-width: 560px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5em;
  color: var(--slate);
}
.process-panel--dark .process-panel__text   { color: rgba(255, 255, 255, 0.75); }
.process-panel--orange .process-panel__text { color: rgba(255, 255, 255, 0.92); }
/* gros numéro filigrane */
.process-panel__ghost {
  position: absolute;
  right: 4%;
  bottom: -6%;
  font-family: var(--font-title);
  font-size: 40vh;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(16, 16, 16, 0.05);
  pointer-events: none;
  user-select: none;
}
.process-panel--dark .process-panel__ghost   { color: rgba(255, 255, 255, 0.06); }
.process-panel--orange .process-panel__ghost { color: rgba(255, 255, 255, 0.14); }
/* HUD persistant : libellé + barre de progression + compteur */
.process__hud {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(16, 16, 16, 0.06);
  box-shadow: var(--shadow-soft);
}
.process__hud-label {
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--off-black);
  white-space: nowrap;
}
.process__hud-count {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  color: var(--off-black);
  white-space: nowrap;
}
/* mouvement réduit : pas de pin ni de translate → scroll horizontal natif */
@media (prefers-reduced-motion: reduce) {
  .process { height: auto; }
  .process__pin {
    position: static; height: auto;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
  .process__track { transform: none !important; height: auto; }
  .process-panel { height: auto; min-height: 70vh; scroll-snap-align: center; }
  .process__hud { display: none; }
}

/* ==========================================================================
   Calculateur de pertes (registre sombre / contraste)
   ========================================================================== */
.proc--cal .process { display: none; }
.proc--scroll .process-cal { display: none; }

.calc--side .booking-cmd { display: none; }
.calc--split .calc__booking { display: none; }
.calc--split .calc__panel {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1140px;
}
.calc--split .calc__left {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 24px;
}

.test-switch {
  position: fixed;
  left: 18px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #242424;
  box-shadow: 0 10px 28px rgba(16, 16, 16, 0.28);
}
.test-switch b { color: #FFB089; }
.proc-switch { bottom: 18px; }
.calc-switch { bottom: 66px; }

.calc {
  margin: 130px 120px 0;
  padding: 80px 60px;
  background: var(--grad-dark-180);
  border-radius: 60px;
  text-align: center;
}
.calc__head { max-width: 720px; margin: 0 auto; }
.calc__title {
  margin: 22px auto 0;
  font-family: var(--font-title);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05em;
  letter-spacing: -0.03em;
  color: #fff;
}
.calc__subtitle {
  margin: 16px auto 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.45em;
  color: rgba(255, 255, 255, 0.72);
}
.calc__panel {
  margin: 56px auto 0;
  max-width: 1140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: stretch;
}
.calc__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.calc__controls {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  text-align: left;
}
.calc-field { display: flex; flex-direction: column; gap: 12px; }
.calc-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc-field__label {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.80);
}
.calc-field__value {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid #fff;
  cursor: pointer;
}
.calc-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid #fff;
  cursor: pointer;
}
.calc-range:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.calc-field__sub {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4em;
  color: rgba(255, 255, 255, 0.50);
  margin-top: -4px;
}

/* ----- Présence Google (choix) ----- */
.calc-field--choice { gap: 14px; }
.calc-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calc-choice { position: relative; display: block; cursor: pointer; }
.calc-choice input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.calc-choice__box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.calc-choice__title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.calc-choice__desc {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4em;
  color: rgba(255, 255, 255, 0.55);
}
.calc-choice:hover .calc-choice__box { border-color: rgba(255, 255, 255, 0.30); }
.calc-choice input:checked + .calc-choice__box {
  border-color: var(--orange);
  background: rgba(255, 255, 255, 0.07);
}
.calc-choice input:focus-visible + .calc-choice__box {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.calc__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 32px;
  border-radius: var(--radius);
  background: #fff;
}
.calc__result-label {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--slate);
}
.calc__amount {
  font-family: var(--font-alt);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1em;
  color: var(--orange);
}
.calc__result-unit {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--slate);
}
.calc__result-monthly {
  margin-top: 18px;
  max-width: 340px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5em;
  color: var(--slate);
}
.calc__result-monthly strong { color: var(--orange); font-weight: 600; }
.calc__cta { margin-top: 20px; }

/* ----- Colonne réservation Cal.com ----- */
.calc__booking {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
}
.calc-booking__title {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 600;
  color: var(--off-black);
}
.calc-booking__subtitle {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45em;
  color: var(--slate);
}
div.cal-embed {
  flex: 1;
  width: 100%;
  min-height: 620px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
div.cal-embed > cal-inline {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  max-height: inherit !important;
  border-radius: inherit;
  overflow: hidden;
}
div.cal-embed > cal-inline > iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0;
  border-radius: inherit;
}

.calc__note {
  margin: 28px auto 0;
  max-width: 620px;
  font-family: var(--font-alt);
  font-size: 12px;
  line-height: 1.5em;
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Réservation « Commandez » — section dédiée sous le calculateur
   Carte sombre : checklist à gauche, calendrier Cal.com à droite.
   Inspirée du visuel de référence, adaptée à l'ADN Adwaves (crème + orange).
   ========================================================================== */
.booking-cmd { margin: 28px 120px 0; }
.booking-cmd__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px;
  padding: 64px 60px;
  background: var(--grad-dark-180);
  border-radius: 60px;
  color: #fff;
}
.booking-cmd__left { display: flex; flex-direction: column; }
.booking-cmd__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-alt);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}
.booking-cmd__title {
  margin-top: 26px;
  font-family: var(--font-title);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.02em;
  letter-spacing: -0.03em;
  color: #fff;
}
.booking-cmd__lead {
  margin-top: 30px;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.62);
}
.booking-cmd__lists {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, minmax(68px, auto));
  grid-auto-flow: column;
  gap: 10px 18px;
}
.booking-cmd__list {
  list-style: none;
  display: contents;
}
.booking-cmd__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 68px;
  padding: 11px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.25em;
  color: rgba(255, 255, 255, 0.92);
}
.booking-cmd__item .booking-check { margin-top: 1px; }
.booking-check {
  flex-shrink: 0;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
}
.booking-check::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.booking-check--ghost { background: #fff; }
.booking-check--ghost::after { border-color: var(--ink); }
.booking-cmd__people {
  margin-top: auto;
  padding-top: 34px;
  display: grid;
  gap: 14px;
}
.booking-cmd__person {
  display: flex;
  align-items: center;
  gap: 14px;
}
.booking-cmd__person img { width: 56px; height: 56px; border-radius: 50%; }
.booking-cmd__person-name {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.booking-cmd__person-role {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* ----- Colonne calendrier ----- */
.booking-cmd__right {
  position: relative;
  border: 2px dashed rgba(255, 168, 76, 0.55);
  border-radius: 30px;
  padding: 10px;
}
.booking-cmd__ribbon {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--orange);
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.booking-cmd__cal {
  height: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 20px 14px 10px;
}
.booking-cmd__cal-title {
  margin-bottom: 12px;
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  color: var(--off-black);
}
div.cal-embed--split {
  flex: none;
  min-height: 0;
  height: clamp(640px, 70vh, 760px);
  overflow: hidden;
}

@media (max-width: 1199px) {
  .booking-cmd { margin-left: 40px; margin-right: 40px; }
  .booking-cmd__card { grid-template-columns: 1fr; gap: 36px; padding: 48px 40px; }
  .booking-cmd__title { font-size: 42px; }
}
@media (max-width: 899px) {
  .booking-cmd { margin: 24px 0 0; }
  .booking-cmd__card { padding: 32px 12px; border-radius: 32px; }
  .booking-cmd__title { font-size: 32px; }
  .booking-cmd__lists {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .booking-cmd__item { min-height: 0; }
  .booking-cmd__right { padding: 8px; border-radius: 24px; }
  .booking-cmd__ribbon {
    position: static;
    display: inline-flex;
    align-self: flex-end;
    margin: 0 0 10px;
  }
  .booking-cmd__cal {
    padding: 18px 8px 8px;
    border-radius: 18px;
  }
  .booking-cmd__cal-title {
    margin-bottom: 10px;
    font-size: 18px;
  }
  div.cal-embed--split { height: 680px; }
}

/* ==========================================================================
   Offre & prix : carte unique, one-shot + récurrent séparés
   ========================================================================== */
.pricing { padding-top: 130px; }
.pricing__lead {
  margin: 16px auto 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4em;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  max-width: 520px;
}
.pricing-card { width: 760px; align-items: stretch; text-align: left; }
.pricing-card__pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.price-block { display: flex; flex-direction: column; align-items: center; }
.price-block__amount {
  font-family: var(--font-title);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1em;
  color: var(--off-black);
}
.price-block__per { font-size: 20px; font-weight: 600; }
.price-block__unit {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--slate);
}
.price-block__plus {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 600;
  color: var(--orange);
}
.pricing-card__head { align-items: center; gap: 18px; }
.pricing-card__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}
.pricing-card__group-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 14px;
}
.pricing-card__cols ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pricing-card__cols li { display: flex; align-items: center; gap: 10px; }
.pricing-card__cols p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3em;
  color: var(--off-black);
}

/* ==========================================================================
   Offre + Réservation FUSIONNÉES — bloc unique (mode COMPACTE / .calc--merge)
   ========================================================================== */
.combo { display: none; }
.calc--merge .combo { display: block; margin: 28px 120px 0; }
/* En mode compacte, le bloc fusionné remplace l'offre ET la réservation */
.calc--merge .pricing,
.calc--merge .booking-cmd,
.calc--merge .calc__booking { display: none; }

.combo__card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 52px;
  padding: 60px 60px;
  background: var(--grad-dark-180);
  border-radius: 60px;
  color: #fff;
}
.combo__left { display: flex; flex-direction: column; }
.combo__badge { align-self: flex-start; }
.combo__title {
  margin-top: 24px;
  font-family: var(--font-title);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.03em;
  letter-spacing: -0.03em;
  color: #fff;
}
.combo__price {
  margin-top: 30px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 22px 34px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
}
.combo__features {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
}
.combo__group-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 14px;
}
.combo__features ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.combo__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.25em;
  color: rgba(255, 255, 255, 0.92);
}
.combo__reassurance {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35em;
  color: rgba(255, 255, 255, 0.66);
}
.combo__people {
  margin-top: auto;
  padding-top: 30px;
}
.combo__people-title {
  margin-bottom: 16px;
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.combo__people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.combo__right {
  position: relative;
  align-self: start;
  position: sticky;
  top: 24px;
  border: 2px dashed rgba(255, 168, 76, 0.55);
  border-radius: 30px;
  padding: 10px;
}

@media (max-width: 1199px) {
  .calc--merge .combo { margin-left: 40px; margin-right: 40px; }
  .combo__card { grid-template-columns: 1fr; gap: 40px; padding: 48px 40px; }
  .combo__title { font-size: 38px; }
  .combo__right { position: static; }
}
@media (max-width: 899px) {
  .calc--merge .combo { margin-left: 0; margin-right: 0; }
  .combo__card { padding: 32px 12px; border-radius: 32px; }
  .combo__title { font-size: 29px; }
  .combo__features { grid-template-columns: 1fr; gap: 22px; }
  .combo__price { gap: 14px; padding: 18px 20px; }
  .combo__people-grid { grid-template-columns: 1fr; gap: 14px; }
  .combo__right { padding: 8px; border-radius: 24px; }
}

/* ==========================================================================
   Tablette (900–1199)
   ========================================================================== */
@media (max-width: 1199px) and (min-width: 900px) {
  .nav { padding-left: 40px; padding-right: 40px; }
  .system, .proof { padding-left: 40px; padding-right: 40px; }
  .problem { margin-left: 40px; margin-right: 40px; }
  .constat-grid { grid-template-columns: 1fr; max-width: 620px; }
  .constat-card, .constat-card--platform { min-height: auto; transform: none; }
  .problem__title, .system__title, .proof__title, .calc__title { font-size: 40px; }
  .proof__grid { grid-template-columns: 1fr; max-width: 680px; }
  .pricing-card { width: 100%; }
  .process-panel { padding-left: 40px; padding-right: 40px; }
  .process-panel__title { font-size: 48px; }
  .calc { margin-left: 40px; margin-right: 40px; padding: 70px 40px; }
  .calc__panel { grid-template-columns: 1fr; }
  .stack-card__inner { gap: 32px; padding: 36px; }
  .stack-card__title { font-size: 30px; }
}

/* ==========================================================================
   Mobile (<900)
   ========================================================================== */
@media (max-width: 899px) {
  .nav { padding: 15px 20px 0; }

  .hero { padding: 40px 25px 60px; }
  .hero__badge { margin-bottom: 18px; }

  .problem { margin: 70px 18px 0; padding: 0; }
  .problem__title { font-size: 32px; }
  .problem__title br { display: none; }
  .constat-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; max-width: 100%; }
  .constat-card, .constat-card--platform { min-height: auto; transform: none; padding: 22px; }
  .price-race-chart { height: 210px; gap: 5px; }
  .price-step i { width: 38px; }
  /* labels « Artisan 1 / Vous / … » : on resserre pour éviter le chevauchement sur petits écrans */
  .price-step span { font-size: 10px; letter-spacing: -0.04em; }
  .price-step strong { font-size: 15px; }

  .system { padding: 80px 20px 0; }
  .system__title { font-size: 32px; }
  .system__subtitle { font-size: 16px; }

  /* Stack : on garde l'animation d'empilement sticky au scroll, en une colonne.
     Sur mobile, les cartes sont compactées et collées plus haut (top réduit)
     pour que tout le contenu d'une carte tienne dans le viewport — sinon le bas
     de la carte « fiche Google » (la plus haute) restait coupé et inatteignable. */
  .stack { margin-top: 40px; gap: 14px; }
  .stack-card { min-height: 0; }
  /* léger décalage conservé pour laisser deviner les cartes empilées dessous */
  .stack-card--site  { top: 16px; }
  .stack-card--fiche { top: 20px; }
  .stack-card--avis  { top: 24px; }
  .stack-card__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .stack-card__num { font-size: 13px; }
  .stack-card__title { font-size: 22px; line-height: 1.18; }
  .stack-card__desc { font-size: 14px; line-height: 1.42; }
  .stack-card__proof { margin-top: 12px; }
  .stack-card__proof li { margin: 4px 0; font-size: 14px; }
  /* visuel d'abord pour l'impact, texte ensuite */
  .stack-card__visual { order: -1; }
  /* visuel Google compacté : c'est lui qui rendait la carte trop haute */
  .gmock { max-width: 100%; }
  .gmock__bar { padding: 8px 12px; margin: 10px 12px 0; }
  .gmock__query { font-size: 13px; }
  .gmock__map { height: 80px; margin: 10px 12px 0; }
  .gmock__results { padding: 6px 12px 10px; }
  .gmock__result { padding: 6px 0; }
  .gmock__name { font-size: 13px; }
  .gmock__meta { font-size: 12px; }
  .browser-mock__bar { padding: 7px 12px; }

  .proof { padding: 80px 20px 0; }
  .proof__title { font-size: 32px; }
  .proof__subtitle { font-size: 16px; }
  .proof__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .proof-main { padding: 24px; border-radius: 26px; }
  .proof-main__head { flex-direction: column; gap: 14px; }
  .proof-main__title { font-size: 21px; }
  .proof-stats { grid-template-columns: 1fr; }
  .proof-compo__chip { font-size: 12px; padding: 7px 12px; }
  .proof-side { gap: 18px; }
  .proof-card { padding: 22px; border-radius: 24px; }
  .proof-card__title { font-size: 20px; }
  .proof-pillars__k { min-width: 96px; }

  /* Processus : on abandonne le pin + translate JS au profit d'un scroll natif */
  .process { height: auto; margin-top: 80px; }
  .process__pin {
    position: static; height: auto; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  }
  .process__track { transform: none !important; height: auto; }
  .process-panel {
    flex-basis: 88vw;
    height: auto;
    min-height: 74vh;
    padding: 28px;
    scroll-snap-align: center;
    border-right: 1px solid rgba(16, 16, 16, 0.06);
  }
  .process-panel__title { font-size: 38px; }
  .process-panel__text { font-size: 17px; }
  .process-panel__ghost { font-size: 28vh; }
  .process-panel__inner--split { grid-template-columns: 1fr; gap: 22px; max-width: none; }
  .process-panel__media img { border-radius: 14px; }
  .process__hud { display: none; }

  .pricing { padding-top: 80px; }
  .pricing-card { width: 100%; }
  .pricing-card__pricing { gap: 12px; }
  .price-block__amount { font-size: 32px; }
  .pricing-card__cols { grid-template-columns: 1fr; gap: 22px; }

  .calc { margin: 80px 12px 0; padding: 50px 22px; border-radius: 36px; }
  .calc__title { font-size: 30px; }
  .calc__panel { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  /* minmax(0,1fr) (et non 1fr) : empêche la piste de grille de s'élargir
     à la taille min-content des contrôles → plus de débordement horizontal. */
  .calc--split .calc__left { grid-template-columns: minmax(0, 1fr); }
  .calc__controls { padding: 22px; }
  .calc__result { padding: 30px 22px; }
  .calc-field__top { flex-wrap: wrap; gap: 4px 12px; }
  .calc__amount { font-size: 46px; word-break: break-word; }
  /* CTA long (« Faire diagnostiquer ma présence Google ») : le .btn est en
     nowrap par défaut → il déborde. Sur mobile on l'autorise à passer à la ligne. */
  .calc__cta { white-space: normal; width: 100%; }
  .calc__amount { font-size: 52px; }
  .calc-choices { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Le processus — VERSION CALENDRIER « Gantt » (inspiré de clickway.fr)
   2 semaines de 7 jours, séparateurs pointillés, pastilles « JOUR N »,
   cartes blanches (accent gauche + avatar + icône d'app flottante).
   Couleurs Adwaves : orange = jalon/action, crème = production, vert = preuve.
   Chaque semaine est une grille indépendante -> les colonnes des jours-jalons
   peuvent être plus larges que celles d'une période de production (comme clickway).
   ========================================================================== */
.process-cal { max-width: 1280px; margin: 130px auto 0; padding: 0 24px; }
.process-cal__head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.process-cal__title {
  font-family: var(--font-title);
  font-size: 54px; line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink); margin: 14px 0 16px;
}
.process-cal__subtitle {
  font-family: var(--font-body); font-size: 18px; line-height: 1.55;
  color: var(--slate); margin: 0;
}

/* --- conteneur --- */
.cal {
  position: relative;
  background: linear-gradient(180deg, #FBFAF8 0%, #FFFFFF 55%);
  border: 1px solid rgba(16, 16, 16, 0.07);
  border-radius: 34px;
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

/* badges flottants (façon clickway) */
.cal__badge {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-alt); font-weight: 600; font-size: 14px;
  padding: 11px 17px; border-radius: 100px; background: #fff;
  box-shadow: 0 12px 30px rgba(16, 16, 16, 0.16);
}
.cal__badge--delivery  { top: -18px; right: 38px; color: var(--orange); border: 1px solid rgba(255, 79, 1, 0.22); }
.cal__badge--guarantee { bottom: -18px; left: 38px; color: var(--green);  border: 1px solid rgba(31, 157, 85, 0.22); }

/* --- une semaine = une grille --- */
.cal__week { display: grid; }
.cal__week--1 { grid-template-columns: 1.7fr 1.7fr 4fr 1.7fr; }   /* J1 · J2 · J3-6 · J7 */
.cal__week--2 {
  grid-template-columns: 1.7fr 1.7fr 1.7fr 3fr 1.7fr;            /* J8 · J9 · J10 · J11-13 · J14 */
  border-top: 2px dashed #E1E2E7;                                /* trait horizontal entre les 2 semaines */
}

/* --- une « région » = 1 jour ou un bloc de jours --- */
.cal__region {
  position: relative;
  min-height: 270px;
  padding: 50px 16px 22px;
  display: flex; align-items: center; justify-content: center;
}
.cal__region--milestone { background: #FFFCF5; }
.cal__region--work      { background: #F4F4F7; }
.cal__region--filler    { background: transparent; }
.cal__region--final     { background: linear-gradient(180deg, #FFF4DE 0%, #FFFBF2 100%); }
/* séparateur pointillé vertical à droite de la région */
.cal__region--sep::after {
  content: ""; position: absolute; top: 14px; bottom: 14px; right: -1px;
  border-right: 2px dashed #E1E2E7;
}

/* libellés des jours, en haut de chaque région */
.cal__region-days {
  position: absolute; top: 18px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.cal__region--milestone .cal__region-days,
.cal__region--final .cal__region-days { justify-content: flex-start; }
.cal__region--filler .cal__region-days { justify-content: center; }
.cal__day-num {
  font-family: var(--font-alt); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #A7ACB4;
}
.cal__day-num--pill {
  color: #fff; background: var(--orange);
  padding: 6px 13px; border-radius: 8px; letter-spacing: 0.06em;
  box-shadow: 0 6px 16px rgba(255, 79, 1, 0.28);
}
.cal__day-num--pill-green { background: var(--green); box-shadow: 0 6px 16px rgba(31, 157, 85, 0.28); }

/* --- carte évènement --- */
.cal__card {
  position: relative;
  width: 100%; max-width: 300px;
  background: #fff; border-radius: 13px;
  border-left: 4px solid var(--orange);
  box-shadow: 0 10px 26px rgba(16, 16, 16, 0.08);
  padding: 14px 15px;
}
.cal__card--green { border-left-color: var(--green); }
.cal__card-row { display: flex; align-items: center; gap: 12px; }
.cal__card-body { min-width: 0; flex: 1; }
.cal__card-title {
  font-family: var(--font-title); font-size: 16px; line-height: 1.2;
  color: #20242B; margin: 0;
}
.cal__card-sub {
  font-family: var(--font-alt); font-size: 12px; color: var(--slate); margin: 4px 0 0;
}

/* avatar + pile d'avatars */
.cal__avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  object-fit: cover; border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(16, 16, 16, 0.12); background: var(--cream);
}
.cal__avatars { display: flex; flex-shrink: 0; }
.cal__avatars .cal__avatar:not(:first-child) { margin-left: -14px; }

/* icône d'application flottante (coin haut-droit) */
.cal__appicon {
  position: absolute; top: -16px; right: -10px;
  width: 44px; height: 44px; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 20px rgba(16, 16, 16, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.cal__appicon img, .cal__appicon svg { width: 27px; height: 27px; display: block; }
.cal__appicon--plain { background: transparent; box-shadow: none; }
.cal__appicon--plain img { width: 44px; height: 44px; }

/* miniature de site / capture */
.cal__thumb {
  width: 100%; height: 96px; object-fit: cover; object-position: top center;
  margin-top: 12px; border-radius: 9px; border: 1px solid rgba(16, 16, 16, 0.08); display: block;
}

/* --- responsive : tablette intermédiaire (900–980) garde la grille --------- */
@media (max-width: 980px) and (min-width: 900px) {
  .process-cal__title { font-size: 38px; }
  .cal__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .cal__week { min-width: 940px; }
  .cal__region { min-height: 240px; }
}

/* --- mobile : la grille « Gantt » horizontale ne tient pas → on la
   transforme en TIMELINE VERTICALE (rail + pastilles), comme la section
   méthode. Chaque jour devient une étape empilée, reliée par un fil vertical.
   ------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .process-cal { margin-top: 90px; padding: 0 var(--gutter, 24px); }
  .process-cal__head { margin-bottom: 32px; }
  .process-cal__title { font-size: 32px; }
  .process-cal__subtitle { font-size: 16px; }

  /* conteneur : badges remis dans le flux (haut / bas), centrés */
  .cal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 28px;
    border-radius: 28px;
  }
  .cal__badge {
    position: static;
    font-size: 13px;
    padding: 9px 15px;
  }
  .cal__badge--delivery  { order: 0; margin-bottom: 8px; }
  .cal__badge--guarantee { order: 2; margin-top: 16px; }

  /* la piste : colonne verticale + rail pointillé à gauche */
  .cal__scroll {
    order: 1;
    position: relative;
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 6px 0 6px 28px;
  }
  .cal__scroll::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: 14px;
    border-left: 2px dashed #E1E2E7;
  }

  /* semaines : simples colonnes empilées, plus de grille ni de min-width */
  .cal__week,
  .cal__week--1,
  .cal__week--2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    grid-template-columns: none;
    border-top: 0;
  }

  /* une région = une étape de la timeline */
  .cal__region,
  .cal__region--milestone,
  .cal__region--work,
  .cal__region--final {
    position: relative;
    display: block;
    min-height: 0;
    width: 100%;
    padding: 0;
    background: transparent;
  }
  /* pastille sur le rail (centrée sur le fil à 7px) */
  .cal__region::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--orange);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(255, 79, 1, 0.12);
  }
  .cal__region--work::before {
    background: #C2C7D0;
    box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.06);
  }
  .cal__region--final::before {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.14);
  }
  /* jours « vides » (8–9) : inutiles en vertical, on les retire */
  .cal__region--filler { display: none; }
  /* plus de séparateurs verticaux pointillés (remplacés par le rail) */
  .cal__region--sep::after { display: none; }

  /* libellés de jours : en ligne, au-dessus de la carte */
  .cal__region-days {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* carte pleine largeur */
  .cal__card { max-width: none; }
  .cal__appicon { top: -13px; right: 8px; }
}

/* ==========================================================================
   Pourquoi vous perdez des demandes (les 3 « fuites »)
   Section insérée après « Résultats réels ». Reprend l'ADN crème + orange,
   carte sombre au centre pour la confiance (preuve), révélations au scroll.
   ========================================================================== */
:root {
  --loss-red: #E5484D;
}

@keyframes lossLeadBlocked {
  0%, 100% { background: var(--orange); box-shadow: 0 10px 24px rgba(16, 16, 16, 0.06); }
  45% { background: var(--loss-red); box-shadow: 0 0 0 8px rgba(229, 72, 77, 0.14), 0 18px 34px rgba(229, 72, 77, 0.24); }
}
@keyframes lossSoftShake {
  0%, 100% { transform: translateX(0); }
  32% { transform: translateX(-2px); }
  64% { transform: translateX(2px); }
}

.loss-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 130px 120px 0;
}

.loss-head { max-width: 930px; margin: 0 auto; text-align: center; }
.loss-eyebrow { font-family: var(--font-title); font-size: 16px; line-height: 1; color: var(--orange); }
.loss-head h2 {
  margin-top: 18px;
  font-family: var(--font-title);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--off-black);
  text-wrap: balance;
}
.loss-subtitle {
  max-width: 810px;
  margin: 22px auto 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--slate);
  text-wrap: balance;
}

.loss-flow { position: relative; max-width: 1180px; margin: 72px auto 0; display: flex; flex-direction: column; }
.loss-flow::before {
  content: "";
  position: absolute;
  top: 84px;
  bottom: 84px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255, 79, 1, 0.55) 0 12px, transparent 12px 24px);
  pointer-events: none;
}

.loss-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 78px;
  align-items: center;
  padding: 38px 0;
  border-bottom: 1px solid rgba(16, 16, 16, 0.08);
}
.loss-row:last-child { border-bottom: 0; }
.loss-row::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  border: 4px solid var(--cream);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px rgba(255, 79, 1, 0.10);
}
.loss-row--trust { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
.loss-row--trust .loss-copy { justify-self: end; }

.loss-copy { max-width: 505px; }
.loss-js .loss-copy { opacity: 0; transition: opacity 0.55s ease; }
.loss-js .loss-row.is-visible .loss-copy { opacity: 1; }
.loss-copy__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 79, 1, 0.10);
  color: var(--orange);
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.loss-copy h3 {
  margin-top: 22px;
  font-family: var(--font-title);
  font-size: clamp(34px, 3.3vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--off-black);
  text-wrap: balance;
}
.loss-copy > p:not(.loss-copy__mini) {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.52;
  letter-spacing: -0.015em;
  color: var(--slate);
}
.loss-copy__mini {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 4px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.loss-visual { min-height: 320px; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-soft); }
.loss-js .loss-visual {
  opacity: 0;
  transform: translateX(var(--loss-visual-shift, 34px));
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}
.loss-js .loss-row--trust .loss-visual { --loss-visual-shift: -34px; }
.loss-js .loss-row.is-visible .loss-visual { opacity: 1; transform: translateX(0); }

/* --- Fuite 01 : recherche Google --- */
.search-preview,
.action-preview { padding: 18px; background: #F5F7F9; border: 1px solid rgba(16, 16, 16, 0.08); }
.search-preview__top { display: flex; align-items: center; gap: 9px; padding: 0 2px 14px; }
.search-preview__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 18px 0 0 #F7B84B, 36px 0 0 var(--green); }
.search-preview__brand { margin-left: 42px; font-family: var(--font-alt); font-size: 13px; font-weight: 700; color: #8B929C; }
.search-preview__query {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: 0 8px 20px rgba(16, 16, 16, 0.05);
  font-family: var(--font-alt);
  font-size: 14px;
  color: #202124;
}
.search-preview__results { margin-top: 12px; display: grid; gap: 8px; }
.search-preview__result {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.07);
}
.loss-js .search-preview__result,
.loss-js .search-preview__fold { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; }
.loss-js .loss-row.is-visible .search-preview__result--winner:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.loss-js .loss-row.is-visible .search-preview__result--winner:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.62s; }
.loss-js .loss-row.is-visible .search-preview__fold { opacity: 1; transform: translateY(0); transition-delay: 0.84s; }
.loss-js .loss-row.is-visible .search-preview__result--you { opacity: 0.58; transform: translateY(8px); transition-delay: 1.02s; }
.search-preview__result > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-alt);
  font-size: 13px;
  font-weight: 800;
}
.search-preview__result strong { display: block; font-family: var(--font-title); font-size: 16px; line-height: 1; color: var(--off-black); }
.search-preview__result p { margin-top: 5px; font-family: var(--font-alt); font-size: 12px; line-height: 1.2; color: var(--slate); }
.search-preview__result--winner { box-shadow: 0 10px 22px rgba(16, 16, 16, 0.06); }
.search-preview__result--winner > span { background: var(--orange); color: #fff; }
.search-preview__fold {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  font-family: var(--font-alt);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A1A7AF;
}
.search-preview__fold::before,
.search-preview__fold::after { content: ""; height: 1px; flex: 1; background: repeating-linear-gradient(90deg, rgba(16, 16, 16, 0.20) 0 5px, transparent 5px 10px); }
.search-preview__result--you { opacity: 0.58; transform: translateY(8px); }
.search-preview__result--you > span { background: #E6E9ED; color: #8B929C; }

/* --- Fuite 02 : confiance (carte sombre) --- */
.trust-preview {
  padding: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 79, 1, 0.20), transparent 46%),
    var(--off-black);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.trust-preview__cols { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 12px; }
.trust-profile { min-height: 112px; padding: 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.10); }
.trust-profile span { font-family: var(--font-alt); font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.52); }
.trust-profile strong { display: block; margin-top: 10px; font-family: var(--font-title); font-size: 32px; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.trust-stars { display: flex; gap: 3px; margin-top: 9px; font-size: 16px; line-height: 1; }
.trust-stars i { font-style: normal; }
.trust-stars i::before { content: "★"; }
.trust-stars--empty i { color: rgba(255, 255, 255, 0.22); }
.trust-stars--filled i { color: #D8DEE7; }
.loss-js .trust-profile--strong .trust-stars i { display: inline-block; opacity: 0.28; transform: scale(0.72); transition: color 0.2s ease, opacity 0.25s ease, transform 0.25s ease; }
.loss-js .loss-row.is-visible .trust-profile--strong .trust-stars i { color: #FFB703; opacity: 1; transform: scale(1); }
.loss-js .loss-row.is-visible .trust-profile--strong .trust-stars i:nth-child(1) { transition-delay: 0.46s; }
.loss-js .loss-row.is-visible .trust-profile--strong .trust-stars i:nth-child(2) { transition-delay: 0.56s; }
.loss-js .loss-row.is-visible .trust-profile--strong .trust-stars i:nth-child(3) { transition-delay: 0.66s; }
.loss-js .loss-row.is-visible .trust-profile--strong .trust-stars i:nth-child(4) { transition-delay: 0.76s; }
.loss-js .loss-row.is-visible .trust-profile--strong .trust-stars i:nth-child(5) { transition-delay: 0.86s; }
.loss-js .trust-profile--strong p b { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.loss-js .loss-row.is-visible .trust-profile--strong p b { opacity: 1; transform: translateY(0); transition-delay: 0.95s; }
.trust-profile p { margin-top: 7px; font-family: var(--font-alt); font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.trust-profile--muted { background: rgba(255, 255, 255, 0.05); }
.trust-profile--strong { background: #fff; color: var(--off-black); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30); }
.trust-profile--strong span,
.trust-profile--strong p { color: var(--slate); }
.trust-profile--strong strong { color: var(--orange); }
.trust-list { margin-top: 14px; display: grid; gap: 10px; }
.trust-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 0.72fr 0.78fr;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px 8px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}
.trust-row span { font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.74); }
.trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-alt);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.trust-badge--no { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.48); }
.trust-badge--yes { background: var(--green-soft); color: var(--green); }

/* --- Fuite 03 : passage à l'action --- */
.action-preview { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.action-flow { display: grid; grid-template-columns: 1fr; gap: 8px; }
.action-flow i { width: 2px; height: 20px; justify-self: center; background: var(--orange); position: relative; }
.action-flow i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  transform: translateX(-50%) rotate(135deg);
}
.action-step {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: 0 10px 24px rgba(16, 16, 16, 0.06);
}
.action-step span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 79, 1, 0.12);
  color: var(--orange);
  font-family: var(--font-alt);
  font-size: 12px;
  font-weight: 800;
}
.action-step strong { font-family: var(--font-title); font-size: 17px; line-height: 1.05; letter-spacing: -0.03em; color: var(--off-black); }
.loss-js .action-step,
.loss-js .action-flow i,
.loss-js .action-preview__cta { opacity: 0; transform: translateY(10px); transition: opacity 0.36s ease, transform 0.36s ease; }
.loss-js .loss-row.is-visible .action-step--search { opacity: 1; transform: translateY(0); transition-delay: 0.36s; }
.loss-js .loss-row.is-visible .action-flow i:first-of-type { opacity: 1; transform: translateY(0); transition-delay: 0.54s; }
.loss-js .loss-row.is-visible .action-step--site { opacity: 1; transform: translateY(0); transition-delay: 0.68s; }
.loss-js .loss-row.is-visible .action-flow i:last-of-type { opacity: 1; transform: translateY(0); transition-delay: 0.86s; }
.loss-js .loss-row.is-visible .action-step--lead {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
  animation: lossLeadBlocked 1.05s ease 1.22s 3 both, lossSoftShake 0.26s ease 1.34s 2;
}
.loss-js .loss-row.is-visible .action-preview__cta { opacity: 1; transform: translateY(0); transition-delay: 1.12s; }
.action-step--lead { background: var(--orange); border-color: transparent; }
.action-step--lead span { background: #fff; }
.action-step--lead strong { color: #fff; }
.action-preview__cta { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 10px; }
.action-preview__cta span {
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 16, 0.08);
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--off-black);
}
.action-preview__cta span:last-child { background: var(--off-black); color: #fff; }

/* --- Transition vers le système --- */
.loss-transition {
  max-width: 980px;
  margin: 42px auto 0;
  padding: 22px 28px;
  border-radius: 999px;
  background: var(--off-black);
  color: rgba(255, 255, 255, 0.76);
  text-align: center;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-soft);
}
.loss-transition strong { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .loss-js .loss-copy,
  .loss-js .loss-visual,
  .loss-js .search-preview__result,
  .loss-js .search-preview__fold,
  .loss-js .trust-profile--strong .trust-stars i,
  .loss-js .trust-profile--strong p b,
  .loss-js .action-step,
  .loss-js .action-flow i,
  .loss-js .action-preview__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 1120px) {
  .loss-section { padding: 90px 40px 0; }
  .loss-flow { max-width: 760px; margin-top: 56px; margin-inline: auto; }
  .loss-flow::before { left: 24px; top: 58px; bottom: 58px; }
  .loss-row,
  .loss-row--trust { grid-template-columns: 1fr; gap: 28px; padding: 34px 0 42px 58px; }
  .loss-row::after { top: 55px; left: 24px; }
  .loss-row--trust .loss-copy { order: -1; justify-self: stretch; }
  .loss-copy { max-width: none; }
}

@media (max-width: 720px) {
  .loss-section { padding: 80px 20px 0; }
  .loss-eyebrow { max-width: 280px; margin-inline: auto; line-height: 1.12; }
  .loss-head h2 { font-size: 36px; line-height: 1.02; }
  .loss-subtitle { font-size: 16px; }
  .loss-flow { margin-top: 42px; }
  .loss-flow::before { left: 9px; top: 48px; bottom: 48px; }
  .loss-row,
  .loss-row--trust { gap: 22px; padding: 28px 0 36px 34px; }
  .loss-row::after { top: 46px; left: 9px; width: 13px; height: 13px; border-width: 3px; box-shadow: 0 0 0 6px rgba(255, 79, 1, 0.10); }
  .loss-copy h3 { font-size: 30px; }
  .loss-copy > p:not(.loss-copy__mini) { font-size: 15px; line-height: 1.48; }
  .loss-copy__mini { margin-top: 20px; font-size: 18px; }
  .loss-visual { min-height: 0; border-radius: 22px; }
  .loss-js .loss-visual { --loss-visual-shift: 14px; }
  .loss-js .loss-row--trust .loss-visual { --loss-visual-shift: -14px; }
  .trust-preview__cols,
  .action-preview__cta { grid-template-columns: 1fr; }
  .trust-badge { min-height: 26px; padding-inline: 8px; font-size: 10px; }
  .action-flow { gap: 7px; }
  .action-step { min-height: 76px; }
  .loss-transition { border-radius: 24px; padding: 20px; font-size: 16px; }
}

/* ==========================================================================
   GRILLE UNIFIÉE — largeurs, gouttières & alignements cohérents
   (ajout : ne touche ni couleurs, ni typos, ni contenu — uniquement le layout)

   2 registres de largeur UNIQUEMENT :
     --container-standard (~1200px) → ~95 % des sections (contenu)
     --container-wide     (~1320px) → blocs sombres immersifs (calc/pricing/booking)
   Gouttières latérales constantes : 24px mobile / 80px desktop.
   Tout le contenu est centré (margin-inline:auto) → les bords gauche/droite
   forment la même ligne verticale d'une section à l'autre.
   ========================================================================== */
:root {
  --container-standard: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;                /* mobile */
}
@media (min-width: 900px) {
  :root { --gutter: 48px; }      /* tablette */
}
@media (min-width: 1200px) {
  :root { --gutter: 80px; }      /* desktop */
}

/* ---- Sections claires : gouttière constante portée par la section --------- */
.problem,
.system,
.proof,
.loss-section,
.method-showcase {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* on neutralise les marges/max-width latéraux divergents hérités */
.problem      { margin-left: 0; margin-right: 0; }
.loss-section { max-width: none; margin-left: auto; margin-right: auto; }
/* .proof était un ancien conteneur centré (max-width:1200 + margin auto + padding 120)
   → double-inset. On le repasse en section pleine largeur, le rail vit dans .proof__grid */
.proof        { max-width: none; margin-left: 0; margin-right: 0; }
/* .pricing portait padding:0 120px (style.css) → empêchait le bloc sombre d'être « wide ».
   On retire la gouttière de section : c'est .pricing__block qui gère sa largeur. */
.pricing      { padding-left: 0; padding-right: 0; }

/* ---- Un seul rail de contenu (1200), centré, pour toutes les sections ----- */
.constat-head,
.constat-grid,
.system__head,
.stack,
.proof__head,
.proof__grid,
.loss-head,
.loss-flow,
.calc__head,
.calc__panel {
  max-width: var(--container-standard);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Blocs sombres immersifs : carte arrondie « wide », contenu à 1200 -----
   width:min() = pleine largeur moins la gouttière sur petit écran,
   plafonnée à --container-wide et centrée sur grand écran.
   Le padding latéral interne (60px) ramène le contenu sur le rail 1200. */
.calc,
.pricing__block,
.booking-cmd,
.combo {
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Mobile : gouttière unique de 24px partout ---------------------------- */
@media (max-width: 899px) {
  .problem,
  .system,
  .proof,
  .loss-section,
  .method-showcase {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}