/* ============================================================
   MEDIFY · Mobile & Responsive Styles
   Breakpoints: 768px (tablet/mobile), 480px (small mobile)
   ============================================================ */

/* === HAMBURGER BUTTON === */
.btn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--color-stroke-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  z-index: 300;
  position: relative;
}

.btn-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-text-secondary);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

[data-theme="dark"] .btn-hamburger {
  border-color: var(--color-stroke-default);
}

/* === LANGUAGE TOGGLE BUTTON === */
.btn-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 36px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--color-stroke-default);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease, transform 0.15s ease;
  font-family: var(--font-body);
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
}

.btn-lang-toggle:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-stroke-strong);
}

[data-theme="dark"] .btn-lang-toggle {
  border-color: var(--color-stroke-default);
  color: var(--color-text-secondary);
}

/* === GLOBAL SAFETY (always on, prevents horizontal scroll) === */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings (URLs, emails) shouldn't push layout */
p, h1, h2, h3, h4, h5, li, a, span, em, strong, td, th {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* === TABLET BREAKPOINT: 1024px (catch over-wide pages early) === */
@media (max-width: 1024px) {
  .landing {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }
  .landing-header {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }
}

/* === MOBILE BREAKPOINT: 768px === */
@media (max-width: 768px) {

  /* --- Topbar --- */
  .btn-hamburger {
    display: flex;
  }

  .topbar {
    position: relative;
    border-radius: var(--radius-2xl) !important;
    height: 48px !important;
    padding: 0 12px !important;
    gap: var(--space-3) !important;
  }

  .topbar-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 96px 32px 48px;
    z-index: 200;
    gap: 4px !important;
    overflow-y: auto;
    animation: slideDown 0.3s ease;
  }

  [data-theme="dark"] .topbar-links {
    background: rgba(28, 29, 31, 0.97);
  }

  .nav-open .topbar-links {
    display: flex !important;
  }

  /* backdrop-filter sur le parent cree un nouveau containing block pour position:fixed,
     ce qui confine .topbar-links a la hauteur du topbar (48px) au lieu du viewport entier.
     On supprime le backdrop-filter quand la nav est ouverte pour corriger ce comportement. */
  .nav-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .topbar-links a {
    font-size: 18px !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-xl) !important;
    font-weight: 500;
  }

  .topbar-links a.active {
    font-size: 18px !important;
  }

  /* Hide brand-by text on mobile */
  .brand-by {
    display: none;
  }

  /* Shrink right-side buttons */
  .topbar-right {
    gap: var(--space-2) !important;
  }

  .topbar-right .btn-primary {
    font-size: 11px !important;
    padding: 5px 10px !important;
    white-space: nowrap;
  }

  /* --- Landing Header --- */
  .landing-header {
    padding: 0 12px !important;
    top: 8px !important;
  }

  /* --- Hero Sections --- */
  .hero-scanner {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: var(--space-8) 0 var(--space-10) !important;
    gap: var(--space-8) !important;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-scanner-text {
    align-items: center !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .hero-scanner-text h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
    text-align: center;
  }

  .hero-scanner-text p.sub {
    text-align: center;
    max-width: 100% !important;
  }

  .hero-scanner-actions {
    justify-content: center;
  }

  /* --- Grid layouts → single column --- */
  .cases-grid,
  .how-grid,
  .problem-grid,
  .mechanism-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Stats grid --- */
  .stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Footer --- */
  .landing-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-8) !important;
  }

  /* --- Page hero --- */
  .page-hero {
    padding: var(--space-10) 0 var(--space-8) !important;
  }

  .page-hero h1 {
    font-size: clamp(26px, 6vw, 38px) !important;
  }

  /* --- Container padding --- */
  .container, .landing-body, [class*="max-w"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Demo stage --- */
  .demo-stage {
    height: auto !important;
    min-height: 580px !important;
  }

  .final-panel {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  .list-panel {
    border-right: none !important;
    border-bottom: 1px solid var(--color-stroke-subtle) !important;
    max-height: 300px !important;
  }

  .map-panel {
    padding-top: var(--space-4) !important;
  }

  /* --- Pricing page --- */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

  .pricing-card-featured {
    order: -1;
  }

  /* --- Horizontal page --- */
  .h-panel-content {
    padding: var(--space-8) !important;
  }

  /* --- Landing wrapper: tighter side padding on mobile --- */
  .landing {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-12) !important;
  }
  .landing-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .landing .landing-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Section wrapping for any pages using .stationf-band etc. --- */
  .stationf-band, .max-w, [class*="section-"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Hero (generic landing hero) --- */
  .hero {
    padding: var(--space-10) 0 var(--space-8) !important;
    gap: var(--space-4) !important;
  }
  .hero h1 {
    font-size: clamp(30px, 8vw, 44px) !important;
    max-width: 100% !important;
  }
  .hero-sub {
    font-size: var(--text-base) !important;
    max-width: 100% !important;
  }
  .hero-actions {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .hero-actions .btn,
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    flex: 1 1 auto;
    min-width: 200px;
    justify-content: center;
  }
  .hero-trust {
    margin-top: var(--space-8) !important;
    padding-top: var(--space-6) !important;
  }

  /* --- Section heads --- */
  .sec-title {
    font-size: clamp(26px, 6.5vw, 36px) !important;
  }
  .sec-head {
    margin-bottom: var(--space-8) !important;
  }

  /* --- Force common multi-column grids to single column --- */
  .features,
  .before-after,
  .how,
  .sources,
  .sources-grid,
  .step-content,
  .connect-layout,
  .narrative,
  .stats-grid,
  .conv-grid,
  .loc-grid,
  .brand-split,
  .principles,
  .articles-grid,
  .featured-article,
  .newsletter-cta,
  .faq-split,
  .split-sec,
  .sf-top,
  .sf-proofs,
  .offer-wrap,
  .offer-vs,
  .offer-terms,
  .proof-stat,
  .case,
  .case .results,
  .mini-grid,
  .res-kpi-row {
    grid-template-columns: 1fr !important;
  }

  /* --- Compress 3+ column metric/stat rows to 2 columns --- */
  .case-kpis,
  .dash-metrics,
  .logos-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- How section (when single-col) --- */
  .how {
    padding: var(--space-5) !important;
    gap: var(--space-5) !important;
  }
  .how-visual {
    min-height: 280px !important;
    padding: var(--space-3) !important;
  }

  /* --- Feature card: relax min-height, reduce padding --- */
  .feature {
    min-height: auto !important;
    padding: var(--space-6) !important;
  }
  .feature-title { font-size: 22px !important; }

  /* --- CTA block --- */
  .cta-block {
    padding: var(--space-10) var(--space-5) !important;
  }
  .cta-block h2 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  /* --- Proof stat banner (home) --- */
  .proof-stat {
    padding: var(--space-6) !important;
    gap: var(--space-5) !important;
    margin: var(--space-8) 0 var(--space-10) !important;
  }
  .proof-stat-big {
    font-size: clamp(48px, 16vw, 72px) !important;
  }
  .proof-stat-quote {
    padding-left: var(--space-4) !important;
  }
  .proof-stat-quote .q { font-size: 17px !important; }

  /* --- Offer block (home) --- */
  .offer-wrap {
    padding: var(--space-6) !important;
    gap: var(--space-6) !important;
    border-radius: var(--radius-2xl) !important;
  }
  .offer-title {
    font-size: clamp(26px, 6vw, 36px) !important;
  }
  .offer-vs {
    padding: var(--space-4) !important;
  }
  .offer-vs-arrow { transform: rotate(90deg); }
  .offer-cta { width: 100%; }
  .offer-cta .btn-primary { flex: 1 1 auto; justify-content: center; }

  /* --- Station F band --- */
  .stationf-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: var(--space-12) !important;
  }
  .sf-left {
    padding: var(--space-6) !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(38,109,240,0.12);
  }

  /* --- Hero scanner radar/illustration cap --- */
  .v1-stage {
    max-width: 360px !important;
    margin: 0 auto;
  }
  .hero-scanner-microcopy {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- VSL section --- */
  .vsl-section {
    margin: var(--space-10) 0 var(--space-12) !important;
  }
  .vsl-section h2 {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }
  .vsl-play-btn {
    width: 64px !important;
    height: 64px !important;
  }
  .vsl-play-btn svg { width: 22px !important; height: 22px !important; }

  /* --- Stats: cap stat-value --- */
  .stat { padding: var(--space-5) var(--space-4) !important; }
  .stat-value { font-size: 36px !important; }
  .stat-value .unit { font-size: 18px !important; }

  /* --- Section spacing --- */
  section { scroll-margin-top: 64px; }

  /* --- Logo marquee: faster + smaller gap --- */
  .logo-marquee-track { gap: 28px !important; }
  .logo-item { font-size: 14px !important; }

  /* --- Footer bottom: stack --- */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    text-align: left;
  }

  /* --- Generic button row: allow wrap --- */
  .btn-group, .actions, .cta-row {
    flex-wrap: wrap;
  }

  /* --- Tables: horizontal scroll wrapper fallback --- */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* --- Code blocks --- */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* === SMALL MOBILE: 480px === */
@media (max-width: 480px) {
  .topbar-right .btn-lang-toggle {
    display: none;
  }

  .stats {
    grid-template-columns: 1fr !important;
  }

  .landing-footer {
    grid-template-columns: 1fr !important;
  }

  .demo-stage {
    min-height: 520px !important;
  }

  .metrics-bar {
    flex-wrap: wrap;
    height: auto !important;
    padding: 8px !important;
    gap: 4px !important;
  }

  .metric-item {
    padding: 4px 8px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-stroke-subtle);
  }

  .hospital-row {
    padding: 6px 12px !important;
  }

  .hosp-meta {
    display: none !important;
  }

  /* Compress further: stat/metric rows down to 1 column */
  .case-kpis,
  .dash-metrics,
  .logos-strip {
    grid-template-columns: 1fr !important;
  }

  /* Container padding tighter */
  .landing,
  .stationf-band {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Hero text aggressive cap */
  .hero h1, .hero-scanner-text h1 {
    font-size: clamp(26px, 9vw, 36px) !important;
  }
  .sec-title {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  /* Proof stat very small */
  .proof-stat-big {
    font-size: clamp(40px, 18vw, 60px) !important;
  }

  /* Cards: tighter padding */
  .feature, .problem-card, .mechanism-card, .ba-card,
  .pricing-card, .stat {
    padding: var(--space-5) !important;
  }

  /* CTA block */
  .cta-block {
    padding: var(--space-8) var(--space-4) !important;
  }

  /* Buttons full width on tiny screens */
  .hero-actions .btn,
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .offer-cta .btn-primary {
    width: 100%;
    min-width: 0;
  }
}

/* === ANIMATIONS === */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === HERO TRUST & LOGO MARQUEE === */
@media (max-width: 768px) {
  .hero-trust {
    margin-top: var(--space-6) !important;
  }

  .hero-trust-label {
    font-size: var(--text-sm) !important;
    text-align: center;
    padding: 0 var(--space-4);
  }

  .logo-marquee {
    overflow: hidden !important;
  }

  .logo-marquee-track {
    animation-duration: 20s !important;
  }

  .logo-item {
    font-size: 13px !important;
    padding: 6px 12px !important;
  }
}

/* === V1 STAGE (France Map) === */
@media (max-width: 768px) {
  .v1-stage {
    max-width: 320px !important;
    aspect-ratio: 1 !important;
  }

  .v1-signals {
    width: min(260px, calc(100% - 20px)) !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.88) !important;
  }

  .v1-signals.visible {
    transform: translateX(-50%) scale(1) !important;
  }

  .v1-label {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }

  .v1-label .score {
    font-size: 8px !important;
  }

  .v1-scan-legend {
    font-size: 9px !important;
    bottom: 8px !important;
    left: 8px !important;
  }
}

@media (max-width: 480px) {
  .v1-stage {
    max-width: 280px !important;
  }

  .v1-hospital {
    width: 8px !important;
    height: 8px !important;
  }

  .v1-hospital.hot::after,
  .v1-hospital.warm::after {
    inset: -3px !important;
  }
}

/* === LANDING FOOTER === */
@media (max-width: 768px) {
  .landing-footer {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
    padding: var(--space-8) var(--space-4) !important;
  }

  .landing-footer .brand-col {
    max-width: 100% !important;
  }

  .landing-footer h5 {
    font-size: 12px !important;
    margin-bottom: var(--space-3) !important;
  }

  .landing-footer a {
    font-size: var(--text-sm) !important;
    padding: 6px 0 !important;
  }

  .footer-bottom {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding-top: var(--space-4) !important;
    margin-top: var(--space-4) !important;
  }
}

/* === SPLIT SECTION (Data Stream) === */
@media (max-width: 768px) {
  .split-sec {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
    margin-top: var(--space-16) !important;
  }

  .v5-stage {
    height: auto !important;
    min-height: 420px !important;
    order: -1;
  }

  .split-text h2 {
    font-size: clamp(26px, 6vw, 32px) !important;
  }

  .v5-pane {
    padding: 12px !important;
  }

  .v5-persona-card {
    min-width: 160px !important;
    padding: 8px 10px !important;
  }

  .v5-persona-card .av {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
  }

  .v5-persona-card .nm {
    font-size: 12px !important;
  }

  .v5-persona-card .rl {
    font-size: 10px !important;
  }
}

/* === SECTION HEADERS === */
@media (max-width: 768px) {
  .sec-head {
    padding: 0 var(--space-4) !important;
  }

  .sec-title {
    font-size: clamp(26px, 6vw, 32px) !important;
  }

  .sec-sub {
    font-size: var(--text-base) !important;
  }

  .sec-eyebrow {
    font-size: 10px !important;
  }
}

/* === PROOF STAT BANNER === */
@media (max-width: 768px) {
  .proof-stat {
    grid-template-columns: 1fr !important;
    padding: var(--space-6) !important;
    gap: var(--space-6) !important;
    text-align: center;
  }

  .proof-stat-big {
    font-size: clamp(48px, 12vw, 72px) !important;
  }

  .proof-stat-quote {
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 2px solid var(--color-stroke-default);
    padding-top: var(--space-4);
  }

  .proof-stat-quote .q {
    font-size: 18px !important;
  }

  .proof-stat-legend {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* === CASE CARDS === */
@media (max-width: 768px) {
  .case-card {
    padding: var(--space-4) !important;
  }

  .case-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-2) !important;
  }

  .case-kpi .v {
    font-size: 22px !important;
  }

  .case-kpi .k {
    font-size: 9px !important;
  }

  .case-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
  }

  .case-segment {
    align-self: flex-start;
  }
}

