/* ============================================================
   Responsive PARTAGÉ — portail revendeur French Kits
   Surcouche mobile/tablette pour les pages à styles inline (React).
   Overrides en !important (les styles inline ont priorité).
   Breakpoints : 1024 (tablette), 860 (burger), 760 (mobile large), 520 (mobile).
   ============================================================ */

/* Titres fluides */
.ec-h1 { font-size: clamp(38px, 8.5vw, 80px) !important; }
.ec-h2 { font-size: clamp(28px, 6vw, 52px) !important; }
.ec-h3-spot { font-size: clamp(30px, 7vw, 44px) !important; }

/* Menu burger (caché en desktop) */
.ec-burger, .ec-navclose { display: none; }

/* Barre de chips raccourcis : mobile uniquement (desktop = nav complète centrée) */
.ec-chipsbar { display: none; }

/* Éléments du panneau menu (libellés + section "Mon espace") : mobile uniquement */
.ec-menu-label, .ec-menu-extra, .ec-menu-link { display: none; }
.ec-backdrop { position: fixed; inset: 0; background: rgba(40,22,12,.34); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ec-backdrop.ec-open { opacity: 1; pointer-events: auto; }

@media (max-width: 1024px) {
  .ec-hero { grid-template-columns: 1fr !important; }
  .ec-hero-visual { height: 320px !important; order: -1; }
  .ec-spotlight-grid { grid-template-columns: 1fr !important; }
  .ec-spotlight-media { min-height: 280px !important; }
  .ec-cards { grid-template-columns: 1fr !important; }
}

/* En dessous de 860px : nav en panneau latéral (burger) */
@media (max-width: 860px) {
  .ec-topbar-inner { flex-wrap: wrap !important; gap: 12px 16px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .ec-burger { display: inline-flex !important; align-items: center; justify-content: center; }
  .ec-navclose { display: inline-flex !important; }
  .ec-chipsbar { display: block !important; }
  /* Panneau menu : ouverture depuis la GAUCHE */
  .ec-nav {
    position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; height: 100vh !important;
    width: 300px !important; max-width: 86vw !important; background: oklch(0.97 0.012 84) !important;
    flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 2px !important;
    padding: 70px 18px 24px !important; margin-left: 0 !important; overflow-y: auto !important;
    box-shadow: 24px 0 60px -24px rgba(40,20,10,.4) !important;
    transform: translateX(-106%) !important; transition: transform .32s cubic-bezier(.2,.8,.2,1) !important; z-index: 70 !important;
  }
  .ec-nav.ec-nav-open { transform: translateX(0) !important; }
  .ec-navclose { left: auto !important; right: 14px !important; }
  /* Liens du menu principal : alignés à gauche, pleine largeur */
  .ec-nav > a, .ec-nav > span { display: block !important; width: 100% !important; text-align: left !important; font-size: 16px !important; font-weight: 500 !important; padding: 12px 14px !important; border-radius: 10px !important; }
  /* Libellés de section + bloc "Mon espace" */
  .ec-menu-label { display: block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: oklch(0.55 0.012 65) !important; padding: 4px 14px !important; }
  .ec-menu-extra { display: block !important; width: 100% !important; border-top: 1px solid oklch(0.88 0.012 75) !important; margin-top: 12px !important; padding-top: 6px !important; }
  .ec-menu-link { display: block !important; width: 100% !important; text-align: left !important; font-size: 16px !important; padding: 12px 14px !important; border-radius: 10px !important; text-decoration: none !important; color: oklch(0.4 0.015 55); }
  .ec-proextra { display: none !important; }
  .ec-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .ec-hero-visual { display: none !important; }
  .ec-feature { font-size: 18px !important; gap: 10px 22px !important; }
  .ec-spot-specs { flex-direction: column !important; gap: 16px !important; }
  .ec-spot-specs > div { border-left: none !important; padding-left: 0 !important; }
  .ec-steps { flex-direction: column !important; gap: 14px !important; }
  .ec-quote { font-size: clamp(22px, 5.5vw, 34px) !important; }
  /* Ligne actions header en mobile : burger (gauche) · chip compte plein (centre) · panier (droite) */
  .ec-actions { width: 100% !important; gap: 10px !important; }
  .ec-chip-wrap { flex: 1 1 auto !important; min-width: 0 !important; }
  .ec-chip-wrap > button { width: 100% !important; }

  /* Barre de commande : gauge en haut, puis Total (gauche) + CTA (droite), chip panier masquée */
  .ec-orderwrap { flex-wrap: wrap !important; gap: 10px 14px !important; padding: 13px 14px !important; }
  .ec-frankbar { flex: 1 1 100% !important; min-width: 0 !important; order: -1; }
  .ec-ordertotal { width: 100% !important; justify-content: space-between !important; gap: 12px !important; align-items: center !important; }
  .ec-totalblock { text-align: left !important; }
  .ec-cartchip { display: none !important; }
  .ec-cta { flex: 1 1 auto !important; text-align: center !important; padding: 9px 16px !important; align-self: auto !important; transform: none !important; }
}

@media (max-width: 520px) {
  .h-footer-inner { grid-template-columns: 1fr 1fr !important; }
}