/* ─────────────────────────────────────────────────────────
   Grouply v2 — extra styles layered on top of styles-base.css.
   Mirrors src/styles/index.css from the codebase (Tailwind
   directives removed — we don't need utility classes here).
   ───────────────────────────────────────────────────────── */

/* Auth pages */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(34, 211, 238, 0.18), transparent 60%),
    var(--bg-dark);
  color: var(--ink-100);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(20, 20, 25, 0.7);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line-dark);
  border-radius: 24px;
  padding: 36px 32px 28px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.auth-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: #fff; }
.auth-sub { color: var(--ink-300); margin: 0 0 24px; font-size: 14px; }
.auth-card .ff-label { color: var(--ink-100); }
.auth-card .ff-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #fff;
}
.auth-card .ff-input:focus { border-color: var(--c-electric); background: rgba(255,255,255,0.06); }
.auth-card .ff-input::placeholder { color: var(--ink-300); }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-300); font-size: 12px; margin: 18px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line-dark);
}
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  background: #fff; color: #1d1d1f;
  border-radius: 14px; font-weight: 600; font-size: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer; transition: transform 160ms var(--ease-apple), box-shadow 160ms;
}
.btn-google:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.btn-google:disabled { opacity: 0.6; cursor: not-allowed; }

/* Dashboard shell */
.dash-shell { min-height: 100vh; background: var(--bg-dark); color: var(--ink-100); }
.dash-shell.page-dark { background: var(--bg-dark); }
.dash-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 90px 28px 60px;
}
@media (max-width: 900px) and (min-width: 769px) {
  .dash-container { grid-template-columns: 220px 1fr; padding-top: 80px; }
}
@media (max-width: 768px) {
  /* La sidebar disparaît au profit de la barre d'onglets bas (.dash-tabbar). */
  .dash-container { grid-template-columns: 1fr; padding: 64px 16px 92px; gap: 16px; }
  .dash-sidebar { display: none; }
}
.dash-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  padding: 16px;
  backdrop-filter: blur(12px);
}
.dash-sidebar h4 {
  margin: 14px 8px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dash-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink-100);
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  transition: background 140ms, color 140ms;
  cursor: pointer;
}
.dash-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.dash-link.active {
  background: rgba(10, 132, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(10, 132, 255, 0.3);
}
.dash-main { min-width: 0; }

/* Glass card on dark */
.glass-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(14px);
}
.glass-card h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

/* KPI on dark */
.kpi-dark {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.kpi-dark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(220px 160px at 0% 0%, var(--accent, rgba(10,132,255,0.18)), transparent 70%);
  pointer-events: none;
}
.kpi-dark .l { color: var(--ink-300); font-size: 12px; font-weight: 500; }
.kpi-dark .v { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.kpi-dark .sub { color: var(--ink-300); font-size: 12px; margin-top: 4px; }

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 1000;
  background: rgba(15, 15, 20, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  color: var(--ink-100);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.cookie-banner p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-200); max-width: 720px; }
/* Invite de ré-acceptation des CGU (preuve de consentement) — bandeau bas, non bloquant. */
.legal-reaccept { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100;
  background: rgba(15,15,20,0.94); backdrop-filter: blur(20px); border: 1px solid var(--line-dark);
  border-radius: 16px; padding: 14px 18px; color: var(--ink-100); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.legal-reaccept-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legal-reaccept-in span { font-size: 13px; line-height: 1.5; }
.legal-reaccept-in a { color: var(--c-electric); font-weight: 600; }
.legal-reaccept .lr-ver { color: var(--ink-300); }
.legal-reaccept .btn-dark { white-space: nowrap; }
/* Historique des acceptations légales (profil, lecture seule). */
.legal-accept-list { display: grid; gap: 8px; }
.legal-accept-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-size: 13.5px; }
.legal-accept-row .laccept-meta { color: var(--ink-500); font-size: 12.5px; }
.legal-accept-row .laccept-date { color: var(--ink-500); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cookie-banner .actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
  /* Vrai bandeau collé en bas (plein largeur) plutôt qu'une carte flottante :
     masque moins de contenu et respecte la safe-area iOS. */
  .cookie-banner {
    grid-template-columns: 1fr;
    left: 0; right: 0; bottom: 0;
    border-radius: 16px 16px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
    max-height: 82vh; overflow-y: auto;
  }
  .cookie-banner .actions button { flex: 1 1 auto; justify-content: center; text-align: center; }
  /* Même logique pour l'invite de ré-acceptation CGU : bandeau flush en bas,
     plutôt qu'une carte flottante qui chevauchait à moitié la barre d'onglets. */
  .legal-reaccept {
    left: 0; right: 0; bottom: 0;
    border-radius: 16px 16px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .legal-reaccept-in { gap: 10px; }
  .legal-reaccept .btn-dark { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(8, 8, 12, 0.6);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 20px;
  animation: modal-fade 200ms var(--ease-apple);
}
.modal-card {
  background: rgba(20, 20, 25, 0.92);
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  padding: 26px 26px 22px;
  max-width: 480px;
  width: 100%;
  color: var(--ink-100);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal-card h3 { margin: 0 0 8px; color: #fff; font-size: 20px; letter-spacing: -0.01em; }
.modal-card p { color: var(--ink-300); margin: 0 0 18px; font-size: 14px; line-height: 1.55; }
@keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }

/* Status pill on dark */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.04);
  color: var(--ink-100);
}
.pill-success { color: #5cffb1; border-color: rgba(92,255,177,0.3); background: rgba(92,255,177,0.08); }
.pill-warn    { color: #ffd66e; border-color: rgba(255,214,110,0.3); background: rgba(255,214,110,0.08); }
.pill-danger  { color: #ff8a8a; border-color: rgba(255,138,138,0.3); background: rgba(255,138,138,0.08); }
.pill-info    { color: #6bb6ff; border-color: rgba(107,182,255,0.3); background: rgba(107,182,255,0.08); }
.pill-violet  { color: #b794ff; border-color: rgba(183,148,255,0.3); background: rgba(183,148,255,0.08); }

/* Table on dark */
.dark-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.dark-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-300);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}
.dark-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-100);
}
.dark-table tr:last-child td { border-bottom: none; }
.dark-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--line-dark);
  border-radius: 18px;
  color: var(--ink-300);
}
.empty-state h4 { color: #fff; font-size: 16px; margin: 0 0 6px; }
.empty-state p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; }

/* Form button dark */
.btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px;
  background: #fff; color: #1d1d1f;
  border-radius: 14px;
  font-weight: 600; font-size: 14px;
  border: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-apple), box-shadow 160ms;
}
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.btn-dark:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 17px;
  background: transparent; color: var(--ink-100);
  border-radius: 14px;
  font-weight: 600; font-size: 14px;
  border: 1px solid var(--line-dark);
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
  text-decoration: none;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }
.btn-danger {
  background: rgba(255,68,68,0.12);
  color: #ff8a8a;
  border-color: rgba(255,68,68,0.3);
}
.btn-danger:hover { background: rgba(255,68,68,0.2); }

.light-block { color: var(--ink-900); }

/* Grid utilities */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .grid-cards { grid-template-columns: 1fr; } }

/* Cards in a grid must stay aligned and never get stuck mid-reveal
   (duplicate .reveal rules + observer races could leave one hidden).
   Show them immediately, fully opaque, no vertical shift. */
.grid-cards > .reveal { transform: none !important; opacity: 1 !important; transition: none !important; }

.step-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 1100px) { .step-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .step-grid { grid-template-columns: 1fr; } }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 22px;
}
.stat-v { font-size: 36px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.stat-l { color: var(--ink-300); font-size: 13px; margin-top: 8px; }

.two-col {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 24px; } }

/* For-business card preview */
.fg-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  font-size: 13px; color: var(--ink-500); font-weight: 500;
}
.fg-card-body { display: grid; gap: 10px; }
.fg-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-700);
}
.fg-stat strong { color: var(--ink-900); }

/* Toast overrides */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: rgba(20, 20, 25, 0.95);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--line-dark);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  max-width: 360px;
  animation: toast-in 220ms var(--ease-apple);
}
.toast-success { border-color: rgba(92,255,177,0.3); color: #c8ffd9; }
.toast-error   { border-color: rgba(255,138,138,0.3); color: #ffcccc; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Notification dot */
.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--c-pink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-dark);
}

/* ── Legal prose (LegalLayout) ───────────────────────── */
.legal-prose h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-900); margin: 32px 0 10px;
}
.legal-prose h3 {
  font-size: 16px; font-weight: 600;
  color: var(--ink-900); margin: 20px 0 6px;
}
.legal-prose p { color: var(--ink-700); line-height: 1.7; margin: 0 0 12px; font-size: 15px; }
.legal-prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-700); }
.legal-prose li { margin-bottom: 6px; line-height: 1.6; font-size: 15px; }
.legal-prose strong { color: var(--ink-900); }
.legal-prose a { color: var(--c-electric); cursor: pointer; }
.legal-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; background: var(--bg-2); padding: 1px 6px; border-radius: 4px;
}
.legal-callout {
  background: var(--bg-2);
  border-left: 3px solid var(--c-electric);
  padding: 14px 18px;
  border-radius: 10px;
  margin: 18px 0;
  font-size: 14px;
  color: var(--ink-700);
}
.legal-callout-warn {
  border-left-color: #ffb02e;
  background: linear-gradient(180deg, rgba(255,176,46,0.08), rgba(255,176,46,0.02));
  margin-top: 0;
}
.legal-callout-warn strong { color: var(--ink-900); }

/* ── Legal: container, méta, mention de langue ───────── */
.legal-container { max-width: 860px; }
.legal-meta { max-width: 700px; font-size: 14px; }
.legal-callout-lang {
  border-left-color: var(--ink-300);
  background: var(--bg-2);
  font-size: 13.5px;
  margin-top: 0;
}

/* ── Legal: sommaire ancré ───────────────────────────── */
.legal-toc {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0 8px;
}
.legal-toc-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 10px;
}
.legal-toc ol {
  margin: 0; padding-left: 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px;
  font-size: 14px;
}
@media (max-width: 768px) { .legal-toc ol { grid-template-columns: 1fr; } }
.legal-toc li { margin: 0; line-height: 1.5; }
.legal-toc a {
  color: var(--c-electric); cursor: pointer; text-decoration: none;
}
.legal-toc a:hover { text-decoration: underline; }

/* ── Legal: sections (cible des ancres) ──────────────── */
.legal-section { scroll-margin-top: 80px; }

/* ── Legal: champs [à compléter] surlignés discrètement ─ */
.legal-tbd {
  background: rgba(255, 176, 46, 0.16);
  color: #7a4a00;
  border: 1px dashed rgba(255, 176, 46, 0.55);
  border-radius: 5px;
  padding: 0 5px;
  font-style: normal;
  font-weight: 500;
  white-space: normal;
}
.legal-tbd::before { content: '✎ '; opacity: 0.55; font-size: 0.85em; }

/* ── Legal: confort de lecture mobile ────────────────── */
@media (max-width: 768px) {
  .legal-prose h2 { font-size: 19px; margin: 26px 0 8px; }
  .legal-prose p, .legal-prose li { font-size: 14.5px; }
  .legal-toc { padding: 14px 14px; }
}

/* Faq fallback (in case base CSS faq styles not used) */
.faq-q .chev { transition: transform 200ms; color: var(--ink-300); }

/* ─────────────────────────────────────────────────────────
   Three.js 3D orb hero + iridescent CTA + reveal animations
   (ported from the original prototype's styles.css so the
   v2 standalone build matches the cinematic feel)
   ───────────────────────────────────────────────────────── */
.hero-3d {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
  pointer-events: none;
}
.hero-3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.hero-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: min(820px, 75vw);
  height: min(820px, 75vw);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.hero-halo::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--iridescent);
  filter: blur(100px) saturate(1.1);
  opacity: 0.22;
  animation: orbRotate 36s linear infinite;
}
.hero-halo::after {
  content: "";
  position: absolute; inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.15) 12%, transparent 28%),
    radial-gradient(circle at 50% 50%,
      rgba(255,93,172,0.35) 0%,
      rgba(139,92,246,0.35) 22%,
      rgba(91,139,255,0.32) 44%,
      rgba(34,211,238,0.28) 66%,
      rgba(92,255,177,0.20) 82%,
      rgba(255,138,61,0.16) 100%);
  filter: blur(36px);
  opacity: 0.5;
  animation: orbRotate 50s linear infinite reverse;
}

/* Stronger hero veil — pulls focus to the title over the orb */
.hero .hero-veil {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 25% at 50% 55%, rgba(251,251,253,0.55) 0%, rgba(251,251,253,0) 70%),
    linear-gradient(180deg, rgba(251,251,253,0.35) 0%, transparent 14%, transparent 82%, rgba(251,251,253,0.95) 100%);
}
.hero-stage, .hero-content { position: relative; z-index: 4; max-width: 1100px; }

/* Iridescent CTA — dark base, vivid hover glow */
.btn-iridescent {
  background: var(--ink-900);
  color: white;
  font-weight: 500;
  position: relative;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35);
}
.btn-iridescent:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px -8px rgba(0,0,0,0.4),
    0 0 50px -8px rgba(139,92,246,0.5),
    0 0 80px -20px rgba(34,211,238,0.4);
}

/* Word-by-word reveal */
.w-wrap {
  display: inline-block; overflow: hidden;
  vertical-align: bottom;
  padding: 0.05em 0.04em 0.3em;
  margin: -0.05em -0.04em -0.3em;
  line-height: 1;
}
.w-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out-soft);
}
.reveal .w-inner { transform: translateY(110%); }
.reveal.in .w-inner { transform: translateY(0); }

/* Block-level reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out-soft), transform 0.9s var(--ease-out-soft);
}
.reveal.in { opacity: 1 !important; transform: translateY(0) !important; }
.reveal.in .w-inner { transform: translateY(0) !important; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal .w-inner { opacity: 1 !important; transform: none !important; }
}

/* ─────────────────────────────────────────────────────────
   Tighter section rhythm + cleaner hero→ticker handoff
   ───────────────────────────────────────────────────────── */
.section { padding: clamp(36px, 4.2vw, 68px) 0 !important; }

/* Explore: see-all + back-to-explore links */
.explore-seeall {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding: 11px 20px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-900);
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s, background .2s;
}
.explore-seeall:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-strong); background: var(--bg-2); }
.explore-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; color: var(--ink-500); font-size: 14px; font-weight: 500; text-decoration: none;
}
.explore-back:hover { color: var(--ink-900); }
/* Fil d'Ariane + sélecteur demand/offers (pages /explore/*) */
.explore-nav { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.explore-nav .explore-back { margin-top: 0; }
.explore-toggle {
  display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px;
}
.explore-toggle .et-opt {
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--ink-500); white-space: nowrap; transition: background .2s, color .2s;
}
.explore-toggle .et-opt:hover { color: var(--ink-900); }
.explore-toggle .et-opt.is-active { background: #fff; color: var(--ink-900); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
@media (max-width: 479px) {
  .explore-toggle { width: 100%; }
  .explore-toggle .et-opt { flex: 1; text-align: center; padding: 8px 8px; font-size: 12.5px; }
}
.hero { min-height: 92vh; padding-bottom: 110px !important; }
.hero .scroll-cue { bottom: 22px; }
/* Keep the ticker grounded so the hero veil doesn't fight it */
.ticker-wrap { background: var(--bg); position: relative; z-index: 5; }

/* Tighter inner-page hero — kill the dead space below the title */
.page-hero {
  padding: 110px 0 32px !important;
}
.page-hero.page-dark { padding: 130px 0 40px !important; }
.page-hero.gd-hero { padding-bottom: 14px !important; }
.page-hero-title {
  font-size: clamp(36px, 4.8vw, 64px) !important;
  letter-spacing: -0.032em !important;
  line-height: 1.12 !important;
  margin-bottom: 14px !important;
}
.page-hero-sub {
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.5 !important;
  margin-top: 22px !important;
}
/* Buttons sitting directly under a page hero get breathing room */
.page-hero .btn { margin-top: 26px; }

/* Display + headline scale (the old t-display was 80px — too loud) */
.t-display  { font-size: clamp(32px, 4vw, 56px) !important; letter-spacing: -0.028em !important; }
.t-headline { font-size: clamp(24px, 2.6vw, 36px) !important; letter-spacing: -0.022em !important; }
.t-lead     { font-size: clamp(15px, 1.2vw, 19px) !important; }

/* Step cards: kill the 460px min-height (looks empty with 5 short cards) */
.step-card { min-height: auto !important; padding: 28px !important; }
.step-card .num { font-size: 60px !important; top: 22px !important; right: 24px !important; }
.step-card h3 { font-size: 19px !important; }
.step-card p  { font-size: 14.5px !important; }

/* Stats — proper big white gradient numbers (was tiny 36px) */
.section.dark .stat,
.stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 28px 24px;
}
.stat-v {
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: clamp(48px, 6vw, 80px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.stat-l {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* For-business right-side card: less sparse */
.fg-card {
  background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.fg-card .fg-stat {
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px 14px;
}

/* Hide the noisy demo banner — it eats space at the top */
.demo-banner { display: none !important; }

/* Nav must always sit above hero orbit cards & the orb itself */
.nav { z-index: 200 !important; }

/* Orbit cards stay inside hero bounds, never bleed past the ticker */
.hero { overflow: hidden !important; }
.orbit-card {
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.18) !important;
  z-index: 3;
}

/* ─────────────────────────────────────────────────────────
   LIGHT theme for dashboards (matches the rest of the site)
   Overrides the dark .dash-shell scaffolding so the admin /
   user / company consoles read as Apple-clean white instead
   of a separate dark app.
   ───────────────────────────────────────────────────────── */
.dash-shell, .dash-shell.page-dark {
  background: var(--bg);
  color: var(--ink-900);
}
.dash-container { padding-top: 100px; }

.dash-sidebar {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-card);
}
.dash-sidebar h4 { color: var(--ink-500); }
.dash-link { color: var(--ink-700); }
.dash-link:hover { background: var(--bg-2); color: var(--ink-900); }
.dash-link.active {
  background: rgba(10, 132, 255, 0.08);
  color: #0058c9;
  border: 1px solid rgba(10, 132, 255, 0.18);
}

/* Make the dashboard title heading inherit ink-900 even though
   it sets color: #fff inline. !important keeps it readable. */
.dash-main > div > h1 { color: var(--ink-900) !important; }
.dash-main > div > p  { color: var(--ink-500) !important; }

.glass-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.glass-card h3 { color: var(--ink-900); }

.kpi-dark {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.kpi-dark .l { color: var(--ink-500); }
.kpi-dark .v { color: var(--ink-900); }
.kpi-dark .sub { color: var(--ink-500); }

.empty-state {
  border-color: var(--line);
  color: var(--ink-500);
  background: var(--bg-2);
}
.empty-state h4 { color: var(--ink-900); }
.empty-state p  { color: var(--ink-500); }

.dark-table th {
  color: var(--ink-500);
  border-bottom-color: var(--line);
}
.dark-table td {
  color: var(--ink-700);
  border-bottom-color: var(--line);
}
.dark-table tr:hover td { background: var(--bg-2); }

/* Row status dropdown (admin tables) — clean, custom chevron */
.row-status-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 30px 8px 12px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; min-width: 150px;
  transition: border-color .15s, box-shadow .15s;
}
.row-status-select:hover { border-color: var(--line-strong); }
.row-status-select:focus { outline: none; border-color: var(--c-electric); box-shadow: 0 0 0 3px rgba(10,132,255,0.12); }
.pill {
  border-color: var(--line);
  background: var(--bg-2);
  color: var(--ink-700);
}
.pill-success { color: #0e8c3e; border-color: rgba(48,209,88,0.25);  background: rgba(48,209,88,0.10); }
.pill-warn    { color: #b15a13; border-color: rgba(255,138,61,0.25); background: rgba(255,138,61,0.10); }
.pill-danger  { color: #c92121; border-color: rgba(255,68,68,0.25);  background: rgba(255,68,68,0.08); }
.pill-info    { color: #0058c9; border-color: rgba(10,132,255,0.22); background: rgba(10,132,255,0.08); }
.pill-violet  { color: #6b3fc9; border-color: rgba(139,92,246,0.22); background: rgba(139,92,246,0.08); }

/* Dashboard buttons */
.btn-ghost-dark {
  background: #fff;
  color: var(--ink-900);
  border-color: var(--line);
}
.btn-ghost-dark:hover { background: var(--bg-2); border-color: var(--line-strong); }
.btn-dark {
  background: var(--ink-900);
  color: #fff;
}
.btn-dark:hover { background: #000; }
.btn-danger {
  background: rgba(255,59,48,0.08);
  color: #c92121;
  border-color: rgba(255,59,48,0.25);
}
.btn-danger:hover { background: rgba(255,59,48,0.15); }

.notif-dot { box-shadow: 0 0 0 2px #fff; }

/* Toasts on light bg keep their dark glass — but make sure they
   sit above everything else */
.toast { color: #fff; }

/* Dashboard inline <select> needs a light-friendly skin */
.dash-shell select,
.dash-main select {
  background: #fff !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--line) !important;
}
.dash-shell select option,
.dash-main select option { background: #fff !important; color: var(--ink-900) !important; }

/* Modals on dashboards stay glassy-dark for focus — but lighten copy */
.modal-card { background: rgba(255,255,255,0.98); color: var(--ink-900); border-color: var(--line); }
.modal-card h3 { color: var(--ink-900); }
.modal-card p  { color: var(--ink-700); }

/* ─────────────────────────────────────────────────────────
   LIGHT theme for auth pages
   ───────────────────────────────────────────────────────── */
.auth-shell {
  background:
    radial-gradient(900px 600px at 18% -10%, rgba(139, 92, 246, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(34, 211, 238, 0.10), transparent 60%),
    var(--bg);
  color: var(--ink-900);
}
.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.12);
}
.auth-title { color: var(--ink-900); }
.auth-sub   { color: var(--ink-500); }
.auth-card .ff-label { color: var(--ink-900); }
.auth-card .ff-input {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink-900);
}
.auth-card .ff-input:focus { border-color: var(--c-electric); background: #fff; }
.auth-card .ff-input::placeholder { color: var(--ink-300); }
.auth-divider { color: var(--ink-500); }
.auth-divider::before, .auth-divider::after { background: var(--line); }
.auth-card .nav-logo { color: var(--ink-900) !important; }
.btn-google { border-color: var(--line); }
.btn-google:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); }

/* Auth secondary links keep a clearer ink-700 instead of ink-200 */
.auth-card a[href^="#/login"], .auth-card a[href^="#/register"],
.auth-card a[href^="#/forgot"] { color: var(--ink-700); }

/* ═════════════════════════════════════════════════════════
   CustomSelect — animated, fully-styled dropdown
   ═════════════════════════════════════════════════════════ */
.csel { position: relative; width: 100%; }
.csel-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink-900);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s var(--ease-apple), box-shadow .18s, background .18s;
}
.csel-trigger:hover { border-color: var(--ink-300); }
.csel.is-open .csel-trigger {
  border-color: var(--c-electric);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.10);
}
.csel-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csel-placeholder { color: var(--ink-300); }
.csel-chev { color: var(--ink-300); transition: transform .25s var(--ease-apple); flex-shrink: 0; }
.csel.is-open .csel-chev { transform: rotate(180deg); color: var(--c-electric); }

.csel-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.22);
  padding: 6px;
  z-index: 80;
  max-height: 280px; overflow-y: auto;
  opacity: 0; transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transform-origin: top center;
  transition: opacity .2s var(--ease-out-soft), transform .2s var(--ease-out-soft);
}
.csel.is-open .csel-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.csel-opt {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  background: transparent; border: none;
  font-family: inherit; font-size: 14px;
  color: var(--ink-700);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: background .14s, color .14s;
}
.csel-opt:hover { background: var(--bg-2); color: var(--ink-900); }
.csel-opt.is-active { background: rgba(10,132,255,0.08); color: #0058c9; font-weight: 600; }
.csel-opt svg { color: var(--c-electric); flex-shrink: 0; }

/* ═════════════════════════════════════════════════════════
   CityField — free-text combobox with suggestions
   ═════════════════════════════════════════════════════════ */
.cityf { position: relative; width: 100%; }
.cityf-input-wrap {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color .18s, box-shadow .18s;
}
.cityf-input-wrap:focus-within {
  border-color: var(--c-electric);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.10);
}
.cityf-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14.5px; color: var(--ink-900);
}
.cityf-input::placeholder { color: var(--ink-300); }
.cityf-clear {
  background: var(--bg-2); border: none; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-500);
  transition: background .15s, color .15s; flex-shrink: 0;
}
.cityf-clear:hover { background: var(--ink-900); color: #fff; }
.cityf-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.22);
  padding: 6px;
  z-index: 80;
  max-height: 260px; overflow-y: auto;
  animation: cselIn .2s var(--ease-out-soft);
}
@keyframes cselIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.cityf-opt {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  background: transparent; border: none;
  font-family: inherit; font-size: 14px; color: var(--ink-700);
  border-radius: 9px; cursor: pointer; text-align: left;
  transition: background .14s, color .14s;
}
.cityf-opt:hover { background: var(--bg-2); color: var(--ink-900); }