/* === PROBLEM & MECHANISM CARDS === */
@media (max-width: 768px) {
  .problem-card,
  .mechanism-card {
    padding: var(--space-5) !important;
  }

  .problem-title,
  .mechanism-title {
    font-size: 20px !important;
  }

  .problem-body,
  .mechanism-body {
    font-size: var(--text-sm) !important;
  }
}

/* === FIT CARDS (Pour qui / Pas pour qui) === */
@media (max-width: 768px) {
  .fit-card {
    padding: var(--space-5) !important;
  }

  .fit-title {
    font-size: 20px !important;
  }

  .fit-list li {
    font-size: var(--text-sm) !important;
    padding-left: calc(18px + var(--space-2)) !important;
  }
}

/* === OFFER SECTION === */
@media (max-width: 768px) {
  .offer-wrap {
    padding: var(--space-6) !important;
    gap: var(--space-6) !important;
  }

  .offer-title {
    font-size: clamp(26px, 6vw, 32px) !important;
  }

  .offer-sub {
    font-size: var(--text-base) !important;
  }

  .offer-vs {
    padding: var(--space-4) !important;
  }

  .offer-vs-col .val {
    font-size: 20px !important;
  }

  .offer-deliv {
    padding: var(--space-3) !important;
  }
}

/* === FAQ ITEMS === */
@media (max-width: 768px) {
  .faq-item summary {
    padding: var(--space-4) !important;
    font-size: 16px !important;
  }

  .faq-item .faq-body {
    padding: 0 var(--space-4) var(--space-4) !important;
    font-size: var(--text-sm) !important;
  }

  .faq-list {
    gap: var(--space-2) !important;
  }
}

