/*
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.4.4
Template:     astra
Text Domain:  hfs-child
*/

/* =========================================================================
   HFS DESIGN TOKENS — palette officielle (bleu marine + cyan)
   Choix client confirmé sur round 1 — cf. docs/design-tokens.md
   ========================================================================= */
:root {
  --hfs-primary:        #3B7597;
  --hfs-primary-dark:   #093C5D;
  --hfs-primary-light:  #6FD1D7;
  --hfs-cream:          #E6F4F5;
  --hfs-peach:          #D6F4EC;
  --hfs-dark:           #093C5D;
  --hfs-text:           #1F3A4D;
  --hfs-muted:          #5A7889;
  --hfs-border:         #CFE4E7;
  --hfs-bg:             #F4FAFB;
  --hfs-bg-soft:        #E6F4F5;
  --hfs-white:          #FFFFFF;

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

/* Elementor a sérialisé des gradients durs dans les CSS générés par section
   (hero peach, CTA strip vert, sections soft cream). Comme on ne peut pas
   ré-éditer les templates sans Elementor Pro, on écrase ces sections en CSS
   par data-id (stable) ou par classe ajoutée au wrapper de section. */
.elementor-section#hfs-hero,
section.elementor-section#hfs-hero {
  background-image: linear-gradient(135deg, #D6F4EC 0%, #E6F4F5 60%, #FFFFFF 100%) !important;
}
.elementor-section[data-id="01872ab"],
.elementor-section.hfs-cta-strip-section {
  background-image: linear-gradient(135deg, #3B7597 0%, #093C5D 100%) !important;
}
.elementor-section[data-id="f3a0f56"],
.elementor-section[data-id="2865df9"],
.elementor-section.hfs-bg-soft-section {
  background-color: #E6F4F5 !important;
}
/* Footer dark : le fond suit --hfs-dark ; on rend les textes lisibles sur fond marine. */
.hfs-footer-dark { color: #BFD9DD; }
.hfs-footer-dark a { color: #A3C7CC; }
.hfs-footer-bottom { border-top-color: #1F4A66; color: #88A8B6; }

/* =========================================================================
   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;
}

/* --- "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 ---
   Uniform card format across every section: same width (grid minmax),
   same image aspect-ratio (4/3 + object-fit:cover, accepting crop), same
   body height (line-clamp + min-height), same row height (auto-rows 1fr).
   Variation in source-image dimensions or description length is absorbed
   into crop / clamp — pixel-uniform layout takes priority over quality. */
.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;
  height: 100%;
}
.hfs-cat-card:hover {
  box-shadow: var(--hfs-shadow-md);
  transform: translateY(-2px);
}
.hfs-cat-card-img {
  /* Lock the image area to 4/3 regardless of source dimensions. The inner
     <img> is absolutely positioned so its natural size can't push the
     wrapper taller (portrait-source images were breaking the layout). */
  aspect-ratio: 4 / 3;
  background: var(--hfs-bg-soft);
  position: relative;
  overflow: hidden;
}
.hfs-cat-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* !important: on Elementor pages (homepage) `.elementor img{height:auto}`
     ties our specificity and wins the cascade, leaving landscape photos
     shorter than the 4/3 box (grey gap). Force the fill. */
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.hfs-cat-card-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
}
/* h3 and p are locked to EXACTLY 2 lines (min-height = max-height with
   explicit line-height). Combined with the fixed 4/3 image area and the
   removed flex:1 from the body, every card lands on the same intrinsic
   height — long titles/descriptions truncate, short ones get reserved
   space, all cards match. */
.hfs-cat-card-body h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 0.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  max-height: 2.6em;
}
.hfs-cat-card-body p {
  color: var(--hfs-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  max-height: 2.8em;
}
.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; }
.hfs-cat-card--pending { cursor: default; opacity: 0.7; }
.hfs-cat-card--pending:hover { transform: none; box-shadow: var(--hfs-shadow-sm); }
.hfs-cat-card--pending .hfs-cat-card-action { color: var(--hfs-muted); font-style: italic; }
.hfs-cat-card--pending .hfs-cat-card-action::before { content: "🕐"; }

/* Positioning context for the badge — kept self-contained so the badge
   anchors correctly even without the expanded .hfs-cat-card-img rule. */
.hfs-cat-card-img { position: relative; overflow: hidden; }

.hfs-cat-card-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--hfs-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-bottom-right-radius: var(--hfs-radius);
  line-height: 1.2;
  max-width: 90%;
}

/* --- Hero catalogue banner (master / "toute la gamme") — slim horizontal --- */
.hfs-cat-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--hfs-border);
  border-radius: var(--hfs-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 1.5rem;
  box-shadow: var(--hfs-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 130px;
}
.hfs-cat-hero:hover {
  transform: translateY(-2px);
  box-shadow: var(--hfs-shadow-md);
}
.hfs-cat-hero-img { background: var(--hfs-bg-soft); overflow: hidden; }
.hfs-cat-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfs-cat-hero-body {
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
}
.hfs-cat-hero-text { min-width: 0; }
.hfs-cat-hero-badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hfs-primary-dark);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.hfs-cat-hero-body h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 0.2rem;
  color: var(--hfs-dark);
}
.hfs-cat-hero-body p {
  color: var(--hfs-muted);
  font-size: 0.85rem;
  margin: 0;
}
.hfs-cat-hero-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: var(--hfs-primary-dark);
  color: #fff;
  border-radius: var(--hfs-radius);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.hfs-cat-hero-action::before { content: "📄"; font-size: 1rem; }