/* In dark dashboard contexts, keep these light & legible (they
   already are) — but make sure the native FormField label sits ok. */
.dash-main .csel-trigger, .dash-main .cityf-input-wrap { background: #fff; }

/* ═════════════════════════════════════════════════════════
   Global hover micro-interactions + minimalist icon accents
   ═════════════════════════════════════════════════════════ */
.btn { transition: transform .2s var(--ease-apple), box-shadow .25s var(--ease-apple), background .2s, color .2s, border-color .2s; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-dark:hover, .btn-ghost-dark:hover { transform: translateY(-1px); }

/* Cards lift slightly on hover everywhere */
.gc, .step-card, .biz-card, .about-card, .act-card, .faq-card { will-change: transform; }

/* ═════════════════════════════════════════════════════════
   page-hero mesh — the futuristic gradient signature
   ═════════════════════════════════════════════════════════ */
.page-hero { position: relative; overflow: hidden; }
.page-hero-mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 420px at 12% -10%, rgba(139,92,246,0.16), transparent 60%),
    radial-gradient(680px 420px at 92% 0%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(520px 360px at 60% 120%, rgba(255,93,172,0.10), transparent 60%);
  animation: meshFloat 18s ease-in-out infinite alternate;
}
.page-hero-mesh.dark {
  background:
    radial-gradient(680px 420px at 12% -10%, rgba(139,92,246,0.30), transparent 60%),
    radial-gradient(680px 420px at 92% 0%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(520px 360px at 60% 120%, rgba(255,93,172,0.18), transparent 60%);
}
@keyframes meshFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}
.page-hero .container { position: relative; z-index: 1; }

/* page-dark hero text */
.page-hero.page-dark { background: var(--bg-dark); }

/* Make eyebrow pills feel alive */
.t-eyebrow { display: inline-flex; align-items: center; }

/* Hero entrance — NEVER animate opacity (preview/background iframes
   freeze the animation timeline at t=0, which would hold opacity:0
   forever). Base state is fully opaque; only a transform slide is
   animated, so worst case the content is simply in its final spot. */
.hero-content { opacity: 1 !important; }
.hero-enter { animation: heroEnter 0.9s var(--ease-out-soft) both; }
@keyframes heroEnter {
  from { transform: translateY(22px); }
  to   { transform: translateY(0); }
}
.hero-word { display: inline-block; }

/* Iridescent gradient text (hero "Pay less.") */
/* Give the hero title room so descenders (y, p) and ascenders aren't
   clipped — the tight line-height: 0.92 + background-clip:text was
   cutting off the gradient "Pay less." line. */
.hero-title { line-height: 1.0 !important; }
.hero-word, .text-iridescent {
  display: inline-block;
  padding: 0.06em 0.02em 0.18em;
  margin-bottom: -0.16em;
}
.text-iridescent {
  background: linear-gradient(115deg, #d63ea1 0%, #e0732c 16%, #c79b2a 34%, #2faa78 54%, #1a99b8 72%, #3766d9 88%, #6b3fc9 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: iriShift 8s ease-in-out infinite;
}
@keyframes iriShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Language toggle lives in nav — keep menu links dark even when the
   nav is in dark mode (a global `.nav.dark a {color:#fff}` was making
   the dropdown's <Link> items invisible on dashboards). */
.nav-menu .nav-menu-link,
.nav.dark .nav-menu .nav-menu-link { color: var(--ink-900) !important; }
.nav-menu .nav-menu-link:hover { background: var(--bg-2) !important; }

/* ── Language toggle (nav) ── */
.lang-toggle {
  display: inline-flex; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 100px; padding: 3px; margin-right: 12px;
}
.nav.dark .lang-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.lang-opt {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-500); padding: 5px 11px; border-radius: 100px;
  transition: background .18s, color .18s;
}
.nav.dark .lang-opt { color: rgba(255,255,255,0.65); }
.lang-opt:hover { color: var(--ink-900); }
.nav.dark .lang-opt:hover { color: #fff; }
.lang-opt.is-active { background: var(--ink-900); color: #fff; }
.nav.dark .lang-opt.is-active { background: #fff; color: var(--ink-900); }

/* Demand Intelligence grid + cards (Business + Trends pages) */
.di-locked { position: relative; }
.di-lock-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(255,255,255,0.78); backdrop-filter: blur(4px);
  border-radius: 18px; display: grid; place-content: center; justify-items: center;
  text-align: center; padding: 20px; gap: 6px;
}
.di-lock-overlay svg { color: var(--ink-300); }
.di-lock-title { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); font-size: 15px; }
.di-lock-overlay p { font-size: 12.5px; color: var(--ink-500); margin: 0 0 8px; max-width: 220px; line-height: 1.4; }
.di-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 760px) { .di-grid { grid-template-columns: 1fr; } }
.di-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-card); }
.di-card-wide { grid-column: span 2; }
@media (max-width: 760px) { .di-card-wide { grid-column: span 1; } }
@media (max-width: 480px) { .di-grid { gap: 12px; } .di-card { padding: 16px; } }
.di-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.di-card-head h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink-900); margin: 0; letter-spacing: -0.01em; }
.di-tag { font-size: 11px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.05em; }
.di-alerts { display: grid; gap: 10px; }
.di-alert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); text-decoration: none; transition: border-color .18s, transform .18s, background .18s; }
.di-alert:hover { border-color: rgba(255,138,61,0.35); transform: translateY(-1px); background: #fff; }
.di-alert-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffb02e; box-shadow: 0 0 10px #ffb02e; flex-shrink: 0; }
.di-alert-body { flex: 1; min-width: 0; }
.di-alert-msg { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.di-alert-tag { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.di-alert-cta { font-size: 12px; font-weight: 600; color: var(--c-electric); white-space: nowrap; }

/* Subscription tier cards (Business Tarifs) */
.biz-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 880px) { .biz-pricing { grid-template-columns: 1fr; } }
.biz-tier-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px; box-shadow: var(--shadow-card); display: grid; gap: 10px; align-content: start; transition: transform .3s var(--ease-apple), box-shadow .3s; }
.biz-tier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-strong); }
.biz-tier-card.featured { background: linear-gradient(180deg, #fff 0%, rgba(139,92,246,0.05) 100%); border-color: rgba(139,92,246,0.30); box-shadow: 0 24px 60px -20px rgba(139,92,246,0.22); }
.btc-flag { position: absolute; top: -10px; right: 22px; padding: 4px 11px; background: var(--iridescent); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.btc-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--ink-500); }
.btc-price { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-900); line-height: 1; }
.btc-price span { font-size: 14px; font-weight: 500; color: var(--ink-500); margin-left: 4px; }
.btc-tagline { color: var(--ink-700); font-size: 14px; line-height: 1.5; }
.btc-features { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.btc-features li { font-size: 14px; color: var(--ink-700); padding-left: 24px; position: relative; line-height: 1.5; }
.btc-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--c-green); font-weight: 700; }
.biz-tier-card .btn { justify-self: start; margin-top: 4px; }