/* === TEAM ORBIT === */
@media (max-width: 768px) {
  .team-orbit-section {
    padding: var(--space-12) var(--space-4) 0 !important;
  }
}

@media (max-width: 560px) {
  .orbit-stage {
    width: 340px !important;
    height: 340px !important;
  }

  .orbit-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 11px !important;
  }

  .orbit-center {
    width: 160px !important;
  }

  .omc-avatar-sm {
    width: 60px !important;
    height: 60px !important;
    font-size: 14px !important;
  }

  .omc-name {
    font-size: 14px !important;
  }

  .omc-desc {
    font-size: 11px !important;
  }
}

@media (max-width: 400px) {
  .orbit-stage {
    width: 300px !important;
    height: 300px !important;
  }

  .orbit-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 10px !important;
  }
}

/* === STATION F CARD === */
@media (max-width: 768px) {
  .stationf-band {
    padding: 0 var(--space-4) var(--space-12) !important;
  }

  .stationf-logo {
    width: 120px !important;
  }

  .sf-left {
    padding: var(--space-5) !important;
  }

  .sf-right {
    padding: var(--space-5) !important;
  }

  .sf-headline {
    font-size: clamp(22px, 5vw, 28px) !important;
  }

  .sf-sub {
    font-size: 13px !important;
  }

  .sf-proof {
    padding: 16px 20px !important;
  }

  .sf-proof-title {
    font-size: 12px !important;
  }

  .sf-proof-desc {
    font-size: 11px !important;
  }
}