.hfs-cat-hero:hover .hfs-cat-hero-action { background: var(--hfs-dark); }
@media (max-width: 720px) {
  .hfs-cat-hero { grid-template-columns: 1fr; min-height: 0; }
  .hfs-cat-hero-img { aspect-ratio: 3/1; }
  .hfs-cat-hero-body { grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem 1.25rem 1.25rem; }
  .hfs-cat-hero-action { align-self: flex-start; }
}

/* --- Project cards (single image) --- */
.hfs-proj-card {
  background: #fff;
  border-radius: var(--hfs-radius);
  overflow: hidden;
  box-shadow: var(--hfs-shadow-sm);
  border: 1px solid var(--hfs-border);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hfs-proj-card:hover {
  box-shadow: var(--hfs-shadow-md);
  transform: translateY(-2px);
}
.hfs-proj-img {
  aspect-ratio: 16/9;
  background: var(--hfs-bg-soft);
  overflow: hidden;
}
.hfs-proj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hfs-proj-info { padding: 1.25rem; }
.hfs-proj-info h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.hfs-proj-info p { font-size: 0.9rem; color: var(--hfs-muted); }
.hfs-proj-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: 100px;
  align-self: start;
}
.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: #BFD9DD; padding: 1.75rem 0 0.75rem; }
.hfs-footer-dark h4 { color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.8rem; margin-bottom: 0.5rem; }
.hfs-footer-dark a { color: #A3C7CC; text-decoration: none; font-size: 0.8rem; }
.hfs-footer-dark a:hover { color: #fff; }
.hfs-footer-dark p { color: #A3C7CC; font-size: 0.78rem; margin-bottom: 0.25rem; line-height: 1.45; }
.hfs-footer-container { max-width: 900px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.hfs-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 2rem;
  margin-bottom: 1rem;
}
.hfs-footer-col ul { list-style: none; padding: 0; margin: 0; }
.hfs-footer-col ul li { margin-bottom: 0.25rem; }
.hfs-footer-logo-img {
  height: 48px;
  width: auto;
  background: #fff;
  padding: 0.3rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  display: block;
}
.hfs-footer-bottom {
  border-top: 1px solid #1F4A66;
  padding-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #88A8B6;
}

/* (bubble placeholder removed — replaced by .hfs-cat-card style, round 1 §6) */

/* --- 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;
  /* auto-fill (not auto-fit) so a single card keeps the same width as a
     card in a multi-card row instead of stretching. Cards are content-
     deterministic (fixed h3 + p line counts, fixed image aspect-ratio)
     so no grid-auto-rows trickery needed. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* --- Card grid (restyle round 1 §6 — titre sous image, pas bulle) --- */
.hfs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
/* Reset on the card itself, not the grid wrapper — the catalogues listing
   renders inside .hfs-cat-grid (shortcodes.php:475) which the old
   .hfs-card-grid-scoped selector never matched, leaving link underline +
   link color on the h3/p text. */
.hfs-cat-card,
.hfs-cat-card:hover,
.hfs-cat-card:focus,
.hfs-cat-card:visited,
.hfs-cat-card h3,
.hfs-cat-card p {
  /* !important + hover/focus: Astra/Elementor underline content links on
     hover; the card is one big <a>, so its h3/p inherit it. Kill it. */
  text-decoration: none !important;
  color: inherit;
}

/* --- Catalogue sub-sections --- */
.hfs-cat-subsection { margin-bottom: 2rem; }
.hfs-cat-subsection h3 {
  font-size: 1.1rem;
  color: var(--hfs-primary-dark);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hfs-border);
}

/* --- Language selector (multi-PDF) --- */
.hfs-lang-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.hfs-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--hfs-primary-dark);
  background: var(--hfs-cream);
  border: 1px solid var(--hfs-primary);
  transition: all 0.2s ease;
}
.hfs-lang-btn:hover {
  background: var(--hfs-primary);
  color: #fff;
}

