/*
Theme Name:   HFS Child (Astra)
Theme URI:    https://healthsport.ch
Description:  Child theme of Astra for HFS Group — JAB-2026-001 + avenant n°1
Author:       AB Consulting SA — Joseph Abisaleh
Author URI:   https://abconsulting.example
Version:      1.1.0
Template:     astra
Text Domain:  hfs-child
*/

/* =========================================================================
   HFS DESIGN TOKENS — palette officielle (cf. HFS_Mockups_v1.html)
   ========================================================================= */
:root {
  --hfs-primary:        #9AB17A;
  --hfs-primary-dark:   #7A9460;
  --hfs-primary-light:  #C3CC9B;
  --hfs-cream:          #E4DFB5;
  --hfs-peach:          #FBE8CE;
  --hfs-dark:           #2A3528;
  --hfs-text:           #3F4540;
  --hfs-muted:          #76806F;
  --hfs-border:         #E0E5D0;
  --hfs-bg:             #FAFAF5;
  --hfs-bg-soft:        #F5F2E8;
  --hfs-white:          #FFFFFF;

  --hfs-radius:         12px;
  --hfs-radius-lg:      24px;
  --hfs-shadow-sm:      0 1px 2px rgba(42, 53, 40, 0.06);
  --hfs-shadow-md:      0 4px 12px rgba(42, 53, 40, 0.08);
  --hfs-shadow-lg:      0 10px 30px rgba(42, 53, 40, 0.12);
}

/* =========================================================================
   TYPOGRAPHIE
   ========================================================================= */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--hfs-text);
  background: var(--hfs-bg);
}
h1, h2, h3, h4, h5,
.entry-title, .site-title, .ast-archive-title {
  font-family: 'Poppins', sans-serif;
  color: var(--hfs-dark);
  font-weight: 700;
  line-height: 1.2;
}

/* Accent inline pour H1 du hero (ex. <span class="hfs-accent">durable</span>) */
.hfs-accent { color: var(--hfs-primary-dark); }

/* =========================================================================
   COMPOSANTS RÉUTILISABLES POUR ELEMENTOR (Phase 2)
   On préfixe tout en .hfs-* pour ne pas entrer en conflit avec Astra/Elementor.
   ========================================================================= */