/* ── Group type badges + activation meter + match score + conditional card ── */
.gtype-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  padding: 3px 10px; border-radius: 99px; border: 1px solid transparent;
}
.gtype-violet  { background: rgba(139,92,246,0.10); color: #6b3fc9; border-color: rgba(139,92,246,0.22); }
.gtype-emerald { background: rgba(48,209,88,0.10);  color: #0e8c3e; border-color: rgba(48,209,88,0.22); }
.gtype-cyan    { background: rgba(34,211,238,0.12); color: #0a7d96; border-color: rgba(34,211,238,0.28); }
.gtype-neutral { background: var(--bg-2); color: var(--ink-700); border-color: var(--line); }
.gtype-default { background: var(--bg-2); color: var(--ink-700); border-color: var(--line); }

.activ-meter { margin: 4px 0 2px; }
/* Demande sans offre (règle 038) : affichage « intérêt seulement », sans barre. */
.activ-interest { display: flex; align-items: baseline; }
.activ-interest .activ-count { font-size: 13px; color: var(--ink-500); }
.activ-interest .activ-num { font-weight: 700; color: var(--ink-900); font-size: 15px; }
.gc-interest-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 9px 0;
}
.gc-interest-num { font-weight: 700; color: var(--ink-900); font-size: 18px; line-height: 1; }
.gc-interest-l { font-size: 12.5px; color: var(--ink-500); }

/* Carte : PRIX ACTUEL en gros + mini-échelle des paliers + décompte (si multi-paliers) */
.card-offer { margin: 8px 0 12px; }
.card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-price { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); line-height: 1; }
.card-price-off { font-size: 13px; font-weight: 700; color: #1f9d57; background: rgba(48,209,88,0.12); border-radius: 99px; padding: 2px 8px; }
.card-tiers { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.ct-step { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 46px; padding: 5px 7px;
  border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); }
.ct-step .ct-m { font-size: 10.5px; color: var(--ink-300); font-weight: 600; }
.ct-step .ct-m::before { content: '≥ '; }
.ct-step .ct-p { font-size: 12.5px; font-weight: 700; color: var(--ink-700); }
.ct-step.is-reached { background: rgba(48,209,88,0.08); border-color: rgba(48,209,88,0.28); }
.ct-step.is-reached .ct-p { color: #1f9d57; }
.ct-step.is-current { background: var(--ink-900); border-color: var(--ink-900); }
.ct-step.is-current .ct-m { color: rgba(255,255,255,0.7); }
.ct-step.is-current .ct-p { color: #fff; }
.ct-step.is-next { border-color: var(--c-electric); border-style: dashed; }
.card-countdown { margin-top: 9px; font-size: 12px; color: var(--ink-500); line-height: 1.4; }
.card-countdown.is-frozen { color: #1f9d57; display: flex; align-items: center; gap: 5px; }
.card-countdown.is-frozen svg { color: #1f9d57; flex-shrink: 0; }
.card-bounds { margin-top: 4px; font-size: 12px; color: var(--ink-500); line-height: 1.4; }
.card-bounds strong { color: var(--ink-900); }
@media (max-width: 768px) {
  .card-price { font-size: 26px; }
  .card-tiers { gap: 5px; }
  .ct-step { min-width: 42px; padding: 4px 6px; }
}
/* Fourchette ±10 % (demande sans offre) : carte + page */
.gc-range { margin-top: 7px; font-size: 12px; color: var(--ink-500); line-height: 1.4; }
.gc-range strong { color: var(--ink-900); }
.demand-pitch-range { margin-top: 10px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.dpr-line { font-size: 14px; color: var(--ink-700); }
.dpr-line strong { color: var(--ink-900); }
.dpr-note { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.45; }
.activ-bar { height: 8px; background: rgba(0,0,0,0.07); border-radius: 99px; overflow: hidden; }
.activ-fill { height: 100%; background: var(--fill, var(--c-electric)); border-radius: 99px; transition: width .5s var(--ease-out-soft); }
.activ-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 7px; gap: 8px; }
.activ-label { font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.activ-num { font-weight: 700; }
.activ-emerald { color: #0e8c3e; }
.activ-amber { color: #b15a13; }
.activ-info { color: #0a6cff; }
.activ-count { font-size: 12px; color: var(--ink-500); }

/* Shared card header: colored badges on top, category eyebrow above the title */
.gc-badges { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.gc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-500); margin-bottom: 6px; }

.matchscore { display: grid; gap: 8px; }
.ms-head { display: flex; align-items: baseline; gap: 8px; }
.ms-score { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1; }
.ms-emerald { color: #0e8c3e; } .ms-violet { color: #6b3fc9; } .ms-amber { color: #b15a13; }
.ms-label { font-size: 12px; color: var(--ink-500); }
.ms-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-reason { font-size: 11.5px; color: var(--ink-700); background: var(--bg-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 99px; }
.fee-estimate { font-size: 14px; color: var(--ink-700); }
.fee-estimate strong { color: var(--ink-900); font-family: var(--font-display); }

.cond-card {
  display: flex; flex-direction: column; text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-radius: 24px; padding: 24px; min-height: 340px;
  box-shadow: var(--shadow-card); transition: transform .4s var(--ease-apple), box-shadow .4s, border-color .3s;
  position: relative;
}
.cond-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-strong); border-color: rgba(48,209,88,0.28); }
.cond-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cond-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-900); margin: 0 0 6px; }
.cond-desc { color: var(--ink-500); font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; flex: 1; }
.cond-price { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink-900); margin-bottom: 14px; }
.cond-price-cap { font-size: 13px; font-weight: 500; color: var(--ink-500); }
.cond-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-500); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Auction timeline (GroupDetail) */
.auction-timeline { display: grid; gap: 0; margin-top: 4px; }
.atl-step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.atl-mark { display: flex; flex-direction: column; align-items: center; }
.atl-node { width: 14px; height: 14px; border-radius: 50%; background: var(--ink-100); margin-top: 3px; flex-shrink: 0; }
.atl-step.done .atl-node { background: var(--c-green); box-shadow: 0 0 0 4px rgba(48,209,88,0.14); }
.atl-step.active .atl-node { background: var(--c-electric); box-shadow: 0 0 0 4px rgba(10,132,255,0.16); }
.atl-step:not(:last-child) .atl-mark::after { content: ''; flex: 1; width: 2px; background: var(--line); margin: 4px 0; }
.atl-body { padding-bottom: 20px; }
.atl-t { font-weight: 600; color: var(--ink-900); font-size: 14.5px; }
.atl-d { font-size: 13px; color: var(--ink-500); margin-top: 3px; line-height: 1.5; }
.atl-step.active .atl-t { color: var(--c-electric); }

/* Deal Builder preview + price tier editor */
.pte-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.pte-add { background: var(--bg-2); border: 1px dashed var(--line-strong); color: var(--ink-700); border-radius: 10px; padding: 9px 14px; font-family: inherit; font-size: 13px; cursor: pointer; }
.pte-add:hover { background: #fff; border-color: var(--c-electric); color: var(--c-electric); }
.pte-del { background: transparent; border: 1px solid var(--line); border-radius: 9px; width: 38px; height: 42px; cursor: pointer; color: var(--ink-500); }
.pte-del:hover { border-color: #ff8a8a; color: #c92121; }

/* Fee reminder note (Submit offer + Company onboarding) */
.fee-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(10,132,255,0.05), rgba(139,92,246,0.05));
  border: 1px solid rgba(10,132,255,0.14); border-radius: 12px;
  padding: 14px 16px; font-size: 13.5px; color: var(--ink-700); line-height: 1.5;
}
.fee-note svg { color: var(--c-electric); flex-shrink: 0; margin-top: 1px; }
/* Carte reco entreprise : cliquable (→ fiche infos), affordance hover. */
.reco-demand-card { transition: border-color .18s, transform .18s, box-shadow .18s; }
.reco-demand-card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-card-strong); }
/* Simulation par palier sous la note de commission (honnête : montre coût + gain). */
.fee-sim { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-2); font-size: 13px; color: var(--ink-700); }
.fee-sim-title { font-size: 11px; font-weight: 600; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.fee-sim-rows { display: grid; gap: 8px; }
.fee-sim-row { padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.fee-sim-row.is-current { background: #fff; border-color: var(--line); box-shadow: var(--shadow-card); }
.fee-sim-tier { font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fee-sim-cost { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-500); }
.fee-sim-net { margin-top: 2px; color: var(--ink-700); }
.fee-sim-gain { color: #1f9d57; font-weight: 600; }
.fee-sim-be { margin-top: 2px; font-size: 12px; color: var(--ink-300); }
.fee-sim-badge { font-weight: 500; color: var(--ink-500); }
.fee-sim-cta { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--c-electric); text-decoration: none; }
.fee-sim-cta:hover { text-decoration: underline; }

/* Réponse à une demande : bandeau contextuel + sélecteur verrouillé (thème adaptatif) */
.respond-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(10,132,255,0.10), rgba(139,92,246,0.10));
  border: 1px solid rgba(10,132,255,0.28); color: var(--ink-700); font-size: 13.5px; line-height: 1.5; }
.respond-banner svg { color: var(--c-electric); flex-shrink: 0; margin-top: 2px; }

/* Bannière FORTE : confirmation entreprise sous 24 h (au seuil). */
.confirm-banner { margin-bottom: 22px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(249,115,22,0.16), rgba(245,158,11,0.12));
  border: 1.5px solid rgba(249,115,22,0.45); box-shadow: 0 6px 24px rgba(249,115,22,0.14); }
.confirm-banner-head { display: flex; align-items: center; gap: 9px; color: #b45309; font-size: 16px; }
.confirm-banner-head svg { color: #f97316; }
.confirm-banner-sub { margin: 6px 0 12px; font-size: 13.5px; color: var(--ink-300); line-height: 1.5; }
.confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .confirm-row { flex-direction: column; align-items: stretch; }
  .confirm-row .btn-dark { width: 100%; } }
.respond-banner strong { color: var(--ink-900); font-weight: 700; }
.locked-select { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-700); font-size: 14px; }
.locked-select svg { color: var(--ink-300); flex-shrink: 0; }
/* Réponse à une demande : prix demandé par le créateur (le palier d'entrée l'honore) */
.chef-target-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px;
  padding: 9px 12px; margin: 0 0 10px; border-radius: 10px;
  background: rgba(48,209,88,0.08); border: 1px solid rgba(48,209,88,0.28);
  color: var(--ink-700); font-size: 13px; line-height: 1.45; }
.chef-target-note svg { color: #1f9d57; flex-shrink: 0; }
.chef-target-note strong { font-family: var(--font-display); font-size: 15px; color: var(--ink-900); }
.chef-target-note .ctn-hint { flex-basis: 100%; color: var(--ink-500); font-size: 12px; }
@media (max-width: 767px) { .chef-target-note { padding: 8px 10px; font-size: 12.5px; } }

/* Mes offres — cartes cliquables (réutilise .glass-card pour le thème) */
.my-offers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.my-offer-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.my-offer-card:hover { transform: translateY(-2px); border-color: rgba(10,132,255,0.4);
  box-shadow: 0 12px 30px -18px rgba(10,132,255,0.5); }
.moc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.moc-title { font-size: 15px; color: var(--ink-900); font-weight: 700; }
.moc-sub { color: var(--ink-300); font-size: 12px; }
.moc-tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px;
  color: var(--ink-700); font-variant-numeric: tabular-nums; }
.moc-best { font-size: 11.5px; font-weight: 700; color: #1f9d57; background: rgba(48,209,88,0.12);
  padding: 2px 8px; border-radius: 99px; }
.moc-prog { font-size: 12.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.moc-cta { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--c-electric); }
@media (max-width: 768px) { .my-offers-grid { grid-template-columns: 1fr; } }

/* Live pulse dot — used in eyebrows across Explore / Activity */
.live-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(48,209,88,0.6);
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(48,209,88,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(48,209,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}

/* ═════════════════════════════════════════════════════════
   FIXES — caret, custom checkboxes, auth card balance
   ═════════════════════════════════════════════════════════ */

/* ── No stray text caret outside real input fields ──────────
   A blinking caret should only ever appear inside the actual
   form controls, never on static chrome (dividers, labels…). */
* { caret-color: transparent; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
textarea,
[contenteditable="true"],
[contenteditable=""] { caret-color: var(--c-electric); }
/* Static auth chrome never grabs a text cursor */
.auth-divider, .auth-title, .auth-sub, .nav-logo { user-select: none; }

/* ── Custom checkboxes — uniform across the whole app ───────
   Rounded, brand-gradient when checked, animated check.
   Works on both light cards and the dark cookie banner. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 6px;
  border: 1.6px solid var(--ink-200);
  background: #ffffff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
  transition: background .18s var(--ease-apple), border-color .18s, box-shadow .18s, transform .08s;
}
input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 9.5px;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  margin-top: -2px;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .2s cubic-bezier(.55, 0, .25, 1.5);
}
input[type="checkbox"]:not(:disabled):hover { border-color: var(--c-electric); }
input[type="checkbox"]:active { transform: scale(0.92); }
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
}
input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #5b8bff 0%, #8b5cf6 55%, #ff5dac 100%);
  border-color: transparent;
  box-shadow: 0 3px 10px -3px rgba(139, 92, 246, 0.55);
}
input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:disabled { opacity: 0.6; cursor: not-allowed; }
input[type="checkbox"]:disabled:checked {
  background: linear-gradient(135deg, #9db5ff, #c7adf3);
  box-shadow: none;
}
/* On the dark cookie banner, keep the empty box subtle rather than stark white */
.cookie-banner input[type="checkbox"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
}
.cookie-banner input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #5b8bff 0%, #8b5cf6 55%, #ff5dac 100%);
  border-color: transparent;
}

/* ── Auth card: a touch wider, fields a touch tighter ───────
   Better balance between the card and its inputs. */
.auth-card { max-width: 472px; padding: 34px 36px 28px; }
.auth-card .ff { gap: 6px; }
.auth-card .ff-input {
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 11px;
}
.auth-card .csel-trigger {
  padding: 11px 14px;
  font-size: 15px;
  min-height: 0;
}
.auth-card .btn-dark,
.auth-card .btn-google { padding: 12px 16px; }
/* Le <form> est en display:grid (inline). Sans grid-template-columns, la colonne
   implicite "auto" se dimensionne sur le contenu le plus large (le long libellé du
   sélecteur "Un particulier — …"), ce qui élargit la piste au-delà du form et fait
   déborder TOUS les champs vers la droite (carte asymétrique). minmax(0,1fr) clampe
   la colonne à la largeur du form -> marges gauche/droite égales, rendu identique
   quel que soit le type sélectionné (le libellé long est tronqué via .csel-value). */
.auth-card form { gap: 12px !important; grid-template-columns: minmax(0, 1fr); }

/* Error messages: always start with a capital letter (tidies Supabase strings) */
.ff-error::first-letter { text-transform: uppercase; }

/* The dark "Aller à la connexion" / login buttons must keep WHITE text even
   though they are /login links (the generic auth login-link rule colours them grey). */
.auth-card a.btn-dark,
.auth-card a.btn-dark:hover { color: #fff !important; }
.auth-card a.btn-ghost-dark { color: var(--ink-900) !important; }

/* ============================================================
   RESPONSIVE + POLISH PASS (2026-06)
   Fluid type · orb fit · no-overlap badges · slimmer search ·
   card float + highlighted titles. Appended last so it wins.
   ============================================================ */

/* ── 1. Fluid typography ───────────────────────────────────
   Lower the floors so headings shrink gracefully on phones
   instead of overflowing. */
.hero-title {
  font-size: clamp(2.65rem, 10.5vw, 168px) !important;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}
.hero-sub { font-size: clamp(1rem, 3.4vw, 28px) !important; }
.t-display { font-size: clamp(1.85rem, 5vw, 56px) !important; line-height: 1.05; }
.t-hero    { font-size: clamp(2.4rem, 7.5vw, 96px) !important; }
.page-hero-title { font-size: clamp(2rem, 6vw, 72px) !important; }
.t-eyebrow { font-size: clamp(11px, 1.4vw, 13px); }

@media (max-width: 600px) {
  .hero { padding: 90px 18px 64px; min-height: auto; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── 2. 3D orb: fit + fade on small screens ────────────────
   The canvas already fills its box and the camera now pulls
   back (orb3d.js); here we keep it from dominating tiny
   viewports and protect text legibility. */
@media (max-width: 760px) {
  .hero-3d { opacity: 0.7; }
  .hero-halo { transform: translate(-50%, -50%) scale(0.7); }
}
@media (max-width: 480px) {
  .hero-3d { opacity: 0.45; }
  .hero-halo { opacity: 0.6; }
}

/* ── 3. Hero orbit cards: never overlap the headline ───────
   They are decorative; below the comfortable threshold they
   only get in the way, so retire them cleanly. */
@media (max-width: 1040px) {
  .orbit-card { transform: scale(0.85) translate(-50%, -50%) !important; }
}
@media (max-width: 900px) {
  .orbit-card { display: none !important; }
}

/* ── 4. Group-card badges: side-by-side, wrap, never stack
   on top of each other. The engagement pill now lives in the
   left group next to the type badge. */
.gc-badges { flex-wrap: wrap; row-gap: 8px; }
.gc-badges-l {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; min-width: 0;
}
.gtype-badge { white-space: nowrap; }
.gc-badges .badge { white-space: nowrap; }
/* On very tight cards let the status badge drop below cleanly. */
@media (max-width: 380px) {
  .gc-badges { gap: 6px; }
}

/* ── 5. Explore search bar: slimmer + capped width ─────────*/
.filter-bar {
  padding: 8px 10px 8px 8px;
  gap: 10px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 80px;
}
.filter-search { padding: 0 12px; gap: 8px; }
.filter-search input {
  font-size: 15px;
  padding: 9px 0;
}
@media (max-width: 880px) {
  .filter-bar { max-width: 100%; padding: 10px; }
}

/* ── 6. Card interactivity: gentle float + glowing title ───*/
.gc, .cond-card, .di-card, .biz-tier-card {
  transition: transform .28s var(--ease-out-soft),
              box-shadow .28s var(--ease-out-soft);
  will-change: transform;
}
.gc:hover, .cond-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -22px rgba(20, 20, 60, 0.34);
}
.gc:hover .gc-title, .cond-card:hover .cond-title {
  color: var(--c-violet);
}
.gc-title, .cond-title {
  transition: color .28s var(--ease-out-soft), text-shadow .28s var(--ease-out-soft);
}
.gc:hover .gc-title {
  text-shadow: 0 0 22px rgba(139, 92, 246, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .gc, .cond-card, .di-card, .biz-tier-card { transition: none; }
  .gc:hover, .cond-card:hover { transform: none; }
}

/* The live "preview" card on the create flow gets the same lift. */
.light-block .gc:hover { transform: translateY(-6px); }

/* ── Quick "Intéressé" action on cards (desktop hover-reveal) ──────────── */
.gc-quick {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  color: var(--ink-700); background: rgba(255,255,255,0.96);
  border: 1px solid var(--line); box-shadow: 0 6px 18px -10px rgba(20,20,60,0.4);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .2s var(--ease-out-soft), transform .2s var(--ease-out-soft), background .2s, color .2s, border-color .2s;
}
.gc:hover .gc-quick, .cond-card:hover .gc-quick, .gc-quick:focus-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gc-quick.is-on {
  color: #fff; background: var(--c-violet, #7c5cff); border-color: transparent;
}
.gc-quick:disabled { opacity: .6; cursor: default; }
/* Touch / no-hover devices: keep the action permanently visible (fallback simple). */
@media (hover: none) {
  .gc-quick { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-quick { transition: opacity .2s linear; transform: none; }
}

/* ============================================================
   DESIGN PASS (2026-06) — échelle −20% + finitions
   Appended last so it wins.
   ============================================================ */

/* ── 1. Échelle globale −20% ───────────────────────────────
   Design px-heavy (pas de tokens d'échelle) -> le zoom racine fait un
   downscale UNIFORME et fidèle (typo, espacements, composants, orbe) en
   gardant les proportions. Le défaut (100%) rend comme l'ancien ~80%. */
html { zoom: 0.8; }

/* ── 2. Orbe du hero : −20% pour suivre l'échelle ──────────
   Le hero est dimensionné en vh : le zoom racine ne le réduit donc PAS.
   On applique un scale explicite à la couche de l'orbe (le canvas se
   redimensionne déjà via ResizeObserver dans orb3d.js, et un downscale CSS
   d'un canvas haute résolution reste net). */
.hero-3d { transform: scale(0.8); transform-origin: 50% 44%; }
@media (max-width: 480px) { .hero-3d { transform: scale(0.72); } }

/* ── 5. Carte d'aperçu "en direct" : flottement + titre en lumière ─
   (.gc l'a déjà ; la carte d'aperçu n'est pas un .gc, on l'ajoute.) */
.cg-preview-card {
  transition: transform .28s var(--ease-out-soft), box-shadow .28s var(--ease-out-soft);
  will-change: transform;
}
.cg-preview-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -22px rgba(20, 20, 60, 0.34);
}
.cg-pc-title { transition: color .28s var(--ease-out-soft), text-shadow .28s var(--ease-out-soft); }
.cg-preview-card:hover .cg-pc-title {
  color: var(--c-violet);
  text-shadow: 0 0 22px rgba(139, 92, 246, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .cg-preview-card { transition: none; }
  .cg-preview-card:hover { transform: none; }
}

/* ============================================================
   TRUST TIERS (système de confiance) — breakdown, badge, phone, dépôt
   ============================================================ */
.trust-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.trust-breakdown .tb-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px;
  border-radius: 12px; background: var(--bg-2); text-align: center;
}
.trust-breakdown .tb-v { font-size: 16px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1; }
.trust-breakdown .tb-l { font-size: 10.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.03em; }
/* Pré-réservés : le seul engagement qui compte → mis en avant (bleu electric). */
.trust-breakdown .tb-reserved { background: rgba(10,132,255,0.10); }
.trust-breakdown .tb-reserved .tb-v { color: var(--c-electric); }
.trust-breakdown.is-compact .tb-item { padding: 7px 4px; }
.trust-breakdown.is-compact .tb-v { font-size: 15px; }

/* Sélecteur de créneau (modale pré-réservation) */
.slot-pick { margin-bottom: 12px; display: grid; gap: 8px; }
.slot-pick > strong { font-size: 14px; color: var(--ink-900); }
.slot-opts { display: grid; gap: 6px; }
.slot-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; font-size: 14px; color: var(--ink-700); }
.slot-opt.is-active { border-color: rgba(10,132,255,0.4); background: rgba(10,132,255,0.06); color: var(--ink-900); }

/* Vérif téléphone intégrée à la modale de pré-réservation (flux fusionné) */
.prv-verify { margin-bottom: 14px; padding: 14px 16px; border: 1px solid rgba(10,132,255,0.25);
  background: rgba(10,132,255,0.05); border-radius: 14px; display: grid; gap: 12px; }
.prv-verify-head { display: grid; gap: 3px; }
.prv-verify-head strong { font-size: 14px; color: var(--ink-900); }
.prv-verify-head span { font-size: 12.5px; color: var(--ink-500); }

/* Pay-check (modale pré-réservation) — récap argent simulé */
.paycheck { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--bg-2); display: grid; gap: 4px; }
.paycheck .pc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-700); }
.paycheck .pc-row strong { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.paycheck .pc-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 15px; }
.paycheck .pc-total strong { color: var(--c-electric); }
.paycheck .pc-note { font-size: 12px; color: var(--ink-500); margin: -2px 0 2px; }
/* Mention rassurante sous le bouton de pré-réservation (acompte fixe/déduit/remboursé). */
.deposit-reassure { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-500); }
.deposit-reassure strong { color: var(--ink-900); }
/* Reçu / confirmation des termes (modale après pré-réservation). */
.prv-receipt .rcpt-sub { margin: 0 0 12px; font-size: 13px; color: var(--ink-500); }
.prv-receipt .rcpt-terms { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-700); line-height: 1.45; }
.prv-receipt .rcpt-terms strong { color: var(--ink-900); }

/* Deal conclu / archivage (carte) — sobre, sans emphase */
.gc-concluded { display: inline-flex; align-items: center; margin: 4px 0 0; padding: 2px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-500); background: var(--bg-2); border: 1px solid var(--line); width: fit-content; }
.gc-concluded.is-archived { color: var(--ink-300); }

/* Dashboard entreprise : encart prix ciblé sur le secteur (remplace le diagramme) */
.sector-hint { display: grid; gap: 8px; padding: 4px 2px; }
.sector-hint-main { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-700); }
.sector-hint-main strong { color: var(--ink-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.sector-hint-note { margin: 0; font-size: 12.5px; color: var(--ink-500); }
.sector-hint-empty { margin: 0; font-size: 13.5px; color: var(--ink-500); line-height: 1.5; padding: 6px 2px; }

/* Dashboard membre : onglets (origine) + sous-filtre (engagement) + carte+CTA */
.origin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.origin-tab { appearance: none; background: none; border: none; cursor: pointer; padding: 8px 4px; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; color: var(--ink-500); border-bottom: 2px solid transparent; }
.origin-tab:hover { color: var(--ink-700); }
.origin-tab.is-active { color: var(--ink-900); border-bottom-color: var(--c-electric); }
.origin-tab .chip-n { font-variant-numeric: tabular-nums; color: var(--ink-500); font-size: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.origin-tab.is-active .chip-n { color: var(--c-electric); border-color: rgba(10,132,255,0.30); }
.dash-subfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dash-subfilter .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2);
  font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.dash-subfilter .chip:hover { border-color: rgba(10,132,255,0.3); }
.dash-subfilter .chip.is-active { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.35); color: var(--ink-900); }
.dash-subfilter .chip-n { font-variant-numeric: tabular-nums; color: var(--ink-500); }
.dash-subfilter .chip.is-active .chip-n { color: var(--c-electric); }
.dash-sec-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.dash-sec-head strong { font-size: 13.5px; color: var(--ink-900); }
.dash-sec-head .chip-n { font-variant-numeric: tabular-nums; color: var(--ink-500); font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; }
/* Accordéon du dashboard membre (vues Intéressés / Pré-réservés). */
.dash-acc { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); overflow: hidden; }
.dash-acc.is-open { background: #fff; }
.dash-acc-head { width: 100%; appearance: none; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; color: var(--ink-900); }
.dash-acc-head:hover { background: rgba(10,132,255,0.04); }
.dash-acc-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.dash-acc-title .chip-n { font-variant-numeric: tabular-nums; color: var(--ink-500); font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; }
.dash-acc.is-open .dash-acc-title .chip-n { background: rgba(10,132,255,0.10); border-color: rgba(10,132,255,0.30); color: var(--c-electric); }
.dash-acc .grid-cards { padding: 4px 16px 16px; }
/* Grilles de cartes du DASHBOARD MEMBRE uniquement (`grid-cards light-block`) : grille
   basée sur le CONTENEUR (.dash-main ~685–1060px), pas sur la largeur d'écran → cartes
   à taille constante, plus jamais « géantes » en 2 colonnes. `min(300px,100%)` évite tout
   débordement à 320px. !important pour battre les règles mobiles globales `.grid-cards`.
   N'affecte NI l'Explorer (`.grid-cards` nu) NI admin/entreprise (pas de `.grid-cards`). */
.grid-cards.light-block { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important; }
.dash-acc-empty { margin: 0; padding: 0 16px 16px; color: var(--ink-500); font-size: 13px; }
/* (.dash-card* retirés : le CTA du dashboard est désormais intégré DANS la carte via
   le slot demandCta de GroupCard, comme l'Explorer — plus de bouton externe flottant.) */
@media (max-width: 480px) { .origin-tab { font-size: 13px; } }

/* Filtre des recommandations (dashboard membre) : pills wrappantes, tokens existants. */
.reco-sub { margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-300); }
.reco-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.reco-pill {
  border: 1px solid var(--line); background: #fff; color: var(--ink-500);
  font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.reco-pill:hover { border-color: var(--ink-300); color: var(--ink-700); }
.reco-pill.is-active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
@media (max-width: 480px) { .reco-pill { font-size: 12.5px; padding: 6px 11px; } }

/* Inbox chef : offres reçues sur ses demandes (dashboard) */
.inbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark); color: var(--ink-900); text-decoration: none; transition: transform .15s, border-color .15s; }
.inbox-row:hover { transform: translateY(-1px); border-color: rgba(10,132,255,0.4); }
/* Offre sélectionnée (fiche groupe) */
.offer-row-selected { border-color: rgba(48,209,88,0.4) !important; background: rgba(48,209,88,0.06); }

