/* Rendu de référence compact de l'accueil client. */
@media (max-width: 520px) {
  body[data-page="client"] { overflow-x: hidden !important; }

  body[data-page="client"] > .topbar {
    display: flex !important;
    position: relative !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px 7px !important;
    gap: 4px !important;
  }
  body[data-page="client"] .brand { gap: 4px !important; }
  body[data-page="client"] .brand-mark { display: grid !important; width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
  body[data-page="client"] .brand strong { font-size: 10px !important; }
  body[data-page="client"] .brand small { display: block !important; max-width: 105px; font-size: 5px !important; line-height: 1 !important; }
  body[data-page="client"] .nav-primary-links { display: flex !important; gap: 6px !important; }
  body[data-page="client"] .nav-primary-links a { font-size: 5px !important; white-space: nowrap; }
  body[data-page="client"] .nav-account-actions { gap: 2px !important; }
  body[data-page="client"] .nav-account-actions .button { min-height: 21px !important; padding: 3px 5px !important; font-size: 5px !important; }
  body[data-page="client"] .icon-nav-button { width: 22px !important; height: 22px !important; }

  body[data-page="client"] > .home-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%) !important;
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    margin: 0 !important;
    padding: 18px 14px 34px !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(90deg, rgba(2, 11, 18, .88), rgba(2, 11, 18, .28) 62%, rgba(2, 11, 18, .05)),
      url("assets/mecatech-workshop-hero.png") center / cover no-repeat !important;
  }
  body[data-page="client"] .home-hero-content { width: 100% !important; min-width: 0 !important; padding: 0 !important; z-index: 3 !important; }
  body[data-page="client"] .home-hero .section-kicker { display: block !important; margin: 0 0 4px !important; font-size: 6px !important; }
  body[data-page="client"] .home-hero h1 { max-width: 245px !important; margin: 0 0 5px !important; font-size: 27px !important; line-height: .96 !important; letter-spacing: -.04em !important; }
  body[data-page="client"] .home-hero-lead { display: block !important; max-width: 210px !important; margin: 0 0 8px !important; font-size: 7px !important; line-height: 1.3 !important; }
  body[data-page="client"] .home-hero-ctas { display: flex !important; width: auto !important; gap: 5px !important; margin: 0 !important; }
  body[data-page="client"] .home-hero-ctas .button { min-width: 0 !important; min-height: 22px !important; padding: 4px 7px !important; font-size: 6px !important; white-space: nowrap; }

  body[data-page="client"] .home-hero-card { position: absolute !important; top: 0 !important; right: 0 !important; width: 48% !important; height: 180px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
  body[data-page="client"] .home-hero-mascot { top: 3px !important; right: -20% !important; width: 140% !important; height: 235px !important; bottom: auto !important; transform: none !important; overflow: visible !important; }
  body[data-page="client"] .home-hero-mascot img { width: 100% !important; height: 235px !important; object-fit: contain !important; object-position: center top !important; }

  body[data-page="client"] > .home-actions.home-actions-single {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 1px !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  body[data-page="client"] > .home-actions .home-action-card { min-height: 49px !important; padding: 5px 6px !important; gap: 4px !important; border: 0 !important; border-radius: 0 !important; background: #f7fafc !important; }
  body[data-page="client"] > .home-actions .home-action-card strong { color: #14212b !important; font-size: 6px !important; }
  body[data-page="client"] > .home-actions .home-action-card small { color: #71808a !important; font-size: 4px !important; }
  body[data-page="client"] > .home-actions .home-action-icon { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  body[data-page="client"] > #services.page-band { width: 100% !important; margin: 0 !important; padding: 18px 14px 28px !important; }
}

/* Même composition de référence sur desktop. */
@media (min-width: 821px) {
  body[data-page="client"] > .home-hero {
    width: min(1280px, calc(100% - 72px)) !important;
    height: 350px !important;
    min-height: 350px !important;
    margin: 0 auto !important;
    padding: 38px 42px 42px !important;
    grid-template-columns: minmax(0, 56%) minmax(360px, 44%) !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  body[data-page="client"] .home-hero-content { max-width: 650px !important; padding: 0 !important; }
  body[data-page="client"] .home-hero h1 { max-width: 620px !important; margin: 8px 0 12px !important; font-size: clamp(44px, 4vw, 56px) !important; line-height: .98 !important; }
  body[data-page="client"] .home-hero-lead { max-width: 470px !important; margin-bottom: 18px !important; font-size: 12px !important; line-height: 1.4 !important; }
  body[data-page="client"] .home-hero-ctas { gap: 8px !important; margin-top: 0 !important; }
  body[data-page="client"] .home-hero-ctas .button { min-width: 150px !important; min-height: 36px !important; padding: 8px 14px !important; font-size: 10px !important; }

  body[data-page="client"] .home-hero-card { position: relative !important; min-height: 310px !important; height: 310px !important; padding: 0 !important; border: 0 !important; overflow: visible !important; }
  body[data-page="client"] .home-hero-mascot { top: 0 !important; right: -8% !important; bottom: auto !important; width: 116% !important; height: 390px !important; transform: translateY(14px) !important; overflow: visible !important; }
  body[data-page="client"] .home-hero-mascot img { width: 100% !important; height: 390px !important; object-fit: contain !important; object-position: center top !important; }

  body[data-page="client"] > .home-actions.home-actions-single { width: min(1200px, calc(100% - 120px)) !important; max-width: none !important; margin: 0 auto !important; transform: none !important; }
  body[data-page="client"] > .home-actions .home-action-card { min-height: 78px !important; padding: 13px 18px !important; }
  body[data-page="client"] > #services.page-band { width: min(1280px, calc(100% - 72px)) !important; margin: 0 auto !important; padding: 40px 52px 44px !important; }
}