/* === CTA BUTTON SIZES ON MOBILE === */
@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-aurora {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  .btn-sm {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
}

/* === HERO SECTION FINE TUNING === */
@media (max-width: 480px) {
  .hero-scanner {
    padding: var(--space-6) 0 var(--space-8) !important;
  }

  .hero-scanner-text h1 {
    font-size: clamp(26px, 8vw, 32px) !important;
  }

  .hero-eyebrow-live {
    font-size: 10px !important;
    padding: 4px 10px 4px 5px !important;
  }

  .hero-scanner-microcopy {
    font-size: 12px !important;
  }
}

/* === TOUCH IMPROVEMENTS === */
@media (hover: none) {
  .topbar-link:hover {
    background: transparent;
  }

  .btn-hamburger:hover {
    background: transparent;
  }

  /* Larger touch targets */
  .topbar-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .faq-item summary {
    min-height: 44px;
  }

  .case-card,
  .problem-card,
  .mechanism-card,
  .fit-card {
    transform: none !important;
  }
}

/* === DEMO TAB : masquee sur mobile, visible sur desktop uniquement === */

/* 1. Cacher le lien "Demo" dans tous les navs sur mobile */
@media (max-width: 768px) {
  a[href="leadify-demo.html"],
  a[href="leadify-demo-en.html"] {
    display: none !important;
  }
}

/* 2. Sur la page demo elle-meme : cacher le contenu, afficher le message */
.demo-mobile-notice {
  display: none; /* cache par defaut (desktop) */
}

@media (max-width: 768px) {
  /* Afficher le message */
  .demo-mobile-notice {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 80px);
    padding: var(--space-10) var(--space-6);
    gap: var(--space-6);
  }

  .demo-mobile-notice-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(38, 109, 240, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-500, #266df0);
  }

  .demo-mobile-notice h2 {
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
  }

  .demo-mobile-notice p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
  }

  /* Masquer tout le contenu demo sur mobile */
  .demo-hero,
  #medify-demo-wrap,
  .demo-live-cta {
    display: none !important;
  }
}