/* --- Project grid wrapper --- */
.hfs-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.hfs-proj-card[data-modal] { cursor: pointer; }
.hfs-proj-card[data-modal]:focus-visible {
  outline: 2px solid var(--hfs-primary);
  outline-offset: 2px;
}

/* =========================================================================
   CAROUSEL (Accueil hero — round 1 §2)
   Sits inside the hero right column, replacing the static image.
   ========================================================================= */
.hfs-carousel {
  width: 100%;
  border-radius: var(--hfs-radius-lg);
  overflow: hidden;
  box-shadow: var(--hfs-shadow-lg);
  background: var(--hfs-bg-soft);
}
.hfs-carousel-slide {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--hfs-bg-soft);
}
.hfs-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hfs-carousel-slide:hover img { transform: scale(1.03); }
.hfs-carousel-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--hfs-cream) 0%, var(--hfs-bg-soft) 100%);
}
.hfs-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 2.5rem 2rem;
  background: linear-gradient(to top, rgba(9, 60, 93, 0.85) 0%, transparent 100%);
  color: #fff;
}
.hfs-carousel-caption h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: #fff;
}
.hfs-carousel-caption .hfs-btn {
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
}
/* Swiper nav overrides for carousel */
.hfs-carousel .swiper-button-next,
.hfs-carousel .swiper-button-prev {
  color: #fff;
  background: rgba(9, 60, 93, 0.5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.hfs-carousel .swiper-button-next::after,
.hfs-carousel .swiper-button-prev::after { font-size: 18px; }
.hfs-carousel .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.6;
}
.hfs-carousel .swiper-pagination-bullet-active { opacity: 1; }

/* =========================================================================
   HOMEPAGE VARIANT v2 — carrousel hero plein écran (?v=2)
   Spec: docs/superpowers/specs/2026-05-12-homepage-carousel-hero-variant-design.md
   ========================================================================= */

/* When v2 active, hide the v1 text hero + the small category carousel below */
body.hfs-home-v2 #hfs-hero,
body.hfs-home-v2 #hfs-accueil-carousel,
body.hfs-home-v2 section.elementor-section#hfs-hero { display: none !important; }

.hfs-hero-v2 {
  width: 100%;
  margin: 0;
  padding: 0;
}
.hfs-hero-v2-swiper {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  max-height: 780px;
  background: var(--hfs-bg-soft);
}
.hfs-hero-v2-slide {
  position: relative;
  overflow: hidden;
  background: var(--hfs-bg-soft);
}
.hfs-hero-v2-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hfs-hero-v2-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--hfs-cream) 0%, var(--hfs-bg-soft) 100%);
}
.hfs-hero-v2-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4rem clamp(1.5rem, 6vw, 5rem) 4.5rem;
  background: linear-gradient(to top, rgba(9, 60, 93, 0.85) 0%, rgba(9, 60, 93, 0.35) 60%, transparent 100%);
  color: #fff;
}
.hfs-hero-v2-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--hfs-primary-light);
  margin-bottom: 0.75rem;
}
.hfs-hero-v2-caption h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  color: #fff;
  max-width: 720px;
}
.hfs-hero-v2-caption .hfs-btn { font-size: 0.95rem; padding: 0.85rem 1.6rem; }

