/* ─── Bespoke Operations · responsive overrides ───────────────────
   Design figé en desktop à 1440 px (inline styles).
   On utilise des media queries qui overrident au-dessus avec !important.
   Breakpoint principal : 768 px.
   ──────────────────────────────────────────────────────────────── */

/* ═══ TABLETTE & MOBILE — < 1024 px ═════════════════════════════ */
@media (max-width: 1024px) {
  .bo-wrap { width: 100% !important; min-width: 0 !important; }
  .bo-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    padding: 0 32px !important;
  }
  .bo-grid > div {
    grid-column: 1 / -1 !important;
  }
  /* Retirer le minHeight du hero pour que le lead remonte naturellement */
  .bo-hero-text { min-height: 0 !important; }
}

/* ═══ MOBILE — < 768 px ════════════════════════════════════════ */
/* Swap des hints "Hover/Survoler" -> "Tap/Toucher" sur mobile.
   Defaults : on cache la version mobile partout. */
.bo-hint-m { display: none; }

@media (max-width: 768px) {
  .bo-hint-d { display: none !important; }
  .bo-hint-m { display: inline !important; }
}

@media (max-width: 768px) {
  body { display: block !important; padding: 0 !important; }
  #root { width: 100% !important; max-width: 100% !important; }
  .bo-wrap { width: 100% !important; min-width: 0 !important; overflow-x: hidden; }

  /* Toutes les Grids 12-col deviennent 1-col */
  .bo-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }
  .bo-grid > div {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    border-right: none !important;
    padding-right: 0 !important;
  }

  /* Header — réduire le padding, cacher la pill nav (trop large pour mobile) */
  .bo-nav-inner { padding: 14px 16px !important; gap: 10px !important; }
  .bo-pill-wrap { display: none !important; }
  .bo-lang-item { padding: 4px 9px !important; font-size: 9px !important; }
  .bo-lang-switch { padding: 2px !important; }
  .bo-resa { padding: 8px 14px !important; font-size: 9px !important; }
  .bo-logo .wordmark, .bo-logo div:last-child { font-size: 9px !important; }

  /* HeroLamp réduit */
  .bo-lamp-text { padding: 0 20px !important; }
  .bo-lamp-text > div:first-child { font-size: 9px !important; margin-bottom: 16px !important; }
  .bo-lamp-text h1 { font-size: 56px !important; line-height: 1 !important; letter-spacing: -0.02em !important; }
  .bo-lamp-text p { font-size: 16px !important; margin-top: 20px !important; }

  /* Titles */
  .bo-h1 { font-size: 52px !important; line-height: 1.02 !important; }
  .bo-h2 { font-size: 48px !important; line-height: 1.05 !important; white-space: normal !important; }
  .bo-display-quote { font-size: 30px !important; line-height: 1.3 !important; }
  .bo-display-quote-mark { font-size: 80px !important; }
  .bo-display-num { font-size: 72px !important; }

  /* Hero portrait - hauteur réduite */
  .bo-hero-photo, .bo-hero-photo > div { height: 420px !important; min-height: 0 !important; }

  /* Bandeau atelier - hauteur réduite */
  .bo-banner > div { height: 240px !important; }

  /* Cards services + méthode - hauteur ajustée */
  .bo-services-grid > div > div, .bo-methode-grid > div > div { height: 460px !important; }

  /* Section paddings réduits */
  .bo-section-services, .bo-section-methode { padding-top: 64px !important; padding-bottom: 64px !important; }
  .bo-section-cta { padding: 80px 0 !important; }
  .bo-section-quote { padding: 80px 0 !important; }
  .bo-section-chiffres { padding: 56px 0 !important; }

  /* Buttons CTA stack vertical sur mobile, même largeur */
  .bo-cta-buttons { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .bo-cta-buttons button, .bo-cta-buttons a {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Footer */
  .bo-footer-grid { gap: 32px !important; }

  /* Testimonials cards */
  .bo-marquee-wrap { padding: 12px 0 !important; }
}

/* ═══ Petit mobile — < 420 px ══════════════════════════════════ */
@media (max-width: 420px) {
  .bo-grid { padding: 0 16px !important; }
  .bo-lamp-text h1 { font-size: 44px !important; }
  .bo-h1 { font-size: 42px !important; }
  .bo-h2 { font-size: 38px !important; }
  .bo-display-num { font-size: 56px !important; }
  .bo-lamp-text p { font-size: 15px !important; }
}