/**
 * MCPRO — Interface ORDINATEUR uniquement (≥769px)
 * Ne pas mettre de règles mobile ici.
 */
@media (min-width: 769px) {
  /* Masquer chrome mobile (espaces compte / admin) */
  body:not(.mcpro-public-site) .nav-mobile-cat-btn,
  body:not(.mcpro-public-site) .nav-mobile-toggle,
  body:not(.mcpro-public-site) .mobile-bottom-nav,
  body:not(.mcpro-public-site) .nav-mobile-drawer,
  body:not(.mcpro-public-site) .nav-mobile-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .cart-cards,
  .u-mobile-only {
    display: none !important;
  }

  .cart-table-desktop {
    display: block !important;
  }

  /* Tiroir catégories fermé (ne pas couvrir la page) */
  body:not(.cat-drawer-open) .cat-drawer {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:not(.cat-drawer-open) .cat-drawer-backdrop {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Bouton thème + langue desktop */
  .site-header--public .navbar-theme-toggle,
  .site-header--public .lang-switcher,
  .site-header--public .lang-switcher-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .site-header--public .navbar-theme-toggle .theme-toggle-label {
    display: inline;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.25rem;
    max-width: 5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header--public .lang-switcher-menu:not(.lang-switcher-menu--mobile) {
    background: var(--cp-surface, #fff);
    border: 1px solid var(--cp-border, #e2e8f0);
    color: var(--cp-text, #0f2744);
  }

  /* Contenu toujours visible */
  body.mcpro-public-site .hero-pro,
  body.mcpro-public-site .section,
  body.mcpro-public-site main,
  body.mcpro-public-site .page-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Header public : bandeau nav + masquer hamburger uniquement sur vrai desktop */
@media (min-width: 901px) {
  .site-header--public .navbar-center.header-desktop-only {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .site-header--public .header-desktop-only .cat-hamburger-btn {
    display: inline-flex !important;
  }

  body.mcpro-public-site .nav-mobile-cat-btn,
  body.mcpro-public-site .nav-mobile-toggle,
  body.mcpro-public-site .mobile-bottom-nav,
  body.mcpro-public-site .nav-mobile-drawer,
  body.mcpro-public-site .nav-mobile-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mcpro-public-site {
    padding-bottom: 0 !important;
  }
}

/* Tablette large : conserve la grille 2 lignes (logo + bandeau marron) */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header--public .navbar-logo img,
  .site-header--public .navbar-logo-img {
    height: 88px !important;
    max-width: 280px !important;
  }
}

/* ─── Carrousel hero — animation + navigation (desktop ≥769px) ─── */
@keyframes mcproHeroSlideIn {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

body[data-page="home"] .hero-pro h1.hero-slide-in,
body[data-page="home"] .hero-pro .lead.hero-slide-in {
  animation: mcproHeroSlideIn 0.45s ease both;
}

body[data-page="home"] .hero-mobile-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 2.25rem;
}

body[data-page="home"] .hero-mobile-dots span:not(.hero-mobile-arrow) {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}

body[data-page="home"] .hero-mobile-dots span:not(.hero-mobile-arrow):hover {
  background: rgba(255, 255, 255, 0.65);
}

body[data-page="home"] .hero-mobile-dots span.is-active {
  background: var(--cp-cta, #e85d04);
  transform: scale(1.3);
}

body[data-page="home"] .hero-mobile-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, border-color 0.2s;
}

body[data-page="home"] .hero-mobile-arrow:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.65);
}