/* === LEADIFY DEMO - RESPONSIVE MOBILE === */
@media (max-width: 768px) {

  #medify-demo-wrap {
    padding: 0 4px !important;
  }

  /* Sidebar cachee sur mobile : le contenu principal prend toute la largeur */
  #medify-demo-wrap .mfy-sidebar {
    display: none !important;
  }

  /* Hauteur app reduite */
  #medify-demo-wrap .mfy-app {
    height: 440px !important;
    border-radius: 10px !important;
  }

  /* Panel input : padding reduit */
  #medify-demo-wrap .p1-content {
    padding: 16px !important;
  }
  #medify-demo-wrap .p1-title {
    font-size: 15px !important;
  }
  #medify-demo-wrap .p1-label,
  #medify-demo-wrap .p1-input-text,
  #medify-demo-wrap .p1-input-card {
    font-size: 12px !important;
  }

  /* Panel 2 : s-cards - eviter overflow du tag */
  #medify-demo-wrap .s-card {
    overflow: hidden !important;
    padding-right: 8px !important;
  }
  #medify-demo-wrap .s-card-tag {
    font-size: 9px !important;
    padding: 2px 5px !important;
    flex-shrink: 0 !important;
    max-width: 52px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #medify-demo-wrap .s-card-title {
    font-size: 11px !important;
  }
  #medify-demo-wrap .s-card-desc {
    font-size: 10px !important;
  }

  /* Panel 3 : sources - 2 colonnes au lieu de 3 */
  #medify-demo-wrap .p3-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #medify-demo-wrap .p3-stats {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #medify-demo-wrap .p3-stat {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
  }
  #medify-demo-wrap .p3-stat-val {
    font-size: 18px !important;
  }
  #medify-demo-wrap .p3-title {
    font-size: 13px !important;
  }
  #medify-demo-wrap .p3-sub {
    font-size: 10px !important;
  }
  #medify-demo-wrap .p3-title-wrap {
    gap: 6px !important;
  }
  #medify-demo-wrap .p3-icon {
    font-size: 20px !important;
  }
  #medify-demo-wrap .src-card {
    gap: 6px !important;
  }

  /* Panel 4 : table de leads - scroll horizontal */
  #medify-demo-wrap .leads-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #medify-demo-wrap .leads-thead,
  #medify-demo-wrap .lrow {
    min-width: 480px !important;
  }
  #medify-demo-wrap .leads-area {
    overflow-x: auto !important;
  }

  /* Inner topbar du demo */
  #medify-demo-wrap .mfy-inner-topbar {
    padding: 8px 12px !important;
  }
  #medify-demo-wrap .mfy-inner-title {
    font-size: 12px !important;
  }

  /* Drawer (panel detail) : pleine largeur sur mobile */
  #medify-demo-wrap .lead-drawer {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Panel KPI final : 2 cartes par ligne au lieu de 3 fixes */
  #medify-demo-wrap .kpi-grid {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  #medify-demo-wrap .kpi-card {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 4px) !important;
    padding: 12px 14px !important;
  }
  #medify-demo-wrap .kpi-val {
    font-size: 20px !important;
  }
  #medify-demo-wrap .kpi-lbl {
    font-size: 10px !important;
  }
  #medify-demo-wrap .kpi-sub {
    font-size: 9px !important;
  }
  #medify-demo-wrap .p6-tagline {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  /* Padding global des panels */
  #medify-demo-wrap .mfy-panel {
    padding: 12px !important;
    overflow-y: auto !important;
  }

  /* Inner topbar : plus compact */
  #medify-demo-wrap .mfy-inner-topbar {
    padding: 6px 10px !important;
    min-height: 36px !important;
  }
  #medify-demo-wrap .mfy-inner-title {
    font-size: 11px !important;
  }
}

/* === TEXTE PLUS PETIT SUR PETIT MOBILE (<=480px) === */
@media (max-width: 480px) {

  /* Paragraphes et listes */
  .landing p,
  .landing li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Sous-titres */
  .landing h2,
  .sec-title {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  .landing h3 {
    font-size: clamp(17px, 5vw, 21px) !important;
  }

  /* Hero h1 encore plus agressif */
  .hero h1,
  .hero-scanner-text h1,
  .page-hero h1 {
    font-size: clamp(24px, 8vw, 30px) !important;
  }

  /* Sub-texte hero */
  .hero-sub,
  .hero-scanner-text p.sub,
  .page-hero p {
    font-size: 13px !important;
  }

  /* Eyebrows */
  .sec-eyebrow,
  .page-eyebrow,
  .hero-eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  /* Labels et meta */
  .label, .meta, .caption {
    font-size: 11px !important;
  }
}