/* Swiper nav + pagination overrides for v2 hero */
.hfs-hero-v2-swiper .swiper-button-next,
.hfs-hero-v2-swiper .swiper-button-prev {
  color: #fff;
  background: rgba(9, 60, 93, 0.45);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-top: -26px;
}
.hfs-hero-v2-swiper .swiper-button-next::after,
.hfs-hero-v2-swiper .swiper-button-prev::after { font-size: 20px; }
.hfs-hero-v2-swiper .swiper-pagination { bottom: 1.25rem; }
.hfs-hero-v2-swiper .swiper-pagination-bullet { background: #fff; opacity: 0.55; width: 10px; height: 10px; }
.hfs-hero-v2-swiper .swiper-pagination-bullet-active { opacity: 1; width: 28px; border-radius: 5px; transition: width 0.25s ease; }

@media (max-width: 720px) {
  .hfs-hero-v2-swiper { height: 60vh; min-height: 380px; }
  .hfs-hero-v2-caption { padding: 2.5rem 1.5rem 3rem; }
  .hfs-hero-v2-swiper .swiper-button-next,
  .hfs-hero-v2-swiper .swiper-button-prev { display: none; }
}

/* =========================================================================
   MODAL (Réalisations — round 1 §3)
   ========================================================================= */
.hfs-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.hfs-modal[hidden] { display: none; }
.hfs-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 60, 93, 0.7);
  backdrop-filter: blur(4px);
}
.hfs-modal-content {
  position: relative;
  background: var(--hfs-white);
  border-radius: var(--hfs-radius-lg);
  box-shadow: var(--hfs-shadow-lg);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
}
.hfs-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  /* !important : Elementor/Astra injectent un padding global sur <button>
     qui déformait le cercle en ellipse (60x40). */
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border: none;
  background: var(--hfs-bg-soft);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--hfs-text);
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
  z-index: 1;
}
.hfs-modal-close:hover { background: var(--hfs-border); }
.hfs-modal-title {
  font-size: 1.5rem;
  color: var(--hfs-dark);
  margin: 0 0 0.75rem;
  padding-right: 3rem;
}
.hfs-modal-meta {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--hfs-primary-dark);
  font-weight: 500;
}
.hfs-modal-contexte {
  color: var(--hfs-text);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.hfs-modal-gallery {
  border-radius: var(--hfs-radius);
  overflow: hidden;
  background: #fff;
}
.hfs-modal-gallery img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 60vh;
  object-fit: contain;
}
.hfs-modal-gallery .swiper-button-next,
.hfs-modal-gallery .swiper-button-prev {
  color: var(--hfs-primary-dark);
  background: rgba(255, 255, 255, 0.85);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.hfs-modal-gallery .swiper-button-next::after,
.hfs-modal-gallery .swiper-button-prev::after { font-size: 16px; }
.hfs-modal-gallery .swiper-pagination-bullet { background: var(--hfs-primary-dark); }
.hfs-modal-gallery .swiper-pagination-bullet-active { background: var(--hfs-primary); }

/* --- 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: 10px !important;
  padding-bottom: 10px !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 à 56 px (header total ≈ 76 px : 10 + 56 + 10) */
.ast-site-identity .custom-logo,
.ast-site-identity .custom-logo-link,
.ast-site-identity .custom-logo-link img,
.site-logo-img img {
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 56px !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: 56px !important;
  height: 56px !important;
  min-height: 0 !important;
  max-height: 56px !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 !important;
  border-bottom: 0 !important;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  display: inline-block;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  text-decoration: underline solid transparent 2px !important;
  text-underline-offset: 4px !important;
}
.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,
.main-header-menu > .menu-item.current-menu-ancestor > a {
  color: var(--hfs-primary-dark) !important;
  text-decoration-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, #D6F4EC 0%, #E6F4F5 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 sizing removed — replaced by .hfs-card-grid / .hfs-cat-card, round 1 §6) */

/* 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.
   Scope serré sur la classe .hfs-cta-strip-section pour ne PAS toucher au hero
   (qui a aussi un background gradient mais doit garder son alignement Elementor). */
.elementor-section.hfs-cta-strip-section .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; }
  .hfs-carousel-slide { aspect-ratio: 4/3; }
  .hfs-carousel-caption { padding: 2rem 1.5rem 1.5rem; }
  .hfs-modal-content { padding: 1.5rem; }
}
@media (max-width: 560px) {
  .hfs-footer-grid { grid-template-columns: 1fr; }
  .hfs-footer-bottom { flex-direction: column; align-items: flex-start; }
  .hfs-carousel-slide { aspect-ratio: 3/2; }
  .hfs-carousel-caption h3 { font-size: 1.25rem; }
  .hfs-modal { padding: 0.75rem; }
  .hfs-modal-content { padding: 1.25rem; border-radius: var(--hfs-radius); }
  .hfs-modal-gallery img { max-height: 50vh; }
  .hfs-card-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
}