/* --- Buttons --- */
.hfs-btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: var(--hfs-radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hfs-btn-primary { background: var(--hfs-primary-dark); color: #fff; }
.hfs-btn-primary:hover { background: var(--hfs-dark); transform: translateY(-1px); color: #fff; }
.hfs-btn-accent { background: var(--hfs-cream); color: var(--hfs-dark); border: 1px solid var(--hfs-primary); }
.hfs-btn-accent:hover { background: var(--hfs-peach); transform: translateY(-1px); color: var(--hfs-dark); }
.hfs-btn-outline { background: transparent; color: var(--hfs-primary-dark); border: 2px solid var(--hfs-primary); }
.hfs-btn-outline:hover { background: var(--hfs-primary); color: #fff; }

/* --- Hero gradient --- */
.hfs-hero-gradient {
  background: linear-gradient(135deg, var(--hfs-peach) 0%, var(--hfs-cream) 60%, #fff 100%);
}

/* --- Section eyebrows / titles --- */
.hfs-eyebrow {
  color: var(--hfs-primary-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

/* --- Bubble category cards (Accueil + Produits) --- */
.hfs-bubble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}
.hfs-bubble-card {
  background: #fff;
  border-radius: var(--hfs-radius);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px solid var(--hfs-border);
  transition: all 0.25s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.hfs-bubble-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hfs-shadow-md);
  border-color: var(--hfs-primary);
}
.hfs-bubble-img {
  width: 110px;
  height: 110px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hfs-cream);
}
.hfs-bubble-img img { width: 100%; height: 100%; object-fit: cover; }
.hfs-bubble-card h3 { font-size: 0.95rem; margin: 0; }

/* --- "Why us" feature cards --- */
.hfs-why-card { text-align: center; padding: 1.5rem; }
.hfs-why-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hfs-cream);
  color: var(--hfs-primary-dark);
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  margin: 0 auto 1rem;
  font-weight: 700;
}

/* --- Stats --- */
.hfs-stat-num {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--hfs-primary-dark);
  line-height: 1;
}
.hfs-stat-label {
  color: var(--hfs-muted);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Catalogue cards --- */
.hfs-cat-card {
  background: #fff;
  border-radius: var(--hfs-radius);
  border: 1px solid var(--hfs-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.hfs-cat-card:hover {
  box-shadow: var(--hfs-shadow-md);
  transform: translateY(-2px);
}
.hfs-cat-card-img { aspect-ratio: 4/3; background: var(--hfs-bg-soft); }
.hfs-cat-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hfs-cat-card-body { padding: 1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.hfs-cat-card-body h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.hfs-cat-card-body p { color: var(--hfs-muted); font-size: 0.85rem; flex: 1; margin-bottom: 1rem; }
.hfs-cat-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--hfs-primary-dark);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.hfs-cat-card-action::before { content: "📄"; font-size: 1.1rem; }

/* --- Before/after project cards --- */
.hfs-ba-card {
  background: #fff;
  border-radius: var(--hfs-radius);
  overflow: hidden;
  box-shadow: var(--hfs-shadow-sm);
  border: 1px solid var(--hfs-border);
}
.hfs-ba-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--hfs-border);
  aspect-ratio: 16/8;
}
.hfs-ba-images > div { position: relative; background: var(--hfs-bg-soft); overflow: hidden; }
.hfs-ba-images img { width: 100%; height: 100%; object-fit: cover; }
.hfs-ba-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(42, 53, 40, 0.85);
  color: #fff;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.hfs-ba-tag--after { background: var(--hfs-primary-dark); }
.hfs-ba-info { padding: 1.25rem; }
.hfs-ba-info h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.hfs-ba-info p { font-size: 0.9rem; color: var(--hfs-muted); }
.hfs-ba-info .hfs-meta {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--hfs-primary-dark);
}

/* --- Produits layout (sticky sidebar + cards) --- */
.hfs-produits-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
}
.hfs-produits-toggle {
  background: #fff;
  border-radius: var(--hfs-radius);
  border: 1px solid var(--hfs-border);
  padding: 1.25rem;
  height: fit-content;
  position: sticky;
  top: 2rem;
}
.hfs-produits-toggle h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hfs-muted);
  margin-bottom: 0.75rem;
}
.hfs-produits-toggle ul { list-style: none; padding: 0; margin: 0; }
.hfs-produits-toggle li {
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.hfs-produits-toggle a {
  color: var(--hfs-text);
  display: block;
  text-decoration: none;
}
.hfs-produits-toggle li:hover { background: var(--hfs-bg-soft); }
.hfs-produits-toggle li:hover a { color: var(--hfs-primary-dark); }
.hfs-produits-toggle li.is-active { background: var(--hfs-primary); }
.hfs-produits-toggle li.is-active a { color: #fff; font-weight: 600; }

.hfs-breadcrumb { font-size: 0.85rem; color: var(--hfs-muted); margin-bottom: 1.5rem; }
.hfs-breadcrumb a { color: var(--hfs-primary-dark); text-decoration: none; }
.hfs-breadcrumb .sep { margin: 0 0.5rem; }
.hfs-breadcrumb .current { color: var(--hfs-dark); font-weight: 600; }

.hfs-product-card {
  background: #fff;
  border-radius: var(--hfs-radius);
  border: 1px solid var(--hfs-border);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
}
.hfs-product-card-img { aspect-ratio: 1/1; background: var(--hfs-bg-soft); border-radius: 8px; overflow: hidden; }
.hfs-product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hfs-product-card-body h3 { margin-bottom: 0.5rem; }
.hfs-product-card-body p { color: var(--hfs-text); font-size: 0.9rem; margin-bottom: 0.75rem; }
.hfs-product-tag {
  display: inline-block;
  background: var(--hfs-cream);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--hfs-dark);
  margin-right: 0.4rem;
}

/* --- CTA strip --- */
.hfs-cta-strip {
  background: linear-gradient(135deg, var(--hfs-primary), var(--hfs-primary-dark));
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}
.hfs-cta-strip h2 { color: #fff; margin-bottom: 0.75rem; }
.hfs-cta-strip p { font-size: 1.1rem; margin-bottom: 1.5rem; opacity: 0.95; }
.hfs-cta-strip .hfs-btn { background: #fff; color: var(--hfs-primary-dark); }
.hfs-cta-strip .hfs-btn:hover { background: var(--hfs-cream); }

/* --- Footer dark (mockup ref) --- */
.hfs-footer-dark { background: var(--hfs-dark); color: #C8D2BE; padding: 3rem 0 1.5rem; }
.hfs-footer-dark h4 { color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; margin-bottom: 1rem; }
.hfs-footer-dark a { color: #B5C2A8; text-decoration: none; }
.hfs-footer-dark a:hover { color: #fff; }
.hfs-footer-dark p { color: #B5C2A8; font-size: 0.9rem; margin-bottom: 0.4rem; }
.hfs-footer-container { max-width: 1280px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.hfs-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.hfs-footer-col ul { list-style: none; padding: 0; margin: 0; }
.hfs-footer-col ul li { margin-bottom: 0.5rem; }
.hfs-footer-logo-img {
  height: 80px;
  width: auto;
  background: #fff;
  padding: 0.5rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  display: block;
}
.hfs-footer-bottom {
  border-top: 1px solid #4A5C46;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: #8A9684;
}

/* --- Bubble placeholder (catégorie sans image) --- */
.hfs-bubble-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--hfs-cream);
  color: var(--hfs-primary-dark);
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
}

/* --- Empty states (loops vides) --- */
.hfs-empty-state {
  background: var(--hfs-bg-soft);
  border: 1px dashed var(--hfs-border);
  border-radius: var(--hfs-radius);
  padding: 2rem;
  text-align: center;
  color: var(--hfs-muted);
  font-size: 0.95rem;
  margin: 1.5rem 0;
}
.hfs-empty-state em {
  color: var(--hfs-primary-dark);
  font-style: normal;
  font-weight: 600;
}

/* --- Catalogue sections (groupage par catégorie) --- */
.hfs-cat-section { margin-bottom: 3rem; }
.hfs-cat-section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--hfs-primary-light);
}
.hfs-cat-section-title h2 {
  color: var(--hfs-primary-dark);
  margin: 0;
  font-size: 1.5rem;
}
.hfs-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* --- Before/after grid wrapper --- */
.hfs-ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

/* --- Produits content sections --- */
.hfs-produits-content { min-width: 0; }
.hfs-produits-cat { margin-bottom: 4rem; scroll-margin-top: 100px; }
.hfs-produits-cat:last-child { margin-bottom: 0; }

/* =========================================================================
   ASTRA HEADER OVERRIDES — match mockup spec exactement
   Mockup ref:
     .site-header { background: white; padding: 0.75rem 0 (12px); border-bottom: 1px solid border }
     .logo img    { height: 64px; width: auto }
     header height totale ≈ 89 px
   ========================================================================= */

/* Sticky : staging avait position:relative, mockup static.
   Le brief client demande sticky → on fait sticky avec ombre fine au scroll. */
header.site-header,
header#masthead.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--hfs-border) !important;
  box-shadow: 0 1px 2px rgba(42,53,40,0.06);
}

/* Slim down : viser 89 px de haut total (padding 12 px + logo 64 px + padding 12 px ≈ 88) */
.ast-primary-header-bar.ast-primary-header,
.main-header-bar,
.ast-main-header-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.site-primary-header-wrap.ast-builder-grid-row-container {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Sortir le hidden-overflow qui peut bloquer le sticky */
html, body, #page, .ast-container {
  overflow: visible !important;
}
body { overflow-x: clip !important; }       /* protect against horizontal overflow without breaking sticky */

/* Texte branding (titre + tagline) déjà invisible */
.ast-site-title-wrap,
.site-tagline-wrap,
.site-description { display: none !important; }

/* Logo : height-constrained à 64 px exact (mockup spec) */
.ast-site-identity .custom-logo,
.ast-site-identity .custom-logo-link,
.ast-site-identity .custom-logo-link img,
.site-logo-img img {
  height: 64px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 64px !important;
  display: block;
}

/* .site-branding ajoute 16px top/bottom padding qui gonfle le header.
   On l'enlève — le wrap parent gère déjà le padding 12px 0. */
.site-branding,
.ast-site-identity {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Astra calcule grid-template-rows à 98px à cause des sections à hauteur stretchée.
   On force la grille à 64px (= hauteur logo) avec align-items center.
   Les enfants centrent verticalement, le header total = 64 + 2×12 = 88 px. */
.ast-builder-grid-row,
.ast-primary-header-bar .ast-builder-grid-row,
.site-primary-header-wrap .ast-builder-grid-row {
  grid-template-rows: 64px !important;
  height: 64px !important;
  min-height: 0 !important;
  max-height: 64px !important;
  align-items: center !important;
}
.site-header-primary-section-left,
.site-header-primary-section-center,
.site-header-primary-section-right,
.ast-builder-menu-1,
.ast-builder-layout-element,
.main-header-bar-navigation,
.site-navigation {
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  align-self: center !important;
}
.main-header-menu,
.main-header-menu > .menu-item,
.main-header-menu > .menu-item > a,
.main-header-menu > .menu-item > .menu-link {
  min-height: 0 !important;
  height: auto !important;
  align-self: center !important;
}

/* Astra primary nav typography & spacing — match mockup (.site-nav { gap: 1.5rem })
   Mockup ref: 6 nav items spaced 1.5rem (24px) apart, padding 0.5rem 0, underline on hover/active */
.main-header-menu,
ul.main-header-menu {
  display: flex !important;
  gap: 1.5rem !important;
  align-items: center;
  margin: 0;
  padding: 0;
}
.main-header-menu > .menu-item {
  margin: 0 !important;            /* le gap du parent gère l'espacement */
  padding: 0 !important;
  list-style: none;
}
.main-header-menu > .menu-item > a,
.main-header-menu > .menu-item > .menu-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: var(--hfs-text) !important;
  padding: 0.5rem 0 !important;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: inline-block;
  text-decoration: none;
}
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item.current_page_item > a {
  color: var(--hfs-primary-dark) !important;
  border-bottom-color: var(--hfs-primary) !important;
}

/* Astra Header Builder button-1 ("Nous contacter") : style cream HFS — match .btn-accent
   Mockup ref: padding 0.85rem 1.6rem (13.6×25.6), border-radius 12px, font-size 0.95rem, weight 600 */
.ast-custom-button-link { display: inline-block; text-decoration: none; }
.ast-custom-button-link .ast-custom-button {
  background: var(--hfs-cream) !important;
  color: var(--hfs-dark) !important;
  border: 1px solid var(--hfs-primary) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1.6rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1.3;
  transition: all 0.2s ease;
  display: inline-block;
}
.ast-custom-button-link:hover .ast-custom-button {
  background: var(--hfs-peach) !important;
  color: var(--hfs-dark) !important;
}

/* Header layout : grid 1fr auto 1fr to center the menu */
.ast-primary-header-bar .ast-builder-grid-row { align-items: center; gap: 1.5rem; }
.site-header-primary-section-center { justify-self: center; }
.site-header-primary-section-right .ast-builder-layout-element { align-self: center; }

/* =========================================================================
   ELEMENTOR INTEROP — make our HFS classes win over Elementor defaults
   ========================================================================= */

/* Headings rendered by Elementor heading widget — apply HFS typography */
.elementor-element .elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
  color: var(--hfs-dark) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  line-height: 1.2;
}
.elementor-heading-title .hfs-accent {
  color: var(--hfs-primary-dark) !important;
}
h1.elementor-heading-title { font-size: clamp(2rem, 4vw, 3.25rem); }
h2.elementor-heading-title { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3.elementor-heading-title { font-size: 1.25rem; }

/* CTA strip section : forcer headings/text en blanc */
.elementor-section[data-settings*="9AB17A"] .elementor-heading-title,
.elementor-section[data-settings*="7A9460"] .elementor-heading-title { color: #fff !important; }

/* Hero image responsive — fill the column */
.elementor-widget-image,
.elementor-widget-image > .elementor-widget-container,
.elementor-widget-image > .elementor-widget-container > a { display: block; width: 100%; }
.elementor-widget-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Hero image dans la colonne hero : radius 24px, shadow lg, aspect 4/3 — mockup .hero-img
   Elementor v4 rend l'image directement dans le wrapper (pas de .elementor-widget-container intermédiaire). */
.hfs-hero-img-wrapper,
.elementor-element.hfs-hero-img-wrapper {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(42, 53, 40, 0.12) !important;
  background: var(--hfs-bg-soft);
  aspect-ratio: 4/3;
}
.hfs-hero-img-wrapper img,
.elementor-element.hfs-hero-img-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Section hero : forcer gradient 3 stops (peach 0% → cream 60% → white 100%).
   Elementor n'applique pas _css_classes sur les sections (uniquement widgets), donc
   on cible via #hfs-hero (Advanced > CSS ID) défini dans le builder PHP. */
.elementor-section#hfs-hero,
section.elementor-section#hfs-hero {
  background-image: linear-gradient(135deg, #FBE8CE 0%, #E4DFB5 60%, #FFFFFF 100%) !important;
}

/* H1 hero : margin-bottom 1.25rem (mockup) */
.elementor-widget-heading h1.elementor-heading-title { margin-bottom: 1.25rem !important; }
.elementor-widget-heading h2.elementor-heading-title { margin-bottom: 1rem !important; }

/* Force column widths — Elementor's flex-basis defaults clash with our split sections.
   On desktop, snap each col-XX class to its declared percent. */
@media (min-width: 768px) {
  .elementor-section > .elementor-container > .elementor-col-50 { width: 50%; flex: 0 0 50%; max-width: 50%; }
  .elementor-section > .elementor-container > .elementor-col-45 { width: 45%; flex: 0 0 45%; max-width: 45%; }
  .elementor-section > .elementor-container > .elementor-col-55 { width: 55%; flex: 0 0 55%; max-width: 55%; }
  .elementor-section > .elementor-container > .elementor-col-33 { width: 33.33%; flex: 0 0 33.33%; max-width: 33.33%; }
  .elementor-section > .elementor-container > .elementor-col-66 { width: 66.66%; flex: 0 0 66.66%; max-width: 66.66%; }
  .elementor-section > .elementor-container > .elementor-col-100 { width: 100%; flex: 0 0 100%; max-width: 100%; }
}

/* Hero lead paragraph : taille mockup */
.elementor-widget-text-editor p.hfs-lead,
.elementor-widget-text-editor[data-id*=""] > .elementor-widget-container > p:first-of-type {
  font-size: 1.15rem;
  color: var(--hfs-text);
  max-width: 560px;
  line-height: 1.5;
}

/* Bubble grid : sizing exact mockup */
.hfs-bubble-grid { gap: 1.5rem; }
.hfs-bubble-img { width: 110px; height: 110px; }
.hfs-bubble-card { padding: 1.5rem 1rem; }
.hfs-bubble-card h3 { margin-top: 0.25rem; }

/* Bouton custom HFS dans html-widget Elementor : booster la spécificité */
.elementor .hfs-btn,
.elementor-widget-html .hfs-btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: var(--hfs-radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  line-height: 1.3;
}
.elementor .hfs-btn-primary,
.elementor-widget-html .hfs-btn-primary {
  background: var(--hfs-primary-dark) !important;
  color: #fff !important;
  border: none;
}
.elementor .hfs-btn-primary:hover,
.elementor-widget-html .hfs-btn-primary:hover {
  background: var(--hfs-dark) !important;
  transform: translateY(-1px);
}
.elementor .hfs-btn-accent,
.elementor-widget-html .hfs-btn-accent {
  background: var(--hfs-cream) !important;
  color: var(--hfs-dark) !important;
  border: 1px solid var(--hfs-primary);
}
.elementor .hfs-btn-outline,
.elementor-widget-html .hfs-btn-outline {
  background: transparent !important;
  color: var(--hfs-primary-dark) !important;
  border: 2px solid var(--hfs-primary);
}
.elementor .hfs-btn-outline:hover,
.elementor-widget-html .hfs-btn-outline:hover {
  background: var(--hfs-primary) !important;
  color: #fff !important;
  border-color: var(--hfs-primary);
}

/* Section padding par défaut — tightening pour matcher mockup */
.elementor-section .elementor-container { max-width: 1280px; }

/* Eyebrow centré dans une section centrée (Elementor wrappe en div) */
.elementor-widget-text-editor .hfs-eyebrow { display: block; }

/* Section CTA strip — Elementor met text-editor en block, on centre les enfants */
.elementor-section[data-settings*="gradient"] .elementor-heading-title { text-align: center; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .hfs-produits-layout { grid-template-columns: 1fr; }
  .hfs-produits-toggle { position: static; }
  .hfs-product-card { grid-template-columns: 1fr; }
  .hfs-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hfs-footer-grid { grid-template-columns: 1fr; }
  .hfs-footer-bottom { flex-direction: column; align-items: flex-start; }
}