.credible-badge { display: inline-flex; align-items: center; gap: 6px; }
.credible-badge .cb-dot { width: 6px; height: 6px; border-radius: 50%; background: #1f9d57; box-shadow: 0 0 0 3px rgba(48,209,88,0.18); }

.gc-foot-sub { margin-top: 12px; grid-template-columns: 1fr 1fr; }

.pv-sub  { color: var(--ink-500); font-size: 14px; margin: 0; line-height: 1.5; }
.pv-hint { color: var(--ink-300); font-size: 12px; margin: 2px 0 0; text-align: center; }
.pv-link { background: none; border: none; color: var(--c-electric); font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px; justify-self: center; }

.phone-nudge {
  width: 100%; margin-top: 14px; padding: 11px 14px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, rgba(10,132,255,0.07), rgba(139,92,246,0.07));
  border: 1px solid rgba(10,132,255,0.18); color: var(--ink-700);
  font-size: 13px; font-weight: 500; text-align: left; transition: transform .15s, box-shadow .15s;
}
.phone-nudge:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(10,132,255,0.4); }

.deposit-box { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 10px; }
.deposit-head { display: flex; flex-direction: column; gap: 3px; }
.deposit-head strong { font-size: 14px; color: var(--ink-900); }
.sim-tag { font-size: 11px; color: #b45309; background: rgba(245,158,11,0.12); padding: 2px 8px; border-radius: 99px; align-self: flex-start; }
.deposit-active { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-700); }

/* Dashboard : encart de vérif téléphone (non bloquant) */
.verify-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(10,132,255,0.07), rgba(139,92,246,0.07));
  border: 1px solid rgba(10,132,255,0.18);
}
.verify-nudge strong { color: var(--ink-900); font-size: 15px; }
.verify-nudge p { margin: 2px 0 0; color: var(--ink-500); font-size: 13px; }
.verify-nudge .btn-dark { flex-shrink: 0; }

/* ============================================================
   OFFER TIERS (volume discount) — bloc user + builder partenaire
   ============================================================ */
.tier-block { margin-top: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(139,92,246,0.22);
  background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(10,132,255,0.05)); display: grid; gap: 10px; }
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-violet); }
.tier-best { font-size: 12.5px; font-weight: 700; color: #1f9d57; background: rgba(48,209,88,0.12); padding: 3px 10px; border-radius: 99px; }
.tier-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tier-stats > div { display: grid; gap: 2px; }
.tier-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-500); }
.tier-v { font-size: 16px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tier-bar { height: 8px; background: rgba(0,0,0,0.07); border-radius: 99px; overflow: hidden; }
.tier-bar > div { height: 100%; background: linear-gradient(90deg, var(--c-electric), var(--c-violet)); border-radius: 99px; transition: width .45s var(--ease-apple); }
.tier-unlock { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-900); }
.tier-share { border-top: 1px solid rgba(0,0,0,0.06); padding-top: 8px; }
.tier-share strong { font-size: 13.5px; color: var(--ink-900); }
.tier-share p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.tier-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; color: var(--c-electric); background: rgba(10,132,255,0.10); width: fit-content; }
/* Ladder des paliers de prix (offre partenaire) — « À partir de N → prix € ». */
.tl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid transparent;
  font-size: 13px; color: var(--ink-700); }