/* === Carousel slide description line (admin-editable) === */
.hfs-hero-v2-desc {
    margin: 0.5rem 0 1rem;
    font-size: 1.05rem;
    line-height: 1.45;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    max-width: 46ch;
}
.hfs-carousel-desc {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    max-width: 42ch;
}
@media (max-width: 600px) {
    .hfs-hero-v2-desc { font-size: 0.95rem; max-width: 100%; }
    .hfs-carousel-desc { font-size: 0.88rem; }
}

/* =========================================================================
   MENU MOBILE (≤ 921px) — toggle Astra "dropdown"
   Le bloc header desktop plus haut applique des !important globaux
   (.main-header-menu{display:flex}, grid-row 64px) qui fuyaient dans le
   menu mobile Astra : (1) icône hamburger héritait du vert clair Astra
   #9AB17A → quasi invisible sur header blanc ; (2) le menu déroulant
   n'avait ni fond, ni largeur, ni espacement (items débordant sur le hero).
   On rétablit ici un comportement mobile propre. Cf. docs/_debug/.
   ========================================================================= */
@media (max-width: 921px) {

  /* 1 — Hamburger + croix : contraste HFS (navy) au lieu du vert clair Astra */
  .menu-toggle,
  .menu-toggle .ast-mobile-svg,
  .menu-toggle .mobile-menu-toggle-icon,
  .ast-mobile-menu-trigger-minimal,
  .ast-mobile-menu-trigger-fill {
    color: var(--hfs-dark) !important;
    fill: currentColor !important;
  }
  .menu-toggle .ast-mobile-svg { width: 1.6rem !important; height: 1.6rem !important; }

  /* 2 — Panneau du menu : blanc, pleine largeur, sous le header */
  .site-primary-header-wrap { position: relative; }
  .ast-primary-header-bar .main-header-bar-navigation {
    position: absolute;
    left: 0; right: 0; top: 100%;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid var(--hfs-border);
    box-shadow: var(--hfs-shadow-lg);
    z-index: 999;
  }
  /* Le clamp grid-row 64px du bloc desktop ne doit pas rogner le panneau */
  .ast-primary-header-bar .ast-builder-grid-row { overflow: visible !important; }

  /* 3 — Annule le display:flex !important desktop (laisse Astra piloter
        l'ouverture/fermeture) et empile les entrées en pleine largeur */
  .main-header-bar-navigation .main-header-menu,
  .main-header-bar-navigation ul.main-header-menu {
    display: block !important;
    gap: 0 !important;
    width: 100%;
    background: #ffffff !important;
  }
  .main-header-bar-navigation .main-header-menu > .menu-item {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-header-bar-navigation .main-header-menu > .menu-item > a,
  .main-header-bar-navigation .main-header-menu > .menu-item > .menu-link {
    display: block !important;
    padding: 0.95rem 1.25rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    color: var(--hfs-dark) !important;
    border-bottom: 1px solid var(--hfs-border) !important;
    text-decoration: none !important;
  }
  .main-header-bar-navigation .main-header-menu > .menu-item:last-child > a {
    border-bottom: 0 !important;
  }
  .main-header-bar-navigation .main-header-menu > .menu-item.current-menu-item > a,
  .main-header-bar-navigation .main-header-menu > .menu-item.current_page_item > a {
    background: var(--hfs-bg-soft);
    font-weight: 600;
  }
}

/* Navbar CTA — lien "Continuer sur Amezeus pour du mobilier" stylisé pill discret */
.main-header-menu > .menu-item.hfs-nav-cta {
  margin-left: 0.35rem;
}
.main-header-menu > .menu-item.hfs-nav-cta > a {
  background: var(--hfs-cream) !important;
  color: var(--hfs-dark) !important;
  border: 1px solid var(--hfs-primary) !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.main-header-menu > .menu-item.hfs-nav-cta > a::after {
  content: " \2197";
  font-weight: 600;
  margin-left: 0.1rem;
}
.main-header-menu > .menu-item.hfs-nav-cta > a:hover {
  background: var(--hfs-peach) !important;
  color: var(--hfs-dark) !important;
  text-decoration: none !important;
}
/* "Nous contacter" Astra header button must never wrap to two lines */
.ast-custom-button-link .ast-custom-button {
  white-space: nowrap !important;
}
@media (max-width: 921px) {
  .main-header-bar-navigation .main-header-menu > .menu-item.hfs-nav-cta > a {
    background: var(--hfs-cream) !important;
    color: var(--hfs-dark) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
  }
}