.tl-row.is-reached { color: var(--ink-500); }
.tl-row.is-current { background: rgba(10,132,255,0.10); border-color: rgba(10,132,255,0.32); color: var(--ink-900); font-weight: 600; }
.tl-cond strong { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.tl-price { font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-row.is-current .tl-price { color: var(--c-electric); }
.tl-pct { font-size: 11.5px; font-weight: 700; color: #1f9d57; margin-left: 4px; }
/* Figement de palier (026) — visible carte membre + fiche entreprise (clair & sombre) */
.tier-freeze { margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(139,92,246,0.28); background: rgba(139,92,246,0.07);
  font-size: 13px; line-height: 1.5; color: var(--ink-700); display: grid; gap: 3px; }
.tier-freeze strong { color: var(--ink-900); font-weight: 700; }
.tier-freeze .tf-next { color: var(--ink-500); font-size: 12.5px; }
.tier-freeze.is-frozen { display: flex; align-items: center; gap: 7px;
  border-color: rgba(48,209,88,0.35); background: rgba(48,209,88,0.10); color: #1f9d57; }
.tier-freeze.is-frozen strong { color: #1f9d57; }
.tier-freeze.compact { margin-top: 0; padding: 6px 10px; font-size: 12px; }
.tier-freeze.compact .tf-next { display: none; }
/* Avant le 1er palier : état illimité (neutre, pas d'alarme de décompte). */
.tier-freeze.is-unlimited { display: flex; align-items: center; gap: 7px;
  border-color: var(--line); background: var(--bg-2); color: var(--ink-500); }
.tier-freeze.is-unlimited strong { color: var(--ink-900); }
/* Encart explicatif du cycle de palier à la création d'une offre. */
.tier-cycle-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(10,132,255,0.22);
  background: rgba(10,132,255,0.05); font-size: 13px; line-height: 1.5; color: var(--ink-200); }
.tier-cycle-note strong { color: var(--ink-900); }
.pte-add:disabled { opacity: .5; cursor: default; }
/* ── Demande membre SANS offre : pitch + prix du chef + faisabilité ────────── */
.demand-pitch .demand-pitch-lead { color: var(--ink-700); line-height: 1.6; font-size: 14.5px; margin: -2px 0 14px; }
.demand-pitch-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-700); margin-bottom: 12px; }
.demand-pitch-price strong { font-family: var(--font-display); font-size: 18px; color: var(--ink-900); }
.feasibility { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.feas-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feas-label { font-size: 13.5px; color: var(--ink-700); }
.feas-val { font-family: var(--font-display); font-size: 15.5px; text-transform: capitalize; }
.feas-reason { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-500); }
.feas-high { border-color: rgba(48,209,88,0.30); background: rgba(48,209,88,0.07); }
.feas-high  .feas-val { color: #1f9d57; }
.feas-mid  { border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.07); }
.feas-mid   .feas-val { color: #b45309; }
.feas-low  { border-color: rgba(244,63,94,0.30);  background: rgba(244,63,94,0.07); }
.feas-low   .feas-val { color: #e11d48; }
@media (max-width: 767px) {
  .demand-pitch .demand-pitch-lead { font-size: 13.5px; }
  .demand-pitch-price { padding: 9px 11px; }
  .demand-pitch-price strong { font-size: 16px; }
  .feasibility { padding: 10px 11px; }
  .feas-val { font-size: 14.5px; }
}
/* Tableau sombre (Mes offres) : texte lisible sur fond foncé */
.dark-table .tier-freeze { color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.dark-table .tier-freeze strong { color: #fff; }
.dark-table .tier-freeze.is-frozen { color: #4ce6a4; background: rgba(48,209,88,0.14); border-color: rgba(48,209,88,0.3); }
.dark-table .tier-freeze.is-frozen strong { color: #4ce6a4; }
/* Builder */
.tb-rows { display: grid; gap: 8px; }
.tb-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 2fr 28px; gap: 8px; align-items: center; }
.tb-row-head span { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.03em; }
.tb-del { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; color: var(--ink-500); font-size: 16px; line-height: 1; }
.tb-del:hover { color: #d33; border-color: #f3b4b4; }
.tier-fee-note { font-size: 12px; color: var(--ink-300); margin: 0; }
@media (max-width: 560px) { .tb-row { grid-template-columns: 1fr 1fr; } .tb-row-head { display: none; } }

/* ============================================================
   GROUPLY CODE (conversion) — bloc user
   ============================================================ */
.code-block { margin-top: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(10,132,255,0.22);
  background: linear-gradient(135deg, rgba(10,132,255,0.06), rgba(34,211,238,0.05)); display: grid; gap: 10px; }
.code-head { display: flex; flex-direction: column; gap: 4px; }
.code-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-electric); }
.code-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-900); background: #fff; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 10px 14px; text-align: center; }
.code-status { display: flex; }
.code-used-note { margin: 0; font-size: 12.5px; color: var(--ink-500); }

/* Phase B — badge entreprise vérifiée */
.company-verified { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.company-verified .cv-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  background:rgba(48,209,88,0.14); color:#1f9d57; font-weight:700; font-size:12.5px; border:1px solid rgba(48,209,88,0.3); }
.company-verified .cv-check { font-weight:900; }
.company-verified .cv-sub { font-size:12px; color:var(--ink-300); }
body[data-dark="true"] .company-verified .cv-sub { color:var(--ink-300); }
/* section vérification (profil entreprise) */
.verif-box { display:grid; gap:12px; }
.verif-status-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.verif-locked { opacity:.6; pointer-events:none; }
.verif-note { font-size:13px; color:#c2410c; background:rgba(249,115,22,0.1); border:1px solid rgba(249,115,22,0.25);
  padding:8px 12px; border-radius:10px; }

/* Phase C — badge compteur notifications */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; margin-left:auto; border-radius:999px; background:#ff3b30; color:#fff; font-size:11px; font-weight:700; }
.dash-link { display:flex; align-items:center; gap:10px; }

/* Phase A — champ téléphone +33 */
.phone-field { display:flex; align-items:stretch; }
.phone-field .phone-cc { display:flex; align-items:center; padding:0 12px; border:1px solid var(--line-dark,#2a2a33);
  border-right:none; border-radius:10px 0 0 10px; background:rgba(255,255,255,0.04); color:var(--ink-300); font-weight:600; font-size:14px; }
.phone-field .phone-input { border-radius:0 10px 10px 0 !important; flex:1; }
.phone-field.is-disabled { opacity:.6; }
body[data-dark="true"] .phone-field .phone-cc { background:rgba(255,255,255,0.04); }

/* Phase D — escrow dépôts */
.escrow-banner { font-size:13px; padding:9px 12px; border-radius:10px; margin:8px 0 10px; line-height:1.45; }
.escrow-banner.free { background:rgba(48,209,88,0.12); color:#1f9d57; border:1px solid rgba(48,209,88,0.28); }
.escrow-banner.lock { background:rgba(249,115,22,0.12); color:#c2410c; border:1px solid rgba(249,115,22,0.28); }
.escrow-banner.ok   { background:rgba(10,132,255,0.12); color:#0a84ff; border:1px solid rgba(10,132,255,0.28); }
.rules-box { background:var(--bg-2,rgba(255,255,255,0.03)); border:1px solid var(--line,rgba(0,0,0,0.1)); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.rules-box > strong { display:block; margin-bottom:8px; }
.rules-box ul { margin:0 0 8px; padding-left:18px; display:grid; gap:6px; font-size:13.5px; line-height:1.5; }
.rules-box .sim-tag { font-size:12px; }
.rules-box .deposit-simple { margin:8px 0; font-size:13px; line-height:1.5; color:var(--ink-700); font-weight:500; }
/* Fourchettes de prix (028) — avertissement doux / indicateur OK / garde-fou dur */
.range-hint { margin-top:6px; font-size:12.5px; line-height:1.45; border-radius:8px; padding:6px 9px; }
.range-hint strong { font-weight:700; }
.range-hint.is-soft { color:#92600b; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.28); }
.range-hint.is-hard { color:#b42318; background:rgba(239,68,68,0.10); border:1px solid rgba(239,68,68,0.30); }
.range-hint.is-ok { display:inline-flex; align-items:center; gap:5px; color:#1f9d57; background:rgba(48,209,88,0.10); border:1px solid rgba(48,209,88,0.28); width:fit-content; }
/* Tables sombres (admin) : range-hint clair OK. Le builder d'offre est sur fond CLAIR
   → on n'applique PAS les variantes claires « fond sombre » (sinon illisible) : les
   `.range-hint.is-*` de base (vert/ambre/rouge foncés, lisibles) s'appliquent. */
.dark-table .range-hint { color:#f0c068; }
.price-suggest { margin-top:6px; font-size:12.5px; color:var(--ink-500); }
.price-suggest button { background:none; border:none; color:var(--c-electric); font-weight:600; cursor:pointer; padding:0; font-size:12.5px; }

/* ── Infos du deal (030) — panneau structuré à sens unique (plus de chat) ─── */
.deal-info { padding: 0; overflow: hidden; }
.di-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.di-title { font-size: 15px; color: var(--ink-900); }
.di-company { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-500); }
/* Verrouillé / vide */
.di-locked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 32px 22px; color: var(--ink-500); }
.di-locked-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-300); margin-bottom: 4px; }
.di-locked strong { color: var(--ink-900); font-size: 15px; }
.di-locked p { margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 360px; }
.di-empty { color: var(--ink-500); font-size: 14px; padding: 20px 16px; }
/* Corps lecture seule */
.di-body { display: grid; gap: 14px; padding: 16px; }
.di-block { display: grid; gap: 3px; }
.di-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); }
.di-block p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-900); white-space: pre-wrap; word-break: break-word; }
.di-foot-note { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-300); }
/* Formulaire (entreprise du deal) */
.di-form { display: grid; gap: 14px; padding: 16px; }
.di-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.di-note { margin: 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.di-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 16px 16px; }
.di-body + .di-actions, .di-empty + .di-actions { padding-top: 4px; }
@media (max-width: 768px) {
  .di-head { padding: 12px; }
  .di-body, .di-form { padding: 12px; }
  .di-form-row { grid-template-columns: 1fr; }
  .di-actions { padding: 0 12px 12px; flex-direction: column-reverse; }
  .di-actions .btn { width: 100%; }
}

/* Phase E — étiquette Sponsorisé (distincte du badge Vérifié) */
.sponsored-pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(139,92,246,0.14); color:#7c3aed; border:1px solid rgba(139,92,246,0.3); }

/* ============================================================
   RESPONSIVE — Lot 1 : fondations + navigation
   Desktop (≥1024px) STRICTEMENT inchangé : les wrappers desktop sont
   `display:contents` (aucun box), les éléments mobiles sont `display:none`.
   Tout bascule uniquement sous 768px.
   ============================================================ */

/* Wrappers nav neutres sur desktop + déclencheurs mobiles masqués */
.nav-links-d, .nav-auth-d { display: contents; }
.nav-burger, .nav-cta-m { display: none; }
.nav-burger { width: 44px; height: 44px; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center; background: transparent; border: none;
  cursor: pointer; padding: 0; color: inherit; }
.nav-burger span { width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* Drawer de navigation (mobile) */
.nav-drawer-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; justify-content: flex-end;
  animation: navFade .2s ease; }
.nav-drawer { width: min(84vw, 340px); height: 100%; background: var(--bg, #fff); display: flex;
  flex-direction: column; padding: 16px 16px 24px; box-shadow: -16px 0 50px rgba(0,0,0,0.25);
  overflow-y: auto; animation: navSlide .26s cubic-bezier(.22,.61,.36,1); }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nav-drawer-close { width: 44px; height: 44px; display: grid; place-items: center; border: none;
  background: var(--bg-2, #f1f1f4); border-radius: 50%; cursor: pointer; color: var(--ink-900); }
.nav-drawer-links { display: flex; flex-direction: column; gap: 2px; }
.nav-drawer-link { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px;
  color: var(--ink-900); text-decoration: none; font-size: 16px; font-weight: 500; background: none; border: none;
  text-align: left; width: 100%; cursor: pointer; }
.nav-drawer-link:hover, .nav-drawer-link.is-active { background: var(--bg-2, #f1f1f4); }
.nav-drawer-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line); }
.nav-drawer-foot .lang-toggle { align-self: flex-start; }
/* Menu compte mobile : en-tête + intitulés de section + séparateur + ligne Langue. */
.nav-drawer-acct { padding: 2px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.nav-drawer-label { margin: 8px 12px 2px; font-size: 11px; font-weight: 600; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.04em; }
.nav-drawer-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.nav-drawer-langrow { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; font-size: 14px; color: var(--ink-900); }
@keyframes navSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes heroOrbPulse { 0%, 100% { transform: scale(1); opacity: 0.82; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-3d { animation: none !important; } }

/* Barre d'onglets + feuille « Plus » : masquées sur desktop */
.dash-tabbar, .dash-sheet-backdrop { display: none; }

@media (max-width: 768px) {
  /* — Nav : liens + bloc auth remplacés par hamburger + CTA compact — */
  .nav-links-d, .nav-auth-d { display: none !important; }
  .nav-burger, .nav-cta-m { display: inline-flex; align-items: center; }
  .nav-inner { gap: 12px; padding: 0 16px; }

  /* — Dashboards : barre d'onglets bas — */
  .dash-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: rgba(12,12,16,0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid var(--line-dark); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .dash-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; background: none; border: none; cursor: pointer; text-decoration: none;
    color: var(--ink-300); font: inherit; }
  .dash-tab.active { color: #fff; }
  .dash-tab-ic { position: relative; display: grid; place-items: center; height: 24px; }
  .dash-tab-lbl { font-size: 10px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; letter-spacing: -0.01em; }
  .dash-tab-badge { position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #ff3b30; color: #fff; font-size: 10px; font-weight: 700; display: grid;
    place-items: center; line-height: 1; }
  .dash-tab-badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: -2px; right: -4px; }

  /* — Feuille « Plus » — */
  .dash-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,0.5);
    animation: navFade .2s ease; }
  .dash-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: #16161c; border-top: 1px solid var(--line-dark);
    border-radius: 18px 18px 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: sheetUp .26s cubic-bezier(.22,.61,.36,1); }
  .dash-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.25); margin: 6px auto 10px; }
  .dash-sheet-link { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px; width: 100%;
    border-radius: 12px; background: none; border: none; cursor: pointer; text-align: left; color: var(--ink-100);
    font-size: 15px; font-weight: 500; text-decoration: none; }
  .dash-sheet-link:hover, .dash-sheet-link.active { background: rgba(255,255,255,0.06); color: #fff; }

  /* — Fondations : inputs ≥16px (anti-zoom iOS) — */
  input, select, textarea, .ff-input { font-size: 16px !important; }

  /* — Grilles / filtres rigides → 1 colonne — */
  .dash-filter-row { grid-template-columns: 1fr !important; }

  /* — Orbe d'accueil : dégradé animé CSS (pas de WebGL/Three.js sur mobile) — */
  .hero-3d {
    background: radial-gradient(circle at 50% 42%,
      rgba(139,92,246,0.45), rgba(10,132,255,0.30) 38%, rgba(34,211,238,0.16) 60%, transparent 72%);
    filter: blur(8px);
    animation: heroOrbPulse 6s ease-in-out infinite;
    will-change: transform, opacity;
  }

  /* — Typo / espacements réduits — */
  .hero-title { font-size: clamp(40px, 13vw, 60px) !important; letter-spacing: -0.035em; }
  .page-hero-title { font-size: clamp(30px, 8vw, 44px) !important; }
  .biz-hero-title { font-size: clamp(30px, 8vw, 46px) !important; }
  .section { padding: 52px 0 !important; }
  .container, .container-wide { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Téléphones étroits : KPI 2-col → 1-col + barre resserrée */
@media (max-width: 480px) {
  .kpi-grid, .two-col { grid-template-columns: 1fr !important; }
  .dash-tab-lbl { font-size: 9px; }
}

/* Garde-fou : aucun overlay mobile ne fuit sur desktop */
@media (min-width: 769px) {
  .nav-drawer-backdrop, .dash-tabbar, .dash-sheet-backdrop { display: none !important; }
}

/* ============================================================
   RESPONSIVE — Lot 2 : contenus denses
   ============================================================ */

/* Labels de cellule (cartes) : masqués sur desktop (le <thead> sert de libellé). */
.dt-l { display: none; }

@media (max-width: 768px) {
  /* — Tableaux denses → cartes empilées (libellé : valeur) — */
  .dark-table { display: block; }
  .dark-table thead { display: none; }
  .dark-table tbody { display: block; }
  .dark-table tr { display: block; border: 1px solid var(--line-dark); border-radius: 14px;
    background: rgba(255,255,255,0.04); padding: 2px 14px 8px; margin-bottom: 10px; }
  .dark-table tr:hover td { background: transparent; }
  .dark-table td { display: flex; align-items: center; gap: 14px; justify-content: space-between;
    padding: 9px 0 !important; border: none !important; min-width: 0; font-size: 14px; }
  .dark-table td.dt-head { display: block; padding: 10px 0 8px !important;
    border-bottom: 1px solid var(--line-dark) !important; margin-bottom: 2px; }
  .dt-l { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink-300); flex-shrink: 0; }
  .dark-table td > *:not(.dt-l) { margin-left: auto; min-width: 0; text-align: right; }
  .dark-table td .ff-select-wrap, .dark-table td .cs-field, .dark-table td [class*="select"] { width: 100%; max-width: 220px; }
  /* cartes blanches (tables claires éventuelles) */
  .table-light .dark-table tr { background: #fff; border-color: var(--line); }

  /* — Cartes de groupe : on garde l'essentiel, le reste derrière le clic — */
  .gc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gc-foot-sub { display: none; }

  /* — Carte (map) : hauteur adaptée + popup tactile — */
  .gmap-canvas { height: 300px !important; min-height: 240px !important; }
  .gmap-wrap { min-height: 0 !important; }
  .maplibregl-popup-content { font-size: 13px !important; padding: 10px 12px !important; }
  .gmap-pop-link { display: inline-block; min-height: 36px; line-height: 36px; }

  /* — Graphiques analytics : 1 colonne, pas de coupure — */
  .anl-grid-2, .anl-grid-2b, .anl-grid-3 { grid-template-columns: 1fr !important; }
  .anl-chart-card, .recharts-responsive-container { min-width: 0 !important; }

  /* — Modales → feuilles bas d'écran, scrollables — */
  .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .modal-card { width: 100% !important; max-width: 100% !important; max-height: 90vh !important;
    border-radius: 18px 18px 0 0 !important; overflow-y: auto !important;
    animation: sheetUp .26s cubic-bezier(.22,.61,.36,1); }
  .modal-card .form-row-2 { grid-template-columns: 1fr !important; }
}

/* — Sous-textes décoratifs masqués sur très petit écran — */
@media (max-width: 480px) {
  .kpi-dark .sub, .anl-kpi-sub, .gc-eyebrow + .gc-muted, .dash-deco-sub { display: none; }
}

/* ════════════════════════════════════════════════════════════
   CROISSANCE — feuille de partage + blocs d'invitation
   ════════════════════════════════════════════════════════════ */
.share-sheet { display: grid; gap: 10px; margin-top: 12px; }
.share-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 480px) { .share-row { grid-template-columns: repeat(2, 1fr); } }
.share-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px; border-radius: 12px; cursor: pointer;
  background: var(--bg-2, rgba(0,0,0,0.04)); border: 1px solid var(--line, rgba(0,0,0,0.1));
  color: var(--ink-700, #333); font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: transform .15s var(--ease-apple), box-shadow .2s, background .2s;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); background: var(--bg-1, #fff); }
.share-btn svg { color: var(--ink-700, #333); }
.share-btn.share-wa { background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.30); color: #0b8a43; }
.share-btn.share-wa svg { color: #0b8a43; }
.share-more { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .share-more { grid-template-columns: repeat(2, 1fr); } }
.share-chip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border-radius: 10px; text-decoration: none; cursor: pointer;
  background: transparent; border: 1px solid var(--line, rgba(0,0,0,0.1));
  color: var(--ink-500, #666); font-size: 12px; font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.share-chip:hover { background: var(--bg-2, rgba(0,0,0,0.04)); color: var(--ink-900, #111); border-color: var(--ink-300, #bbb); }
.share-chip svg { color: currentColor; }
.share-x { font-weight: 800; font-size: 14px; line-height: 1; }

/* Bloc « Invite et débloque le palier » */
.invite-unlock {
  margin-top: 16px; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(139,92,246,0.07), rgba(34,211,238,0.04));
  border: 1px solid var(--line, rgba(0,0,0,0.08));
}
.iu-head { display: flex; align-items: center; gap: 8px; color: var(--ink-900, #111); font-size: 15px; }
.iu-head svg { color: var(--c-electric, #0a84ff); }
.iu-gap { margin: 8px 0 0; font-size: 14px; color: var(--ink-700, #444); line-height: 1.5; }
.iu-num { color: var(--c-electric, #0a84ff); }

/* Encart de partage contextuel (dismissable) */
/* Bandeau de succès après join/pré-réservation (sans partage, le partage est ailleurs) */
.ctx-success {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px;
  background: rgba(48,209,88,0.10); border: 1px solid rgba(48,209,88,0.30);
}
.ctx-success-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #1f9d57; color: #fff; }
.ctx-success-text { flex: 1; min-width: 0; color: var(--ink-900, #111); font-size: 14.5px; }
.ctx-success-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  border: none; background: transparent; color: var(--ink-300, #aaa); cursor: pointer; }
.ctx-success-x:hover { background: rgba(0,0,0,0.05); color: var(--ink-700, #444); }

/* Top ambassadeurs (page groupe) */
.ambassadors { margin-top: 16px; }
.amb-head { display: flex; align-items: center; gap: 8px; color: var(--ink-900, #111); font-size: 15px; margin-bottom: 10px; }
.amb-head svg { color: #f5a623; }
.amb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.amb-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.amb-rank {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px;
  background: var(--bg-2, rgba(0,0,0,0.05)); color: var(--ink-700, #444); font-size: 12px; font-weight: 700;
}
.amb-name { flex: 1; color: var(--ink-900, #111); font-weight: 600; }
.amb-stat { color: var(--ink-500, #666); font-size: 12.5px; }
.amb-stat strong { color: var(--ink-900, #111); }

/* « Ton impact » (dashboard membre) */
.impact-card {
  padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,132,255,0.06), rgba(139,92,246,0.04));
  border: 1px solid var(--line, rgba(0,0,0,0.08));
}
.impact-head { display: flex; align-items: center; gap: 8px; color: var(--ink-900, #111); font-size: 15px; margin-bottom: 14px; }
.impact-head svg { color: var(--c-electric, #0a84ff); }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.impact-cell { text-align: center; }
.impact-num { font-family: var(--font-display, inherit); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink-900, #111); line-height: 1; }
.impact-lbl { margin-top: 6px; font-size: 12.5px; color: var(--ink-500, #666); }
.impact-empty { margin: 14px 0 0; font-size: 13px; color: var(--ink-500, #666); text-align: center; }

/* Admin — Croissance */
.anl-section-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900, #fff); }
.growth-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.growth-top-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.growth-rank { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; background: rgba(139,92,246,0.14); color: #8b5cf6; font-size: 12px; font-weight: 700; }
.growth-title { flex: 1; color: var(--ink-900, #111); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-stat { color: var(--ink-500, #666); font-size: 12px; white-space: nowrap; }
.growth-stat strong { color: var(--ink-900, #111); }

/* ════════════════════════════════════════════════════════════
   SIMPLIFICATION TEXTE — MOBILE UNIQUEMENT (<768px)
   Le desktop (≥768px) est INCHANGÉ : .only-sm est masqué, .hide-sm
   garde son affichage par défaut. Sous 768px on inverse : la version
   courte (.only-sm) apparaît, la longue (.hide-sm) disparaît.
   ════════════════════════════════════════════════════════════ */
.only-sm { display: none !important; }
@media (max-width: 767px) {
  .only-sm { display: revert !important; }
  .hide-sm { display: none !important; }
}

/* Repli « En savoir plus » — mobile seulement. Desktop : tout visible, pas de bouton. */
.readmore-btn { display: none; }
@media (max-width: 767px) {
  .readmore.is-collapsed .readmore-body {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .readmore-btn {
    display: inline-block; margin-top: 6px; background: none; border: none; padding: 0;
    color: var(--c-electric, #0a84ff); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
}

/* ════════════════════════════════════════════════════════════
   MISE À L'ÉCHELLE MOBILE (<768px) — proportions téléphone.
   Le DESKTOP (≥768px) n'est JAMAIS touché (toutes les règles sont
   sous max-width:767px, affinées sous 479px). Présentation seulement.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* — Cartes de groupe (explorer + accueil) : compactes, ~2 par hauteur d'écran — */
  .gc { padding: 16px; border-radius: 18px; min-height: 0; }
  .gc-title { font-size: 16.5px; line-height: 1.2; margin-bottom: 6px; min-height: 0; }
  .gc-desc { font-size: 13px; line-height: 1.4; margin-bottom: 12px; min-height: 0; -webkit-line-clamp: 2; }
  .gc-eyebrow { font-size: 11.5px; }
  .gc-progress { height: 5px; }
  .gc-progress-row { margin-bottom: 12px; }
  .gc-progress-meta { margin-top: 5px; font-size: 11px; }
  .gc-badges { margin-bottom: 10px; }
  /* Les 3 compteurs (intéressés / vérifiés / engagés) : plus petits, alignement conservé */
  .trust-breakdown { gap: 6px; margin-top: 4px; }
  .trust-breakdown .tb-item,
  .trust-breakdown.is-compact .tb-item { padding: 6px 3px; }
  .trust-breakdown .tb-v,
  .trust-breakdown.is-compact .tb-v { font-size: 13px; }
  .trust-breakdown .tb-l { font-size: 9px; letter-spacing: 0.02em; }

  /* — Ticker accueil : discret (bande basse, texte et pilules réduits) — */
  .ticker-wrap { padding: 8px 0; }
  .ticker { gap: 26px; }
  .ticker-item { font-size: 12px; gap: 8px; }
  .ticker-item .tag { font-size: 10.5px; }
  .ticker-item .dot { width: 5px; height: 5px; box-shadow: 0 0 8px rgba(48,209,88,0.6); }

  /* — Gros nombres KPI : remis à l'échelle — */
  .anl-kpi-value { font-size: 24px !important; }
  .kpi-dark .v { font-size: 24px; }
  .bhs-v { font-size: 22px; }
  .impact-num { font-size: 26px; }
  .impact-grid { gap: 10px; }
  .pc-price { font-size: 32px; }
  .bt-price { font-size: 26px; }

  /* — Icônes surdimensionnées : réduites — */
  .how-badge { width: 46px; height: 46px; border-radius: 14px; }
  .biz-value .ico { width: 40px; height: 40px; border-radius: 11px; }
  .bpc-ico, .pricing-card .pc-ico { width: 38px; height: 38px; }
  .anl-kpi-ic { width: 30px; height: 30px; }
}

@media (max-width: 479px) {
  /* — Titres : un cran plus bas sur petits téléphones — */
  .hero-title { font-size: clamp(32px, 11vw, 44px) !important; }
  .page-hero-title { font-size: clamp(24px, 7.2vw, 34px) !important; }
  .biz-hero-title { font-size: clamp(26px, 8vw, 38px) !important; }
  .t-headline, .t-display { font-size: clamp(22px, 6.6vw, 30px) !important; }
  .section { padding: 42px 0 !important; }

  /* — Cartes de groupe encore un peu plus serrées — */
  .gc { padding: 14px; }
  .gc-title { font-size: 16px; }
  .trust-breakdown .tb-v, .trust-breakdown.is-compact .tb-v { font-size: 12.5px; }

  /* — Badges / pills / boutons : tailles raisonnables — */
  .badge, .pill, .sponsored-pill, .gc-eyebrow { font-size: 11px; }
  .btn { font-size: 14px; }
  .bhs-v { font-size: 20px; }
  .anl-kpi-value { font-size: 22px !important; }
}

/* Garde-fou desktop : rien de ce qui précède ne s'applique ≥768px (déjà borné). */

/* ════════════════════════════════════════════════════════════
   FOOTER — accordéon mobile (<768px). Desktop ≥768px INCHANGÉ :
   l'en-tête bouton est neutralisé (= comme l'ancien <h4>), le chevron
   est masqué, la liste reste toujours visible.
   ════════════════════════════════════════════════════════════ */
.footer-col-head {
  display: block; width: 100%; background: none; border: none; padding: 0; margin: 0;
  text-align: left; font: inherit; color: inherit; cursor: default;
}
.footer-col-chev { display: none; }
.footer-essential { display: none; }   /* .only-sm le révèle sous 768px */

@media (max-width: 767px) {
  .footer { padding: 34px 0 22px; }
  .footer-grid { display: block; grid-template-columns: none; gap: 0; margin-bottom: 6px; }
  .footer-grid > div:first-child { margin-bottom: 16px; }   /* logo + accroche : toujours visible */
  .footer-grid > div:first-child p { max-width: none; font-size: 12.5px; }

  .footer-col { border-top: 1px solid var(--line); }
  .footer-col-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 46px; cursor: pointer;
  }
  .footer-col-head h4 { margin: 0; }
  .footer-col-chev {
    display: inline-block; color: var(--ink-300); font-size: 18px; line-height: 1;
    transition: transform .2s ease;
  }
  .footer-col.is-open .footer-col-chev { transform: rotate(90deg); }
  .footer-col ul { display: none; padding: 0 0 12px; gap: 9px; }
  .footer-col.is-open ul { display: flex; }

  .footer-essential { display: flex; align-items: center; gap: 10px; padding: 14px 0 0; font-size: 13px; }
  .footer-essential a { color: var(--ink-700); font-weight: 500; }
  .footer-essential span { color: var(--ink-300); }

  .footer-bottom { padding-top: 14px; gap: 10px; }
}

/* Orbe 3D montée en mobile (.has-orb) : on retire le dégradé/blur/scale prévus
   pour la version CSS, pour que le canvas reste net et contenu. <768px seulement
   → desktop (scale 0.8, pas de dégradé) strictement inchangé. */
@media (max-width: 767px) {
  .hero-3d.has-orb {
    background: none !important;
    filter: blur(7px) !important;
    animation: none !important;
    transform: none;
    inset: -5% 0;
    opacity: 0.6;
  }
}

/* ════════════════════════════════════════════════════════════
   CARTE DE GROUPE/OFFRE — version COMPACTE mobile (<768px).
   Essentiel seulement : titre 1 ligne, catégorie·ville, badge, barre + X/Y,
   1 ligne de compteurs. Le reste (description longue, méta, origine, budget/
   échéance) sort de la carte → page du groupe au clic. Desktop ≥768px inchangé.
   Objectif : 2,5–3 cartes par hauteur d'écran sur téléphone.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .gc { padding: 14px; gap: 0; }
  .gc-badges { margin-bottom: 8px; }
  .gc-eyebrow { font-size: 11px; margin-bottom: 1px; }
  .gc-title { font-size: 15.5px; -webkit-line-clamp: 1; min-height: 0; margin-bottom: 6px; }  /* titre 1 ligne, ellipsis */
  .gc-desc { -webkit-line-clamp: 1; font-size: 12.5px; line-height: 1.35; margin-bottom: 9px; }
  .gc .auto-origin-note { display: none; }   /* métadonnée secondaire → hors carte */
  .gc-progress { height: 4px; }
  .gc-progress-row { margin-bottom: 9px; }
  .gc-progress-meta { margin-top: 4px; font-size: 10.5px; }
  /* Compteurs : 1 ligne, chiffres + labels réduits, alignement conservé */
  .gc .trust-breakdown { gap: 5px; margin-top: 2px; }
  .gc .trust-breakdown .tb-item,
  .gc .trust-breakdown.is-compact .tb-item { padding: 5px 3px; }
  .gc .trust-breakdown .tb-v,
  .gc .trust-breakdown.is-compact .tb-v { font-size: 12px; }
  .gc .trust-breakdown .tb-l { font-size: 8.5px; letter-spacing: 0.01em; }
  .gc .tier-chip { font-size: 11px; padding: 4px 9px; margin-top: 8px; }
}
@media (max-width: 479px) {
  .gc { padding: 12px; border-radius: 16px; }
  .gc-desc { display: none; }                /* description masquée sur très petit écran */
  .gc-title { font-size: 15px; }
  .gc .trust-breakdown .tb-v,
  .gc .trust-breakdown.is-compact .tb-v { font-size: 11.5px; }
}

/* Offres d'entreprises (ConditionalOfferCard) : MÊME compaction mobile que .gc.
   Titre 1 ligne, description 1 ligne (masquée <480px), prix + jauge d'activation
   conservés (essentiel), pied de carte (ville/clôture) sorti. Desktop inchangé. */
@media (max-width: 767px) {
  .cond-card { padding: 14px; min-height: 0; border-radius: 18px; }
  .cond-head { margin-bottom: 8px; }
  .cond-title { font-size: 15.5px; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .cond-desc { font-size: 12.5px; line-height: 1.35; margin-bottom: 9px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .cond-price { font-size: 20px; margin-bottom: 9px; }
  .cond-price-cap { font-size: 11px; }
  .cond-foot { display: none; }
}
@media (max-width: 479px) {
  .cond-card { padding: 12px; border-radius: 16px; }
  .cond-card .cond-desc { display: none; }
  .cond-title { font-size: 15px; }
}

/* ============================================================
   DESIGN PASS — LOT 1 (2026-06) : cartes uniformes · prix mis en
   valeur · échelle des paliers raffinée · cartes /explore avec
   profondeur. Ajouté en dernier → priorité. Desktop + mobile.
   Aucun texte / aucune logique touchés.
   ============================================================ */

/* ── 1. Cartes : hauteurs NATURELLES (pas toutes égales), bornées par leur
   contenu (titres/descriptions déjà clampés). align-items:start → chaque carte
   épouse sa hauteur au lieu de s'étirer à la plus grande de la rangée. */
.grid-cards, .grid-3, .grid-2 {
  grid-auto-rows: auto;
  align-items: start;
}
.grid-cards > .reveal, .grid-cards > div, .grid-3 > div, .grid-2 > div { display: flex; }
.grid-cards > .reveal > .gc, .grid-cards .gc, .grid-cards .cond-card,
.grid-3 .gc, .grid-3 .cond-card { width: 100%; }
.marquee-item { display: flex; }
.marquee-item > .gc { width: 100%; }
/* Hauteurs naturelles : chaque carte épouse son contenu (déjà clampé, donc borné).
   Pas de plafond rigide → jamais de CTA/prix coupé. */
.gc { min-height: 0; }
.cond-card { min-height: 0; }
/* Paliers : « ≥ N » pour les paliers intermédiaires (à partir de N), nombre exact
   pour le dernier (le plafond). */
.ct-step .ct-m::before { content: '≥\00a0' !important; }
.ct-step.is-last .ct-m::before { content: '' !important; }

/* ── 2. PRIX en grand, bien mis en valeur ─────────────────── */
.card-offer { margin: 10px 0 12px; }
.card-price-row { align-items: baseline; gap: 10px; }
.card-price {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  background: linear-gradient(135deg, var(--ink-900) 0%, #3a3a40 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-price-off {
  font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
  color: #fff; background: linear-gradient(135deg, #1f9d57, #30d158);
  border-radius: 99px; padding: 3px 10px;
  box-shadow: 0 6px 16px -6px rgba(48,209,88,0.6);
}
.cond-price {
  font-size: 34px; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--ink-900) 0%, #3a3a40 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cond-price-cap {
  -webkit-text-fill-color: var(--ink-500); color: var(--ink-500);
  font-size: 13px; font-weight: 600;
}
.card-bounds { margin-top: 8px; }
.card-bounds strong { color: var(--ink-900); font-weight: 700; }

/* ── 3. Échelle des paliers — mini (carte) : plus élégante, baisse lisible ── */
.card-tiers {
  gap: 0; margin-top: 12px; position: relative;
  padding: 10px 4px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-2), rgba(245,245,247,0.4));
  border: 1px solid var(--line);
  display: flex; align-items: stretch; justify-content: space-between;
}
.card-tiers .ct-step {
  flex: 1; min-width: 0; gap: 4px; padding: 7px 6px 5px;
  background: transparent; border: none; border-radius: 0;
  position: relative; transition: transform .25s var(--ease-apple);
}
/* trait de base reliant les paliers (la « pente » de prix) */
.card-tiers::before { content: none; }
/* Carte Lyon (hero Pros) : blanche et nette, sans halo coloré */
.biz-page .biz-float-card { background: #fff !important; }
.biz-page .biz-float-card::after { display: none !important; }

/* ── 17. Cartes carrousel adaptatives + compteur retiré des cartes ──
   Le carrousel (flex) étirait toutes les cartes à la même hauteur → on aligne
   en haut pour qu'elles épousent leur contenu. Le compte à rebours « sous N j »
   est retiré des cartes (illisible sur petit écran) ; il reste sur la fiche. */
.marquee-track { align-items: flex-start !important; }
.card-countdown { display: none !important; }

/* Compte à rebours live (fiche groupe — Paliers de prix) */
.live-cd { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.cd-seg { display: inline-flex; flex-direction: column; align-items: center; min-width: 30px;
  padding: 4px 5px; border-radius: 9px; background: rgba(10,132,255,0.10); line-height: 1; }
.cd-seg b { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--c-electric); font-variant-numeric: tabular-nums; }
.cd-seg i { font-style: normal; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-300); margin-top: 2px; }
.tier-freeze .tf-next { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; margin-top: 4px; }
.card-tiers .ct-step .ct-m { font-size: 14px; color: var(--ink-500); font-weight: 800; letter-spacing: -0.01em; }
.card-tiers .ct-step .ct-p { font-size: 18px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; }
.card-tiers .ct-step.is-reached .ct-p { color: #1f9d57; }
/* Délimitation entre les paliers : fin trait vertical dans les interstices
   (jamais collé au palier courant, qui est surélevé et fait sa propre séparation). */
.card-tiers .ct-step:not(:first-child)::before {
  content: ''; position: absolute; left: -0.5px; top: 50%; transform: translateY(-50%);
  height: 56%; width: 1px; background: var(--line-strong, var(--line));
}
.card-tiers .ct-step.is-current::before,
.card-tiers .ct-step.is-current + .ct-step::before { display: none; }
.card-tiers .ct-step.is-current {
  background: var(--ink-900); border-radius: 11px; transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(20,20,60,0.5); z-index: 2; padding: 7px 4px 7px;
}
.card-tiers .ct-step.is-current .ct-m { color: rgba(255,255,255,0.72); }
.card-tiers .ct-step.is-current .ct-p { color: #fff; }

/* ── 4. Échelle des paliers — détaillée (.tl-list) : barre + repère palier ── */
.tl-list { gap: 7px; }
.tl-row {
  padding: 10px 14px; border: 1px solid var(--line); position: relative; overflow: hidden;
  background: #fff;
}
.tl-row.is-reached { background: linear-gradient(90deg, rgba(48,209,88,0.07), transparent); border-color: rgba(48,209,88,0.18); }
.tl-row.is-current {
  background: linear-gradient(90deg, rgba(10,132,255,0.12), rgba(139,92,246,0.06));
  border-color: rgba(10,132,255,0.4);
  box-shadow: 0 8px 22px -12px rgba(10,132,255,0.5);
}
.tl-row.is-current::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--c-electric), var(--c-violet));
}
.tl-price { font-size: 15px; }
.tier-block { border-radius: 18px; }

/* ── 5. Cartes /explore (hub) ──
   La refonte vit désormais entièrement dans le <style> du composant
   ExploreHubPage (cartes immersives : métrique, lueur d'angle, filigrane,
   pilule CTA). Plus d'override !important ici pour ne pas la clobber. */

/* ── 12. /Explore — barre de recherche raffinée + filtre épuré ──
   « Trier par » retiré (Statut seul sur la barre). Recherche plus grande,
   plus douce, mieux centrée. */
.explore-search {
  max-width: 540px !important;
  padding: 14px 20px !important;
  border-radius: 16px !important;
  gap: 12px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 16px 40px -28px rgba(20,20,60,0.2) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.explore-search:focus-within {
  border-color: var(--c-electric) !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,0.10), 0 16px 40px -28px rgba(20,20,60,0.22) !important;
}
.explore-search input { font-size: 16px !important; }
.explore-search > svg { width: 20px; height: 20px; }
/* La barre Statut occupe sa propre ligne, pleine largeur (sous Catégorie · Ville · Prix) */
.eff-bar { justify-content: flex-start !important; }
.eff-status { flex: 0 0 100% !important; }
@media (max-width: 767px) {
  .explore-search { padding: 12px 16px !important; }
}

/* ════════════════════════════════════════════════════════════
   13. /BUSINESS — REFONTE (aurora · deck · sélecteur d'abonnements)
   Idées reprises des composants fournis, réécrites en CSS maison.
   ════════════════════════════════════════════════════════════ */

/* — Aurora animée du hero (teintes claires, douces) — */
.biz-hero { isolation: isolate; }
.biz-aurora {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 2%, #000 45%, transparent 86%);
  mask-image: radial-gradient(120% 92% at 50% 2%, #000 45%, transparent 86%);
}
.biz-aurora b { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.22; will-change: transform; }
.biz-aurora b:nth-child(1) { width: 560px; height: 560px; left: -8%; top: -34%; background: radial-gradient(circle, #2f6bff, transparent 66%); animation: bizDrift1 20s ease-in-out infinite alternate; }
.biz-aurora b:nth-child(2) { width: 520px; height: 520px; right: -6%; top: -28%; background: radial-gradient(circle, #8b5cf6, transparent 66%); animation: bizDrift2 24s ease-in-out infinite alternate; }
.biz-aurora b:nth-child(3) { width: 480px; height: 480px; left: 26%; top: 14%; background: radial-gradient(circle, #22d3ee, transparent 66%); animation: bizDrift3 26s ease-in-out infinite alternate; }
.biz-aurora b:nth-child(4) { width: 420px; height: 420px; right: 22%; top: -8%; background: radial-gradient(circle, #ff5dac, transparent 66%); animation: bizDrift1 22s ease-in-out infinite alternate-reverse; }
@keyframes bizDrift1 { to { transform: translate(60px,40px) scale(1.12); } }
@keyframes bizDrift2 { to { transform: translate(-48px,46px) scale(0.92); } }
@keyframes bizDrift3 { to { transform: translate(40px,-44px) scale(1.16); } }
.biz-hero .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .biz-aurora b { animation: none !important; } }

/* — Flux de demande qui défile (visuel hero, colonne verticale masquée) — */
.biz-feed {
  position: relative; height: 460px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
@media (max-width: 900px) { .biz-feed { height: 360px; } }
.biz-feed-track { display: flex; flex-direction: column; gap: 14px; animation: bdfScroll 28s linear infinite; will-change: transform; }
.biz-feed:hover .biz-feed-track { animation-play-state: paused; }
@keyframes bdfScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .biz-feed-track { animation: none; } }
.bdf-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 42px -30px rgba(20,20,60,0.22);
  display: grid; gap: 10px;
}
.bdf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bdf-cat { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-500); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdf-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); animation: bdfPulse 1.8s ease-out infinite; }
@keyframes bdfPulse { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,0.5); } 70% { box-shadow: 0 0 0 8px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } }
.bdf-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bdf-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bdf-price { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink-900); white-space: nowrap; }
.bdf-prog { font-size: 12.5px; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.bdf-bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,0.06); overflow: hidden; }
.bdf-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-electric), var(--c-violet)); }
.biz-picker { max-width: 460px; margin: 30px auto 0; display: grid; gap: 14px; }
.biz-picker-rows { display: grid; gap: 12px; }
.biz-prow {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  text-align: left; padding: 18px 20px; border-radius: 18px;
  border: 2px solid var(--line); background: #fff; cursor: pointer; font-family: inherit;
  transition: border-color .25s var(--ease-out-soft), box-shadow .25s, transform .2s;
}
.biz-prow:hover { border-color: var(--ink-300); }
.biz-prow.is-active { border-color: var(--ink-900); box-shadow: 0 18px 44px -24px rgba(20,20,60,0.32); }
.biz-prow.is-pop.is-active { border-color: var(--c-violet); box-shadow: 0 18px 44px -22px rgba(139,92,246,0.4); }
.biz-prow-main { display: grid; gap: 4px; min-width: 0; }
.biz-prow-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink-900); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.biz-prow-pop { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b3fc9; background: rgba(139,92,246,0.12); padding: 2px 8px; border-radius: 99px; }
.biz-prow-sub { font-size: 12.5px; color: var(--ink-500); line-height: 1.4; }
.biz-prow-price { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-900); white-space: nowrap; }
.biz-prow-price span { font-size: 12px; font-weight: 500; color: var(--ink-500); margin-left: 3px; }
.biz-prow-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-200); display: grid; place-items: center; transition: border-color .25s; }
.biz-prow-radio > span { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-900); transform: scale(0); transition: transform .25s var(--ease-out-soft); }
.biz-prow.is-pop .biz-prow-radio > span { background: var(--c-violet); }
.biz-prow.is-active .biz-prow-radio { border-color: var(--ink-900); }
.biz-prow.is-pop.is-active .biz-prow-radio { border-color: var(--c-violet); }
.biz-prow.is-active .biz-prow-radio > span { transform: scale(1); }
.biz-picker-cta { width: 100%; justify-content: center; margin-top: 2px; }
.biz-picker-link { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-500); text-decoration: none; }
.biz-picker-link:hover { color: var(--ink-900); }
@media (max-width: 480px) {
  .biz-prow { padding: 14px 16px; grid-template-columns: 1fr auto; }
  .biz-prow-radio { display: none; }
  .biz-prow-price { font-size: 20px; }
}

/* Garde-fou mobile : réaffirme les tailles compactes (mes nouvelles règles
   desktop sont plus bas en source, elles gagneraient sinon sous 768px). */
@media (max-width: 767px) {
  .card-price { font-size: 24px; }
  .cond-price { font-size: 21px; }
  .card-tiers { padding: 8px 3px 3px; }
  .card-tiers .ct-step .ct-m { font-size: 12.5px; }
  .card-tiers .ct-step .ct-p { font-size: 16px; }
  .card-tiers .ct-step.is-current { transform: none; }
}
@media (max-width: 479px) {
  .card-price { font-size: 22px; }
}

/* ── 6. Héros : voile renforcé pour la lisibilité du titre par-dessus
   l'orbe enrichi (plus vibrant). Scrim central plus large + dégradé doux. */
.hero .hero-veil {
  background:
    radial-gradient(ellipse 52% 42% at 50% 46%, rgba(251,251,253,0.82) 0%, rgba(251,251,253,0.45) 42%, rgba(251,251,253,0) 74%),
    linear-gradient(180deg, rgba(251,251,253,0.55) 0%, transparent 18%, transparent 80%, rgba(251,251,253,0.96) 100%);
}
body[data-dark="true"] .hero .hero-veil {
  background:
    radial-gradient(ellipse 52% 42% at 50% 46%, rgba(10,10,13,0.82) 0%, rgba(10,10,13,0.45) 42%, rgba(10,10,13,0) 74%),
    linear-gradient(180deg, rgba(10,10,13,0.55) 0%, transparent 18%, transparent 80%, rgba(10,10,13,0.96) 100%);
}
/* Titre net au-dessus de l'orbe coloré */
.hero-title { text-shadow: 0 2px 30px rgba(251,251,253,0.55); }
.hero-sub { text-shadow: 0 1px 18px rgba(251,251,253,0.7); }
body[data-dark="true"] .hero-title { text-shadow: 0 2px 30px rgba(10,10,13,0.6); }
body[data-dark="true"] .hero-sub { text-shadow: 0 1px 18px rgba(10,10,13,0.7); }

/* ── 7. DateField — calendrier popover soigné ─────────────── */
.datef { position: relative; width: 100%; }
.datef-trigger {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 13px 14px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 12px;
  font-family: inherit; font-size: 14.5px; color: var(--ink-900);
  cursor: pointer; text-align: left;
  transition: border-color .18s var(--ease-apple), box-shadow .18s;
}
.datef-trigger:hover { border-color: var(--ink-300); }
.datef.is-open .datef-trigger { border-color: var(--c-electric); box-shadow: 0 0 0 4px rgba(10,132,255,0.10); }
.datef-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datef-placeholder { color: var(--ink-300); }
.datef-clear {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-2); color: var(--ink-500); flex-shrink: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
.datef-clear:hover { background: var(--ink-900); color: #fff; }
.datef-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
  width: 280px; max-width: 92vw; padding: 14px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 22px 56px -18px rgba(20,20,60,0.32);
  opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; transform-origin: top left;
  transition: opacity .2s var(--ease-out-soft), transform .2s var(--ease-out-soft);
}
.datef.is-open .datef-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.datef-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.datef-month {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink-900);
  letter-spacing: -0.01em; text-transform: capitalize;
}
.datef-nav {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-700); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.datef-nav:hover { background: var(--c-electric); border-color: var(--c-electric); color: #fff; }
.datef-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.datef-dow { margin-bottom: 4px; }
.datef-dowc {
  text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-300);
  text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 0;
}
.datef-day {
  aspect-ratio: 1; display: grid; place-items: center; border: none; border-radius: 9px;
  background: transparent; color: var(--ink-700); font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .14s, color .14s, transform .1s;
}
.datef-day:hover:not(:disabled) { background: var(--bg-2); color: var(--ink-900); }
.datef-day.is-today { color: var(--c-electric); font-weight: 800; }
.datef-day.is-sel {
  background: linear-gradient(135deg, var(--c-electric), var(--c-violet)); color: #fff; font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(10,132,255,0.6);
}
.datef-day.is-sel.is-today { color: #fff; }
.datef-day:disabled, .datef-day.is-disabled { color: var(--ink-100); cursor: not-allowed; }
.datef-empty { aspect-ratio: 1; }
@media (max-width: 767px) {
  .datef-trigger { font-size: 16px; padding: 12px 14px; }
}

/* ── 8. /Business — profondeur premium + argumentaire qui ressort ── */
.biz-page .biz-float-wrap { perspective: 1600px; }
.biz-page .biz-float-card {
  box-shadow:
    0 2px 6px rgba(20,20,60,0.06),
    0 40px 80px -36px rgba(20,20,60,0.4),
    0 0 0 1px rgba(255,255,255,0.6) inset !important;
  position: relative;
}
/* liseré iridescent + halo de profondeur derrière la carte */
.biz-page .biz-float-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, rgba(10,132,255,0.5), rgba(139,92,246,0.5), rgba(34,211,238,0.5));
  filter: blur(16px); opacity: 0.4;
}
.biz-page .biz-float-stack {
  box-shadow: 0 30px 70px -34px rgba(20,20,60,0.3) !important;
  background: linear-gradient(180deg, #fff, #f3f4f8) !important;
}
/* Cartes d'argument : tuiles d'icônes en dégradé de marque + relief + halo au survol */
.biz-page .biz-value {
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 40px -22px rgba(20,20,60,0.2) !important;
  transition: transform .32s var(--ease-out-soft), box-shadow .32s !important;
  position: relative; overflow: hidden;
}
.biz-page .biz-value::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: 0;
  background: linear-gradient(90deg, var(--c-electric), var(--c-violet), var(--c-cyan));
  transition: opacity .32s;
}
.biz-page .biz-value:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 38px 70px -28px rgba(20,20,60,0.34) !important;
}
.biz-page .biz-value:hover::before { opacity: 1; }
.biz-page .biz-value .ico {
  width: 50px !important; height: 50px !important; border-radius: 15px !important;
  background: linear-gradient(135deg, var(--c-electric), var(--c-violet)) !important;
  box-shadow: 0 12px 26px -10px rgba(10,132,255,0.55);
  transition: transform .32s var(--ease-out-soft);
}
.biz-page .biz-value:hover .ico { transform: translateY(-2px) scale(1.06) rotate(-3deg); }
/* Variation de teinte par carte pour un rythme visuel (2e/3e tuile) */
.biz-page .biz-values .biz-value:nth-child(2) .ico { background: linear-gradient(135deg, var(--c-violet), var(--c-pink)) !important; box-shadow: 0 12px 26px -10px rgba(139,92,246,0.55); }
.biz-page .biz-values .biz-value:nth-child(3) .ico { background: linear-gradient(135deg, var(--c-cyan), var(--c-electric)) !important; box-shadow: 0 12px 26px -10px rgba(34,211,238,0.5); }
.biz-page .biz-values .biz-value:nth-child(4) .ico { background: linear-gradient(135deg, var(--c-pink), var(--c-orange)) !important; box-shadow: 0 12px 26px -10px rgba(255,93,172,0.5); }

/* ── 9. Accordéons fluides (FAQ + footer mobile) : révélation douce ── */
@keyframes accReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.faq-item[open] .faq-a { animation: accReveal .42s var(--ease-out-soft) both; }
.faq-item summary { transition: padding .25s var(--ease-apple); }
.footer-col.is-open ul { animation: accReveal .34s var(--ease-out-soft) both; }
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-a, .footer-col.is-open ul { animation: none; }
}

/* ── 10. Stepper « Comment ça marche » — fix mobile (fit + rythme) ──
   Pastilles uniformes (l'active ne déborde plus du rail), espace tassé,
   titre de section réduit. Sous 768px uniquement (desktop inchangé). */
@media (max-width: 767px) {
  #how .t-display { font-size: clamp(23px, 6.2vw, 30px) !important; line-height: 1.14 !important; }
  .how-stepper { max-width: 430px; margin-left: auto !important; margin-right: auto !important; }
  .hs-dot { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  .hs-dot.is-active { transform: none !important; box-shadow: 0 6px 16px -6px rgba(10,132,255,0.5) !important; }
  .hs-track { left: 21px !important; right: 21px !important; top: 23px !important; }
  .hs-panel { gap: 8px !important; margin-top: 18px !important; }
  .hs-text { max-width: 32ch !important; }
  .hs-arrow { width: 34px !important; height: 34px !important; }
  .hs-badge { width: 50px !important; height: 50px !important; }
}

/* ── 11. /Business — abonnements MIS EN AVANT + cliquables ────────
   Les cartes de tarifs sont désormais des liens (vers /pricing) : on les
   rend nettement plus présentes, avec une pastille fléchée d'affordance.
   La barre flottante « à peine visible » a été retirée du rendu. */
.biz-teaser { gap: 18px !important; margin-top: 30px !important; }
.biz-teaser-card {
  text-decoration: none; color: inherit; cursor: pointer;
  padding: 28px 26px 64px !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 48px -24px rgba(20,20,60,0.22) !important;
  transition: transform .32s var(--ease-out-soft), box-shadow .32s, border-color .3s !important;
}
.biz-teaser-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 40px 76px -28px rgba(20,20,60,0.34) !important;
  border-color: rgba(139,92,246,0.4) !important;
}
.bt-name { font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500) !important; }
.bt-price { font-size: 44px !important; margin-top: 4px; }
.bt-line { font-size: 14px !important; margin-top: 6px !important; }
/* Pastille fléchée d'affordance (CSS pur, pas de texte) — signale le clic */
.biz-teaser-card::after {
  content: '›'; position: absolute; left: 26px; bottom: 22px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; text-indent: 2px; padding-bottom: 2px;
  background: var(--bg-2); color: var(--ink-700);
  border: 1px solid var(--line);
  transition: background .25s var(--ease-out-soft), color .25s, transform .25s, border-color .25s;
}
.biz-teaser-card:hover::after { background: var(--c-electric); color: #fff; border-color: var(--c-electric); transform: translateX(3px); }
.biz-teaser-card.featured {
  box-shadow: 0 24px 60px -22px rgba(139,92,246,0.34) !important;
}
.biz-teaser-card.featured::after { background: var(--c-violet); color: #fff; border-color: var(--c-violet); }
/* La section Tarifs ressort un peu plus (fond + respiration) */
.biz-plans .t-headline { font-size: clamp(26px, 3vw, 40px) !important; }

@media (max-width: 760px) {
  .biz-teaser { gap: 12px !important; }
  .biz-teaser-card { padding: 20px 18px 58px !important; }
  .biz-teaser-card.featured { transform: none !important; }
  .bt-price { font-size: 36px !important; }
  .biz-teaser-card::after { left: 18px; bottom: 18px; }
}

/* ── 15. Finitions : grille de valeurs équilibrée + badges non-multicolores ── */
/* 4 cartes ne laissent plus une orpheline : auto-fit → 4-up / 3-up selon le nombre. */
.biz-values { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; }
/* Badge « Populaire » en violet plein (plus de dégradé multicolore) */
.bt-flag, .btc-flag, .pricing-flag, .gtype-badge.is-pop { background: var(--c-violet) !important; }
.gc-featured::before { background: var(--c-violet) !important; }

/* ── 16. Cartes demande : finitions + accordéon « qui déroule » ── */
/* Badge « Demande vérifiée » : un seul point (le .badge::before générique est retiré) */
.credible-badge::before { display: none !important; }
/* Compte à rebours de palier : visible (pilule teintée au lieu de gris pâle) */
.card-countdown {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.3;
  background: rgba(10,132,255,0.10); color: #0058c9;
}
.card-countdown strong { color: #0058c9; }
.card-countdown.is-frozen { background: rgba(48,209,88,0.12); color: #1f9d57; }
.card-countdown.is-frozen strong { color: #1f9d57; }
/* CTA de carte (« Montrer mon intérêt » / « Pré-réserver ») : nets, donnent envie */
.gc-cta { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.gc-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; transition: background .2s var(--ease-out-soft), transform .15s, box-shadow .2s;
}
.gc-cta-primary { background: var(--ink-900); color: #fff; box-shadow: 0 10px 24px -12px rgba(20,20,60,0.5); }
.gc-cta-ghost { background: rgba(10,132,255,0.10); color: #0058c9; }
.gc:hover .gc-cta-primary { background: #000; transform: translateY(-1px); }
.gc:hover .gc-cta-ghost { background: rgba(10,132,255,0.16); }

/* Accordéon arguments (/business) — header + panneau qui déroule (hauteur animée) */
.biz-acc { margin-top: 28px; display: grid; gap: 12px; }
.biz-acc-item {
  border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: box-shadow .3s var(--ease-out-soft), border-color .3s;
}
.biz-acc-item.is-open { box-shadow: 0 18px 46px -26px rgba(20,20,60,0.26); border-color: var(--line-strong); }
.biz-acc-head {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left;
}
.biz-acc-ico {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(10,132,255,0.10); color: var(--c-electric);
  transition: background .3s var(--ease-out-soft), color .3s, transform .3s;
}
.biz-acc-item.is-open .biz-acc-ico { background: linear-gradient(135deg, var(--c-electric), var(--c-violet)); color: #fff; transform: scale(1.04); }
.biz-acc-title { flex: 1; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); line-height: 1.3; }
.biz-acc-chev { flex: none; width: 24px; height: 24px; position: relative; }
.biz-acc-chev::before, .biz-acc-chev::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px;
  background: var(--ink-300); border-radius: 2px; transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out-soft), background .3s;
}
.biz-acc-chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.biz-acc-item.is-open .biz-acc-chev::before { background: var(--c-violet); }
.biz-acc-item.is-open .biz-acc-chev::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--c-violet); }
.biz-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out-soft); }
.biz-acc-item.is-open .biz-acc-panel { grid-template-rows: 1fr; }
.biz-acc-panel-in { overflow: hidden; }
.biz-acc-panel-in p { margin: 0; padding: 0 20px 20px 80px; color: var(--ink-500); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 600px) {
  .biz-acc-head { padding: 16px; gap: 12px; }
  .biz-acc-ico { width: 42px; height: 42px; }
  .biz-acc-title { font-size: 15.5px; }
  .biz-acc-panel-in p { padding: 0 16px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .biz-acc-panel { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   18. /BUSINESS — intros de section centrées (fin du « trou » à droite)
   Les en-têtes (eyebrow + titre + lead) étaient collés à gauche dans une
   section pleine largeur → grand vide à droite. On les centre et on élargit
   le lead : l'intro est désormais équilibrée au-dessus du contenu plein-large.
   Cible UNIQUEMENT les intros enfants directs de .container (pas le hero en
   2 colonnes, pas le calculateur dont l'intro est dans .bc-intro).
   ════════════════════════════════════════════════════════════ */
.biz-page .section > .container > .t-eyebrow,
.biz-page .section > .container > .t-headline,
.biz-page .section > .container > .t-lead {
  text-align: center;
}
.biz-page .section > .container > .t-eyebrow { display: block; }
.biz-page .section > .container > .t-headline {
  max-width: 22ch; margin-left: auto; margin-right: auto;
}
.biz-page .section > .container > .t-lead {
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* — CTA final : bande noire ramenée à la largeur du contenu (≤ 1280px) — */
.biz-page .biz-final {
  max-width: 1280px;
  margin-top: 48px !important;
  margin-bottom: 48px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 1328px) {
  .biz-page .biz-final { margin-left: 24px !important; margin-right: 24px !important; }
}

/* — FAQ /pricing : pleine largeur (plus de colonne étroite à 760px) — */
.pricing-page .pricing-faq { max-width: none !important; }
.pricing-page .pricing-faq-title { text-align: left; }

/* — Wordmark « Grouply » en dégradé de marque (texte de marque, identique FR/EN,
   donc sûr vis-à-vis de la couche de traduction : aucun nœud de texte n'est scindé).
   -webkit-text-fill-color l'emporte sur les `color` inline des différents contextes. */
.nav-logo {
  background: linear-gradient(100deg, var(--c-electric) 0%, var(--c-violet) 52%, var(--c-pink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* le point garde sa pastille pleine (pas de clip de texte dessus) */
.nav-logo .dot { -webkit-text-fill-color: initial; }

/* ── Demande qualifiée : cartes de demandes concrètes (page Pros) ── */
.bqd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 980px) { .bqd-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bqd-grid { grid-template-columns: 1fr; } }
.bqd-card { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 14px 34px -22px rgba(20,20,60,0.2);
  transition: transform .28s var(--ease-out-soft), box-shadow .28s; }
.bqd-card:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 30px 56px -26px rgba(20,20,60,0.32); }
.bqd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.bqd-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); }
.bqd-trend { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  background: rgba(10,132,255,0.10); color: #0058c9; white-space: nowrap; }
.bqd-trend.is-hot { background: rgba(255,138,61,0.15); color: #b05a12; }
.bqd-people { display: flex; align-items: baseline; gap: 6px; }
.bqd-people b { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink-900); }
.bqd-people span { font-size: 12px; color: var(--ink-500); }
.bqd-price { font-size: 14px; font-weight: 700; color: var(--ink-900); margin-top: 4px; }
.bqd-prog { margin-top: 12px; height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.bqd-prog > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-electric), var(--c-violet)); }
.bqd-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
.bqd-meta em { font-style: normal; }
.bqd-cta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--c-electric); text-decoration: none; }
.bqd-cta:hover { color: var(--c-violet); }
.bqd-privacy { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 13px;
  color: var(--ink-500); line-height: 1.5; }
.bqd-privacy svg { color: var(--ink-300); flex-shrink: 0; margin-top: 2px; }

/* ── Stepper réutilisable (.sf-*) — page Pros, look de l'accueil ── */
.biz-stepper-wrap { margin-top: 32px; max-width: 720px; margin-left: auto; margin-right: auto; }
.sf-stepper { margin-top: 8px; }
.sf-rail { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 0; }
.sf-track { position: absolute; top: calc(6px + 19px); left: 23px; right: 23px; height: 3px;
  background: var(--line); border-radius: 999px; overflow: hidden; z-index: 0; }
.sf-fill { display: block; height: 100%; border-radius: 999px; background: var(--c-electric); transition: width .42s var(--ease-apple); }
.sf-dot { position: relative; z-index: 1; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; border: 2px solid var(--line); background: #fff; color: var(--ink-500);
  font-weight: 700; font-size: 14px; display: grid; place-items: center; cursor: pointer; padding: 0;
  font-family: inherit;
  transition: transform .3s var(--ease-apple), border-color .3s, background .3s, color .3s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent; }
.sf-dot.is-done { border-color: transparent; background: #e6eefc; color: var(--c-electric); }
.sf-dot.is-active { border-color: transparent; background: var(--c-electric); color: #fff;
  transform: scale(1.12); box-shadow: 0 8px 20px -6px rgba(10,132,255,0.5); }
.sf-dot:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 3px; }
.sf-panel { margin-top: 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.sf-card { grid-column: 2; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 4px 6px;
  animation: sfFade .42s var(--ease-apple); }
@keyframes sfFade { from { transform: translateY(10px); } to { transform: translateY(0); } }
.sf-badge { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); color: var(--c-violet); margin-bottom: 2px; }
.sf-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-violet); }
.sf-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink-900); margin: 0; line-height: 1.25; }
.sf-text { color: var(--ink-500); font-size: 15px; line-height: 1.55; margin: 0; max-width: 38ch; }
.sf-arrow { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink-700); display: grid; place-items: center; cursor: pointer;
  transition: transform .2s var(--ease-apple), border-color .2s, color .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent; }
.sf-prev { grid-column: 1; } .sf-next { grid-column: 3; }
.sf-arrow:not(:disabled):hover { border-color: rgba(139,92,246,0.4); color: var(--c-violet); transform: scale(1.08); }
.sf-arrow:disabled { opacity: 0.32; cursor: default; }
.sf-arrow:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sf-fill, .sf-card, .sf-dot, .sf-arrow { transition: none; animation: none; } }
@media (max-width: 600px) {
  .sf-dot { width: 34px; height: 34px; font-size: 13px; }
  .sf-track { left: 21px; right: 21px; top: 23px; }
  .sf-title { font-size: 18px; }
}

/* Hero Pros : carte flottante « Réseau de salles · Lyon » masquée sur téléphone
   (peu utile sur petit écran, l'argumentaire texte suffit). */
@media (max-width: 767px) {
  .biz-page .biz-float-wrap { display: none !important; }
}

/* ── Page Pros : condensation MOBILE (≤600px) — tout plus compact ── */
@media (max-width: 600px) {
  .biz-page .biz-hero-title { font-size: clamp(23px, 7.2vw, 29px) !important; line-height: 1.1 !important; }
  .biz-page .biz-hero-sub { font-size: 14px !important; line-height: 1.5 !important; }
  .biz-page .biz-hero-cta { gap: 8px !important; margin-top: 18px !important; }
  .biz-page .biz-hero-cta .btn { width: 100%; justify-content: center; }
  .biz-page .biz-hero-stats { gap: 14px 18px !important; margin-top: 22px !important; }
  .biz-page .bhs-v { font-size: 19px !important; }
  .biz-page .bhs-l { font-size: 11px !important; max-width: 120px; }
  /* Calculateur */
  .biz-page .bc-result-v { font-size: clamp(40px, 13vw, 52px) !important; }
  .biz-page .bc-val { font-size: 14px !important; }
  .biz-page .bc-results { padding: 18px !important; }
  .biz-page .bc-rg-v { font-size: 18px !important; }
  /* Intelligence de la demande */
  .biz-page .di3d-value { font-size: 24px !important; }
  .biz-page .di3d-tile { padding: 14px 14px 13px !important; }
  /* Tarifs */
  .biz-page .biz-price-card, .biz-page .pricing-card { padding: 18px 16px !important; }
  .biz-page .bpc-price, .biz-page .pc-price { font-size: 30px !important; }
  /* Carte Lyon du hero */
  .biz-page .biz-float-card { padding: 18px !important; }
  .biz-page .bfc-price { font-size: 30px !important; }
}

/* ── Révélation produit au scroll (page Pros) : carte qui se redresse ── */
.biz-reveal-sec { padding-top: 16px; overflow: hidden; }
/* Séparateur entre « L'acquisition inversée » et « Le produit » (surtout mobile,
   où les deux sections claires se touchent sans distinction). */
.biz-reveal-sec { position: relative; margin-top: 8px; }
.biz-reveal-sec::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-electric), var(--c-violet));
  opacity: 0.5;
}
@media (max-width: 767px) { .biz-reveal-sec { padding-top: 40px; } }

/* Même séparateur entre le hero et « L'acquisition inversée » */
.biz-sep-top { position: relative; }
.biz-sep-top::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-electric), var(--c-violet)); opacity: 0.5;
}
@media (max-width: 767px) { .biz-sep-top { padding-top: 40px; } }
.biz-reveal-stage { perspective: 1200px; margin-top: 30px; padding: 0 24px; }
.biz-reveal-card {
  max-width: 1000px; margin: 0 auto; transform-origin: 50% 0%;
  border-radius: 26px; background: #0e0f1c; padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 50px 100px -45px rgba(8,10,30,0.55);
  will-change: transform;
  transform: perspective(1200px) rotateX(16deg) scale(0.92);
}
.brc-bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px 12px; }
.brc-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.brc-bar em { margin-left: 14px; font-style: normal; font-size: 12px; color: rgba(255,255,255,0.5); }
.brc-screen { background: var(--bg); border-radius: 16px; overflow: hidden; min-height: 300px; height: 360px; position: relative; display: block; }
.biz-reveal-cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.biz-reveal-link { font-size: 14px; font-weight: 600; color: var(--c-electric); text-decoration: none; }
.biz-reveal-link:hover { color: var(--c-violet); }
@media (max-width: 560px) { .biz-reveal-cta .btn { width: 100%; justify-content: center; } }

/* ── Démo Explorer animée (curseur + annonces inventées, boucle ~10s) ── */
.bxd { position: absolute; inset: 0; overflow: hidden; font-family: var(--font-display, inherit); }
.bxd-top { padding: 14px 16px 10px; background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.bxd-search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 13px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.bxd-mag { width: 13px; height: 13px; border: 2px solid var(--ink-300); border-radius: 50%; position: relative; flex: none; }
.bxd-mag::after { content: ''; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 2px; background: var(--ink-300); transform: rotate(45deg); border-radius: 2px; }
.bxd-ph { font-size: 13px; color: var(--ink-300); }
.bxd-fields { display: flex; gap: 8px; margin-top: 9px; }
.bxd-field { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.bxd-field i { width: 7px; height: 7px; border-right: 1.6px solid var(--ink-300); border-bottom: 1.6px solid var(--ink-300); transform: rotate(45deg) translateY(-2px); }
.bxd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.bxd-chip { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 99px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-500); }
.bxd-chip.is-on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.bxd-chip-target { transition: background .25s, color .25s, border-color .25s; animation: bxdChipA 11s ease-in-out infinite; }
@keyframes bxdChipA { 0%,16%{ background: var(--bg-2); color: var(--ink-500); } 22%,84%{ background: rgba(10,132,255,0.12); color: #0058c9; border-color: rgba(10,132,255,0.4); } 90%,100%{ background: var(--bg-2); color: var(--ink-500); } }

.bxd-viewport { position: absolute; top: 150px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0 16px; }
.bxd-list { display: grid; gap: 10px; padding: 12px 0; animation: bxdScroll 11s ease-in-out infinite; }
@keyframes bxdScroll {
  0%,14% { transform: translateY(0); }
  26%,40% { transform: translateY(-150px); }
  52%,66% { transform: translateY(-360px); }
  78%,84% { transform: translateY(-540px); }
  92%,100% { transform: translateY(0); }
}
.bxd-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.bxd-badges { display: flex; gap: 6px; margin-bottom: 9px; }
.bxd-badge-verified { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px; background: rgba(48,209,88,0.12); color: #1f8a4c; }
.bxd-badge-verified i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); }
.bxd-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.bxd-badge-info { background: rgba(10,132,255,0.10); color: #0058c9; }
.bxd-badge-amber { background: rgba(255,138,61,0.15); color: #b05a12; }
.bxd-badge-emerald { background: rgba(48,209,88,0.14); color: #1f8a4c; }
.bxd-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); margin-bottom: 3px; }
.bxd-card-title { font-size: 15px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.bxd-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }
.bxd-price { font-size: 26px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.03em; }
.bxd-off { font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1f9d57, #30d158); border-radius: 99px; padding: 2px 8px; }
.bxd-tiers { display: flex; gap: 6px; margin-top: 10px; }
.bxd-tier { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.bxd-tier b { font-size: 10px; font-weight: 700; color: var(--ink-300); }
.bxd-tier i { font-style: normal; font-size: 13px; font-weight: 800; color: var(--ink-700); }
.bxd-tier.is-cur { background: var(--ink-900); border-color: var(--ink-900); }
.bxd-tier.is-cur b { color: rgba(255,255,255,0.7); }
.bxd-tier.is-cur i { color: #fff; }
.bxd-prog { margin-top: 12px; height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.bxd-prog > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-electric), var(--c-violet)); }
.bxd-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bxd-count { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 11px; background: var(--bg-2); }
.bxd-count.is-pr { background: rgba(10,132,255,0.08); }
.bxd-count b { font-size: 18px; font-weight: 800; color: var(--ink-900); }
.bxd-count.is-pr b { color: var(--c-electric); }
.bxd-count small { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); }
.bxd-prebtn { width: 100%; margin-top: 12px; min-height: 44px; border: none; border-radius: 12px;
  background: var(--ink-900); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: default; }
.bxd-card-target .bxd-prebtn { animation: bxdBtn 11s ease-in-out infinite; }
@keyframes bxdBtn { 0%,28%{ background: var(--ink-900); transform: scale(1); } 32%{ background: var(--c-electric); transform: scale(0.97); } 38%,100%{ background: var(--ink-900); transform: scale(1); } }
/* la 4e carte « se survole » quand le curseur arrive dessus */
.bxd-card-target { animation: bxdHover 11s ease-in-out infinite; }
@keyframes bxdHover { 0%,60%{ transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.04); border-color: var(--line); }
  68%,78%{ transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(10,132,255,0.4); border-color: rgba(10,132,255,0.5); }
  86%,100%{ transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.04); border-color: var(--line); } }

/* Curseur animé */
.bxd-cursor { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
  animation: bxdCursor 11s ease-in-out infinite; }
.bxd-cursor svg { width: 26px; height: 26px; }
.bxd-cursor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(10,132,255,0.35); transform: scale(0); animation: bxdClick 11s ease-in-out infinite; }
@keyframes bxdCursor {
  0%   { transform: translate(40px, 330px); opacity: 0; }
  4%   { opacity: 1; }
  10%  { transform: translate(150px, 50px); }           /* barre de recherche */
  18%  { transform: translate(250px, 122px); }          /* chip statut */
  22%  { transform: translate(250px, 122px); }
  34%  { transform: translate(210px, 250px); }          /* descend dans la liste */
  50%  { transform: translate(240px, 210px); }
  64%  { transform: translate(220px, 190px); }          /* carte ciblée */
  72%  { transform: translate(220px, 190px); }
  84%  { transform: translate(250px, 250px); }
  90%  { transform: translate(250px, 250px); opacity: 1; }
  95%  { opacity: 0; }
  100% { transform: translate(40px, 330px); opacity: 0; }
}
@keyframes bxdClick {
  0%,18% { transform: scale(0); opacity: 0; }
  20% { transform: scale(0); opacity: 1; }
  23% { transform: scale(2.4); opacity: 0; }
  24%,68% { transform: scale(0); opacity: 0; }
  70% { transform: scale(0); opacity: 1; }
  73% { transform: scale(2.4); opacity: 0; }
  74%,100% { transform: scale(0); opacity: 0; }
}
/* Fondu blanc de redémarrage */
.bxd-fade { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none;
  animation: bxdFade 11s ease-in-out infinite; }
@keyframes bxdFade { 0%,88%{ opacity: 0; } 93%,97%{ opacity: 1; } 100%{ opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bxd-list, .bxd-cursor, .bxd-cursor::after, .bxd-fade, .bxd-card-target, .bxd-chip-target { animation: none !important; }
  .bxd-cursor { display: none; }
}
@media (max-width: 767px) {
  .brc-screen { height: 360px; }
  .bxd-fields { display: none; }
  .bxd-viewport { top: 120px; }
}

/* ── Boîte « Faites venir la meilleure offre » — premium ─────────── */
.demand-pitch {
  border-radius: 22px !important; padding: 24px !important;
  background: linear-gradient(170deg, #fff, var(--bg-2)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 22px 52px -28px rgba(20,20,60,0.22) !important;
}
.demand-pitch h3 { font-size: 19px !important; letter-spacing: -0.02em; margin-bottom: 6px !important; }
.demand-pitch-lead { font-size: 13.5px !important; color: var(--ink-500) !important; line-height: 1.5 !important; margin-bottom: 16px !important; }
/* Prix proposé : grand, mis en valeur dans une tuile */
.demand-pitch-price {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: 14px; margin-bottom: 12px;
  background: var(--ink-900);
}
.demand-pitch-price > span { font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: rgba(255,255,255,0.6) !important; }
.demand-pitch-price > strong { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: #fff;
  background: linear-gradient(100deg, #fff, #9fc4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Fourchette autorisée : ligne propre dans une tuile claire */
.demand-pitch-range { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); margin-bottom: 12px; }
.dpr-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dpr-line > span { font-size: 12.5px; color: var(--ink-500); }
.dpr-line > strong { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink-900); white-space: nowrap; }
.dpr-note { font-size: 11.5px !important; color: var(--ink-300) !important; line-height: 1.4 !important; margin: 6px 0 0 !important; }
/* Chances de succès : jauge à 3 crans + pastille de niveau */
.feasibility { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.feas-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feas-label { font-size: 12.5px; color: var(--ink-500); }
.feas-val { font-family: var(--font-display); font-size: 14px; font-weight: 800; padding: 3px 11px; border-radius: 99px; }
.feasibility::after { content: ''; display: block; margin-top: 10px; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-green) 0 33%, var(--bg-2) 33% 100%); }
.feas-high::after   { background: linear-gradient(90deg, var(--c-green) 0 100%); }
.feas-medium::after { background: linear-gradient(90deg, var(--c-orange) 0 60%, var(--bg-2) 60% 100%); }
.feas-low::after    { background: linear-gradient(90deg, #ff453a 0 28%, var(--bg-2) 28% 100%); }
.feas-high  .feas-val { color: #1f8a4c; background: rgba(48,209,88,0.14); }
.feas-medium .feas-val { color: #b05a12; background: rgba(255,138,61,0.15); }
.feas-low   .feas-val { color: #c0271d; background: rgba(255,69,58,0.13); }
.feas-reason { font-size: 11.5px !important; color: var(--ink-500) !important; line-height: 1.4 !important; margin: 8px 0 0 !important; }

/* ── 3 cartes valeur « La demande vient à vous » — premium ──────── */
.biz-page .biz-value {
  position: relative; overflow: hidden;
  border-radius: 22px !important; padding: 28px 26px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 40px -24px rgba(20,20,60,0.2) !important;
  transition: transform .34s var(--ease-out-soft), box-shadow .34s !important;
}
/* liseré dégradé en haut, révélé au survol */
.biz-page .biz-value::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: 0;
  background: linear-gradient(90deg, var(--c-electric), var(--c-violet), var(--c-cyan));
  transition: opacity .34s;
}
.biz-page .biz-value:hover { transform: translateY(-6px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 38px 70px -28px rgba(20,20,60,0.32) !important; }
.biz-page .biz-value:hover::before { opacity: 1; }
/* grand numéro fantôme */
.biz-value-num {
  position: absolute; top: 8px; right: 16px; z-index: 0;
  font-family: var(--font-display); font-size: 86px; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: var(--ink-900); opacity: 0.05; pointer-events: none;
}
.biz-page .biz-value > * { position: relative; z-index: 1; }
/* tuiles d'icône en dégradé de marque, une teinte par carte */
.biz-page .biz-value .ico {
  width: 50px !important; height: 50px !important; border-radius: 15px !important;
  background: linear-gradient(135deg, var(--c-electric), var(--c-violet)) !important; color: #fff !important;
  box-shadow: 0 12px 26px -10px rgba(10,132,255,0.55); transition: transform .34s var(--ease-out-soft);
}
.biz-page .biz-values .biz-value:nth-child(2) .ico { background: linear-gradient(135deg, var(--c-violet), var(--c-pink)) !important; box-shadow: 0 12px 26px -10px rgba(139,92,246,0.55); }
.biz-page .biz-values .biz-value:nth-child(3) .ico { background: linear-gradient(135deg, var(--c-cyan), var(--c-electric)) !important; box-shadow: 0 12px 26px -10px rgba(34,211,238,0.5); }
.biz-page .biz-value:hover .ico { transform: translateY(-2px) scale(1.06) rotate(-3deg); }
.biz-page .biz-value h3 { font-size: 19px !important; font-weight: 700 !important; }
@media (max-width: 600px) {
  .biz-value-num { font-size: 64px; top: 6px; right: 12px; }
  .biz-page .biz-value { padding: 20px 18px !important; }
}

/* ════════════════════════════════════════════════════════════
   20. PAGE ACTIVITÉ — embellissement (timeline reliée, compteurs
   vivants, barres animées). Aucune logique touchée.
   ════════════════════════════════════════════════════════════ */
/* Compteurs : accent coloré par tuile + valeur XXL + hover qui soulève */
.activity-counters .act-counter {
  border-radius: 18px !important;
  transition: transform .28s var(--ease-out-soft), box-shadow .28s !important;
}
.activity-counters .act-counter::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c-electric);
}
.activity-counters .act-counter:nth-child(2)::before { background: var(--c-cyan); }
.activity-counters .act-counter:nth-child(3)::before { background: var(--c-green); }
.activity-counters .act-counter:nth-child(4)::before { background: var(--c-violet); }
.activity-counters .act-counter:hover { transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 22px 44px -22px rgba(20,20,60,0.26) !important; }
.activity-counters .act-counter .v { font-size: clamp(28px, 3vw, 38px) !important; }

/* Flux : épine verticale reliant les nœuds d'une même journée */
.act-list { position: relative; }
.act-list::before {
  content: ''; position: absolute; left: 37px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(180deg, var(--line), var(--line) 70%, transparent);
  z-index: 0;
}
.act-card { position: relative; z-index: 1; }
/* le nœud lumineux se détache de l'épine (fond plein) */
.act-dot { box-shadow: 0 0 0 4px #fff; }

/* Pills de filtre : état actif plus net */
.actf-pill.is-active { box-shadow: 0 8px 20px -10px rgba(20,20,60,0.4); }

/* Barres « secteurs » : remplissage animé à l'apparition */
@keyframes actBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.act-cat-bar > div { transform-origin: left; animation: actBarGrow .8s var(--ease-out-soft) both; }
.act-mover-bar > div { transform-origin: left; animation: actBarGrow .8s var(--ease-out-soft) both; }

@media (prefers-reduced-motion: reduce) {
  .act-cat-bar > div, .act-mover-bar > div { animation: none; }
}
@media (max-width: 600px) {
  .act-list::before { left: 33px; }
}

/* Heatmap façon GitHub (rail Activité) */
.act-heat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 8px; }
.act-heat-cell { aspect-ratio: 1; border-radius: 5px; background: var(--bg-2); }
.act-heat-cell[data-lvl="1"] { background: color-mix(in srgb, var(--c-electric) 28%, #fff); }
.act-heat-cell[data-lvl="2"] { background: color-mix(in srgb, var(--c-electric) 52%, #fff); }
.act-heat-cell[data-lvl="3"] { background: color-mix(in srgb, var(--c-electric) 76%, #fff); }
.act-heat-cell[data-lvl="4"] { background: var(--c-electric); }
.act-heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 10.5px; color: var(--ink-300); }
.act-heat-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--bg-2); }
.act-heat-legend i[data-lvl="1"] { background: color-mix(in srgb, var(--c-electric) 28%, #fff); }
.act-heat-legend i[data-lvl="2"] { background: color-mix(in srgb, var(--c-electric) 52%, #fff); }
.act-heat-legend i[data-lvl="3"] { background: color-mix(in srgb, var(--c-electric) 76%, #fff); }
.act-heat-legend i[data-lvl="4"] { background: var(--c-electric); }
.act-heat-legend span:last-child { margin-left: 2px; }
@media (max-width: 767px) {
  .biz-reveal-stage { padding: 0 14px; }
  .biz-reveal-card { border-radius: 20px; padding: 8px; }
  .brc-screen { padding: 14px; min-height: 200px; }
}

/* ════════════════════════════════════════════════════════════
   19. REFONTE MOBILE (≤ 640px) : titres plus petits, cartes de
   groupe condensées façon Vinted (2 colonnes, l'essentiel ; tout
   le détail sur la fiche), page Pros resserrée. Desktop inchangé.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* — Titres / textes : nettement plus petits — */
  .t-hero          { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.05 !important; }
  .page-hero-title { font-size: clamp(26px, 7.6vw, 34px) !important; line-height: 1.08 !important; }
  .t-display       { font-size: clamp(23px, 6.4vw, 30px) !important; line-height: 1.12 !important; }
  .t-headline      { font-size: clamp(20px, 5.4vw, 25px) !important; line-height: 1.16 !important; }
  .t-lead          { font-size: 14.5px !important; line-height: 1.5 !important; }
  .page-hero-sub   { font-size: 14.5px !important; line-height: 1.5 !important; }
  .hero-sub        { font-size: clamp(15px, 4.4vw, 19px) !important; }
  .page-hero       { padding: 120px 0 36px !important; }
  .section         { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* ── Cartes de groupe / offre : grille 2 colonnes condensée ── */
  .grid-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gc, .cond-card {
    padding: 12px 12px 13px !important; border-radius: 15px !important;
    max-height: none !important;
  }
  .gc:hover, .cond-card:hover { transform: none !important; }
  /* Badges compacts, sur une ligne qui peut passer à la suivante */
  .gc-badges { gap: 5px !important; margin-bottom: 8px !important; }
  .gc-badges .badge, .gc-badges .gtype-badge, .cond-head .gtype-badge {
    font-size: 9.5px !important; padding: 3px 7px !important;
  }
  .credible-badge .cb-dot { width: 5px; height: 5px; }
  .gc-eyebrow, .cond-card .gc-eyebrow { font-size: 10.5px !important; margin-bottom: 3px !important; }
  .gc-title, .cond-title {
    font-size: 14.5px !important; line-height: 1.25 !important; margin-bottom: 6px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* L'ESSENTIEL visible : prix + progression + échéance. Le reste → fiche. */
  .gc-desc, .cond-desc,
  .card-tiers, .card-bounds,
  .trust-breakdown, .gc-range, .gc-cta,
  .cond-foot, .auto-origin-note,
  .gc-concluded { display: none !important; }
  .card-offer { margin: 6px 0 8px !important; }
  .card-price, .cond-price { font-size: 22px !important; }
  .card-price-off { font-size: 11px !important; padding: 2px 7px !important; }
  .cond-price-cap { font-size: 11px !important; }
  /* Progression compacte */
  .gc-progress-row { margin-bottom: 10px !important; }
  .gc-progress { height: 5px !important; }
  .gc-progress-meta { font-size: 11.5px !important; }
  .gc-interest-row { gap: 6px !important; }
  .gc-interest-num { font-size: 18px !important; }
  .gc-interest-l { font-size: 11px !important; line-height: 1.3 !important; }
  /* Pied : on ne garde que l'échéance (budget masqué pour gagner de la place) */
  .gc-foot { grid-template-columns: 1fr !important; padding-top: 10px !important; margin-top: 8px !important; }
  .gc-foot .gc-stat:first-child:nth-last-child(2) { display: none !important; }
  .gc-stat-l { font-size: 10px !important; }
  .gc-stat-v { font-size: 12.5px !important; }
  /* CardOfferSummary (mini-bandeau d'offre sur la carte demande) : compact */
  .card-offer-summary { padding: 8px 10px !important; }

  /* ── Page Pros : resserrée ── */
  .biz-page .biz-hero { padding: 104px 0 28px !important; }
  .biz-hero-title { font-size: clamp(27px, 8vw, 36px) !important; line-height: 1.08 !important; }
  .biz-hero-sub, .biz-page .t-lead { font-size: 14.5px !important; }
  .biz-page .section { padding-top: 34px !important; padding-bottom: 34px !important; }
  .biz-values { gap: 10px !important; }
  .biz-page .biz-value { padding: 18px 16px !important; border-radius: 16px !important; }
  .biz-page .biz-value .ico { width: 42px !important; height: 42px !important; }
  .biz-hero-stats { gap: 18px !important; }
  .biz-teaser { gap: 10px !important; }
}

/* Téléphones étroits : éviter que 2 colonnes deviennent illisibles */
@media (max-width: 360px) {
  .grid-cards { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   22. PAGE ACTIVITÉ — épuré (hairlines nettes, sobre)
   ════════════════════════════════════════════════════════════ */
.act-card {
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s !important;
}
.act-card:hover {
  transform: none !important;
  background: var(--bg-2) !important;
  border-color: var(--ink-200) !important;
  box-shadow: none !important;
}
.act-dot { box-shadow: 0 0 0 4px #fff !important; }
.act-day-count, .act-stat-v, .gc-progress-meta { font-variant-numeric: tabular-nums; }

/* Panneaux du rail : sobres, sans glassy ni liseré */
.act-panel {
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.act-panel-head h4 { letter-spacing: -0.01em; }
.act-panel-tag { font-variant-numeric: tabular-nums; }

/* Rang « En tête » : pastille sobre */
.act-mover-rank { background: var(--ink-900) !important; box-shadow: none !important; }
.act-mover-score b { font-variant-numeric: tabular-nums; }
.activity-counters .act-counter .v { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .act-card { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   21. PALIERS DE PRIX + COMPTE À REBOURS (fiche groupe) — refonte
   premium. Aucune logique/texte touché, CSS uniquement.
   ════════════════════════════════════════════════════════════ */
.tier-block {
  border-radius: 20px !important; padding: 24px !important;
  background: #fff !important; border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tier-eyebrow { font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500) !important; }
.tier-best { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; font-weight: 700; color: #1f8a4c;
  background: rgba(48,209,88,0.12); padding: 3px 10px; border-radius: 99px; }
.tier-best span { font-weight: 500; opacity: 0.8; }

/* Échelle : chaque palier = ligne claire, palier courant en relief */
.tl-list { display: grid; gap: 8px !important; margin: 0; padding: 0; list-style: none; }
.tl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px !important; border-radius: 12px !important;
  border: 1px solid var(--line) !important; background: #fff !important;
  position: relative; overflow: hidden;
}
.tl-cond { font-size: 13.5px; color: var(--ink-500); }
.tl-cond strong { color: var(--ink-900); font-weight: 700; }
.tl-price { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); white-space: nowrap; }
.tl-pct { font-size: 12px; font-weight: 600; color: #1f9d57; margin-left: 6px; }
.tl-row.is-reached { background: #fff !important; border-color: var(--line) !important; }
.tl-row.is-reached .tl-cond strong { color: #1f8a4c; }
.tl-row.is-current {
  background: var(--bg-2) !important;
  border-color: var(--ink-200) !important; box-shadow: none !important;
}
.tl-row.is-current::before { display: none; }
.tl-row.is-current .tl-price { color: var(--ink-900); }
.tl-row.is-current .tl-pct { color: #1f9d57; }

.tier-unlock { margin: 14px 0 0 !important; font-size: 13.5px; color: var(--ink-500); }
.tier-unlock strong { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--c-electric); }
.tier-share { margin-top: 16px; padding: 0; border: none; background: transparent; }
.tier-share strong { display: block; font-size: 13.5px; color: var(--ink-900); margin-bottom: 2px; }
.tier-share p { margin: 0; font-size: 13px; color: var(--ink-500); line-height: 1.5; }

/* ── Bloc « Palier actuel / Prochain palier » + compte à rebours ── */
.tier-freeze {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.tier-freeze.is-frozen { display: flex; align-items: center; gap: 9px;
  background: rgba(48,209,88,0.08); border-color: rgba(48,209,88,0.22); }
.tier-freeze.is-frozen svg { color: #1f9d57; flex-shrink: 0; }
.tier-freeze .tf-line { font-size: 14px; color: var(--ink-700); }
.tier-freeze .tf-line strong { color: var(--ink-900); font-weight: 700; }
.tier-freeze .tf-line:first-child { display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-weight: 700; color: var(--ink-900); }
.tier-freeze .tf-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 7px;
  font-size: 13.5px; color: var(--ink-500); line-height: 1.7; }
.tier-freeze .tf-next strong { color: var(--ink-900); }

/* Compte à rebours : segments épurés (chiffre + label, fond clair) */
.live-cd { display: inline-flex; align-items: stretch; gap: 4px; vertical-align: middle; }
.cd-seg { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 34px; padding: 5px 7px 4px; border-radius: 9px;
  background: #fff; border: 1px solid var(--line); }
.cd-seg b { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1;
  color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cd-seg i { font-style: normal; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-300); margin-top: 3px; }

@media (max-width: 560px) {
  .tier-block { padding: 18px !important; }
  .tl-price { font-size: 16px; }
  .cd-seg { min-width: 32px; }
  .cd-seg b { font-size: 15px; }
}

/* ── Échelle de prix INTERACTIVE (readout + paliers cliquables) ── */
.tlx-readout {
  margin-bottom: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.tlx-price {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink-900);
}
.tlx-pct { color: #1f8a4c; font-size: 13px; font-weight: 700; letter-spacing: 0;
  background: rgba(48,209,88,0.12); padding: 3px 9px; border-radius: 99px; align-self: center; }
.tlx-cap { margin-top: 8px; font-size: 13px; color: var(--ink-500); }
.tlx-cap strong { color: var(--ink-900); font-weight: 700; }
.tlx-list { gap: 8px !important; }
.tlx-list li { list-style: none; }
.tlx-list .tl-row {
  width: 100%; font-family: inherit; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; appearance: none;
  transition: transform .2s var(--ease-out-soft), border-color .25s, box-shadow .25s, background .25s;
}
.tlx-list .tl-row:hover { transform: translateY(-1px); }
.tlx-list .tl-row.is-active {
  border-color: var(--ink-900) !important;
  box-shadow: none !important; background: var(--bg-2) !important;
}
.tlx-list .tl-row:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 2px; }
@media (max-width: 560px) {
  .tlx-price { font-size: 36px; }
  .tlx-readout { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tlx-list .tl-row { transition: none; }
}