/* @media (min-width: 1025px) {
#index .header-top {
	    position: absolute;
	    z-index: 99;
	    left: 0;
	    right: 0;
	    background: transparent;
    }
} */
/* --- Product page: align with the Leo Beezi demo --- */

/* Quantity + add-to-cart + wishlist/compare on one row.
   theme.css styles .add/.wishlist/.compare as inline-block but leaves .qty a
   block, so it filled the 570px column and pushed the 246px button and the
   icons onto their own lines (the wrapper measured 570x168 instead of ~52). */
.product-quantity { display: flex; flex-wrap: wrap; align-items: center; }
.product-quantity .qty { margin-bottom: 0; margin-right: .5rem; }

/* Categories inline rather than stacked, as in the demo. */
.productcats ul { display: inline; padding-left: 0; margin-bottom: 0; }
.productcats li { display: inline-block; margin-right: .75rem; }

/* Hide the SKU line: 0 of 320 active products carry a reference, so it renders
   as a bare "Sku:" label with an empty value. Drop this rule if references are
   ever filled in. */
.product-reference { display: none; }

/* --- Product miniature "Ajouter au panier" == the theme's primary button ---
   Matches the "EN SAVOIR PLUS" pill so the product grid uses the same button
   language as the rest of the page. That button is an Elementor button with the
   theme's .btn-1.yelloww wrapper:
     background #f9c300, colour #033d50, uppercase, 12px switzersemibold,
     letter-spacing 2px, border-radius 8px, and a Font Awesome "\f312" dot
     pinned left and right (leoelements/views/css/front.css).
   The theme styles the grid button under 4-class selectors
   (.leo-plist-style .thumbnail-container .functional-buttons .btn-product),
   hence the !important on the visual properties. */

.product-miniature .btn-product.add-to-cart,
.product-miniature button.add-to-cart.leo-bt-cart {
  position: relative !important;
  background-color: #f9c300 !important;
  border: 1px solid #f9c300 !important;
  color: #033d50 !important;
  font-family: "switzersemibold", sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: 8px !important;
  padding: 12px 40px !important;
  box-shadow: none !important;
  transition: all .35s !important;
}

.product-miniature .btn-product.add-to-cart:hover,
.product-miniature button.add-to-cart.leo-bt-cart:hover {
  background-color: #033d50 !important;
  border-color: #033d50 !important;
  color: #f9c300 !important;
}

/* the two dots, as on .btn-1 */
.product-miniature .btn-product.add-to-cart::before,
.product-miniature .btn-product.add-to-cart::after {
  content: "\f312";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 11px;
  color: inherit;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all .35s;
}
.product-miniature .btn-product.add-to-cart::before { left: 16px; }
.product-miniature .btn-product.add-to-cart::after  { right: 16px; }

/* the reference button carries no cart glyph - the dots replace it.
   .leo-loading is left alone: it is the ajax spinner. */
.product-miniature .btn-product.add-to-cart i.icon-cart,
.product-miniature .btn-product.add-to-cart i.shopping-cart {
  display: none !important;
}

/* --- Home FAQ: "Questions fréquentes" -------------------------------------
   The production Codazon FAQ block, moved into the Home 5 builder layout as a
   text-editor widget (column class .mi-faq). It ships bare h2/h3/p carrying
   schema.org FAQPage microdata, so every rule below hangs off the microdata
   attributes instead of added classes: the markup is untouched and the
   FAQPage rich-snippet structure survives intact.

   Type and colour follow the other home sections (see "Nos bonnes raisons",
   "Collections"): gambarino display heading at 60/32px in navy #033d50,
   switzer body text, honey #f9c300 for accents, 8px radius as on .btn-1. */

.mi-faq [itemtype*="FAQPage"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 30px;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Heading spans both columns, styled as a home section title. */
.mi-faq [itemtype*="FAQPage"] > h2 {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  text-align: center;
  color: #033d50;
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1;
}

/* Short honey rule under the title, echoing the section dividers. */
.mi-faq [itemtype*="FAQPage"] > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 20px auto 0;
  background: #f9c300;
  border-radius: 2px;
}

/* One card per question. */
.mi-faq [itemprop="mainEntity"] {
  position: relative;
  background: #fff;
  border: 1px solid rgba(3, 61, 80, 0.1);
  border-radius: 8px;
  padding: 26px 30px 24px 58px;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}

.mi-faq [itemprop="mainEntity"]:hover {
  border-color: #f9c300;
  box-shadow: 0 10px 30px rgba(3, 61, 80, 0.08);
  transform: translateY(-2px);
}

/* Honeycomb cell as the bullet - on brand, and no icon font needed. */
.mi-faq [itemprop="mainEntity"]::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 30px;
  width: 16px;
  height: 18px;
  background: #f9c300;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform 0.35s;
}

.mi-faq [itemprop="mainEntity"]:hover::before {
  transform: rotate(30deg);
}

/* Question: switzer sans, to contrast with the gambarino display title. */
.mi-faq [itemprop="name"] {
  margin: 0 0 10px;
  color: #033d50;
  font-family: "switzersemibold", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
}

.mi-faq [itemprop="text"] {
  margin: 0;
  color: rgba(3, 61, 80, 0.72);
  font-family: "switzermedium", sans-serif;
  font-size: 15px;
  line-height: 26px;
}

/* Single column below the 992px container step, matching the theme's grid. */
@media (max-width: 991px) {
  .mi-faq [itemtype*="FAQPage"] {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mi-faq [itemtype*="FAQPage"] > h2 {
    font-size: 32px;
  }
  .mi-faq [itemtype*="FAQPage"] > h2::after {
    margin-top: 14px;
  }
}

@media (max-width: 575px) {
  .mi-faq [itemprop="mainEntity"] {
    padding: 22px 22px 20px 50px;
  }
  .mi-faq [itemprop="mainEntity"]::before {
    left: 20px;
    top: 26px;
  }
}

/* --- Home: Avis Garantis social proof ------------------------------------
   The module's own placement dropped this widget under the footer copyright,
   where it collided with the leaf illustration and the review carousel ran off
   the right edge. It now sits in the page grid as a normal section
   (column class .mi-avis) between "Nos savoir-faire" and the blog.

   Leo Elements only writes per-element CSS when a layout is saved through the
   admin builder, so a section inserted straight into the DB gets none — hence
   the eyebrow and heading are styled here by element id, following the same
   scale as "en vedette / Collections". */

.mi-avis {
  text-align: center;
}

/* eyebrow — the honey script line above the title */
.mi-avis .elementor-element-5a90a03 .elementor-text-editor p {
  margin: 0;
  color: #f9c300;
  font-family: "american_brushregular", cursive;
  font-size: 64px;
  line-height: 1;
}

/* display heading, matching the other home section titles */
/* The page emits an inline <style> AFTER this file containing Elementor's
   global default `.elementor-widget-heading.elementor-widget-heading
   .elementor-heading-title{color:#6ec1e4}` (0,3,1). Prefixing with the column
   class takes this to (0,4,1) so the navy wins. */
.mi-avis .elementor-element-5a90a04.elementor-widget-heading .elementor-heading-title {
  margin: 0 0 34px;
  color: #033d50;
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1;
}

/* keep the injected widget inside the container and centred */
.mi-avis .grc-site-iframe {
  max-width: 1170px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .mi-avis .elementor-element-5a90a03 .elementor-text-editor p { font-size: 44px; }
  .mi-avis .elementor-element-5a90a04.elementor-widget-heading .elementor-heading-title { font-size: 32px; margin-bottom: 24px; }
}

/* --- Product tile: centre the Avis Garantis star rating -------------------
   The module renders an empty <div class="grc-category-stars"> and its JS
   injects .grc-widget-category-stars inside it, left-aligned. Everything else
   in the tile (title, price, button) is centred, so the stars sat off to the
   left. Centre both the mount point and the injected row. */

.product-miniature .grc-category-stars,
.grc-category-stars {
  display: flex;
  justify-content: center;
  width: 100%;
}

.grc-widget-category-stars > div {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* --- Product tile: "Ajouter au panier" hover ------------------------------
   Previously the hover inverted to a navy fill with honey text. That fought
   the theme's own button language: front.css has `.btn-1:hover a{background:
   #F9C300}` - i.e. the primary button moves TOWARDS honey on hover, keeping
   navy text. So stay in the honey family and just darken, with a small lift. */

.product-miniature .btn-product.add-to-cart:hover,
.product-miniature button.add-to-cart.leo-bt-cart:hover {
  background-color: #e6b000 !important;
  border-color: #e6b000 !important;
  color: #033d50 !important;
  box-shadow: 0 6px 18px rgba(3, 61, 80, 0.16) !important;
  transform: translateY(-1px);
}

.product-miniature .btn-product.add-to-cart:active,
.product-miniature button.add-to-cart.leo-bt-cart:active {
  transform: translateY(0);
  box-shadow: none !important;
}

/* --- Headings converted to spans (client request 13/08) -------------------
   Every heading on the audited pages is now a <span>, with only the top bar
   left as the page h1. The original classes were preserved so the existing
   typography still matches, but a span is inline by default - these rules
   restore the block behaviour the h-tags provided, otherwise product titles
   and section titles would run inline with the text next to them. */

span.product-title,
span.title_block,
span.blog-title,
span.h3.product-title,
.leoblog-blog span.title,
.mi-faq-title {
  display: block;
}

/* the FAQ heading kept its look: it was <h2>, now <span class="mi-faq-title"> */
.mi-faq [itemtype*="FAQPage"] > .mi-faq-title {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  text-align: center;
  color: #033d50;
  font-family: var(--font-family-heading, "gambarinoregular"), serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1;
}
.mi-faq [itemtype*="FAQPage"] > .mi-faq-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 20px auto 0;
  background: #f9c300;
  border-radius: 2px;
}
@media (max-width: 991px) {
  .mi-faq [itemtype*="FAQPage"] > .mi-faq-title { font-size: 32px; }
}

/* Headings-as-spans: restore the box behaviour the h-tags gave them.
   theme.css sets  h1..h6 { margin-bottom:.5rem; line-height:1.1 }  and those
   are block elements; a bare span is inline with no margins, which collapsed
   the carousel eyebrow onto its sub-title. */
span.product-title,
span.title_block,
span.blog-title,
.leoblog-blog span.title {
  display: block;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

/* --- Mobile header: hamburger, logo, icons on one row ---------------------
   The menu column (2d8ee9b) is 100% wide below desktop and carries order:-1,
   so the burger was pushed onto its own line above the logo, wasting a whole
   band of vertical space. Put the three columns back on a single row:
   burger left, logo centre, icons right. */

@media (max-width: 991px) {
  .elementor-element-ad420e5 .elementor-row {
    flex-wrap: nowrap;
    align-items: center;
  }
  .elementor-element-ad420e5 .elementor-element-2d8ee9b {      /* burger */
    order: 0;
    width: auto;
    flex: 0 0 auto;
    margin-bottom: 0;
  }
  .elementor-element-ad420e5 .elementor-element-201ed6d {      /* logo */
    order: 1;
    width: auto;
    flex: 1 1 auto;
  }
  .elementor-element-ad420e5 .elementor-element-201ed6d .elementor-widget-wrap {
    justify-content: center;
  }
  .elementor-element-ad420e5 .elementor-element-2400d2f {      /* search / account / cart */
    order: 2;
    width: auto;
    flex: 0 0 auto;
  }
  .elementor-element-ad420e5 .elementor-element-201ed6d .logo,
  .elementor-element-ad420e5 .elementor-element-201ed6d img.logo {
    max-height: 78px;
    width: auto;
  }
}

/* ===== Mobile refinements ================================================ */

/* 1. Header row: burger left, logo centred, icons right.
      Elementor writes an inline width (40% mobile / 65% tablet) at a higher
      specificity than a plain class rule, hence the !important here. */
@media (max-width: 991px) {
  .elementor-element-ad420e5 .elementor-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .elementor-element.elementor-element-2d8ee9b {          /* burger   */
    order: 0 !important; width: auto !important; flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }
  .elementor-element.elementor-element-201ed6d {          /* logo     */
    order: 1 !important; width: auto !important; flex: 1 1 auto !important;
  }
  .elementor-element.elementor-element-201ed6d .elementor-widget-wrap {
    justify-content: center !important;
  }
  .elementor-element.elementor-element-201ed6d img.logo { max-height: 66px; width: auto; }
  .elementor-element.elementor-element-2400d2f {          /* search/account/cart */
    order: 2 !important; width: auto !important; flex: 0 0 auto !important;
  }
}

/* 2. Grid switcher: six column choices is meaningless on a phone.
      Keep 1-column and 2-column only. */
@media (max-width: 767px) {
  .grid-select.view-list,
  .grid-select.view-3,
  .grid-select.view-4,
  .grid-select.view-5 {
    display: none !important;
  }
}

/* 3. "Ajouter au panier" overflowed its card in the 2-column grid: the button
      is padded 12px/40px with white-space:nowrap and 2px letter-spacing, which
      needs ~233px while a 2-up card is ~219px. Let it fit the card instead. */
@media (max-width: 767px) {
  .product-miniature .btn-product.add-to-cart,
  .product-miniature button.add-to-cart.leo-bt-cart {
    padding: 11px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    white-space: normal !important;
    width: 100%;
    max-width: 100%;
    line-height: 1.25;
  }
  /* the decorative dots are absolutely positioned inside the old 40px padding;
     without that room they would sit on top of the label */
  .product-miniature .btn-product.add-to-cart::before,
  .product-miniature .btn-product.add-to-cart::after {
    display: none !important;
  }
  .product-miniature .button-container,
  .product-miniature .functional-buttons {
    max-width: 100%;
    overflow: visible;
  }
}

/* --- Out-of-stock products ------------------------------------------------
   The markup already distinguishes them - the tile carries
   <li class="product-flag out_of_stock"> and the button gets a .disabled class
   - but both were styled exactly like an available product, so a shopper could
   tap "Ajouter au panier" on something that cannot be bought. */

/* the flag: a real badge instead of small grey text */
.product-miniature .product-flag.out_of_stock,
.product-flags .product-flag.out_of_stock {
  display: inline-block;
  background: #033d50;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "switzersemibold", sans-serif;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(3, 61, 80, 0.18);
  opacity: 1;
}

/* the button: unmistakably not clickable */
.product-miniature .btn-product.add-to-cart.disabled,
.product-miniature button.add-to-cart.disabled,
.product-miniature button.add-to-cart[disabled] {
  background-color: #eceff1 !important;
  border-color: #dfe4e7 !important;
  color: #8a979e !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
}
.product-miniature .btn-product.add-to-cart.disabled::before,
.product-miniature .btn-product.add-to-cart.disabled::after {
  color: #c3ccd1 !important;
}
/* kill the hover treatment for the disabled state */
.product-miniature .btn-product.add-to-cart.disabled:hover,
.product-miniature button.add-to-cart.disabled:hover {
  background-color: #eceff1 !important;
  border-color: #dfe4e7 !important;
  color: #8a979e !important;
  transform: none !important;
  box-shadow: none !important;
}

/* fade the image slightly so the whole tile reads as unavailable */
.product-miniature:has(.product-flag.out_of_stock) .product-thumbnail img {
  opacity: 0.72;
}

/* --- image-box titles converted to spans ----------------------------------
   Same problem as the carousel eyebrow: these titles were h3/h4 (block, with
   line-height 1.1 and margin-bottom .5rem from theme.css) and several contain
   <br>. As a bare inline span the wrapped lines overlapped each other and ran
   into the description underneath. Restore the block box the tag provided. */

.elementor-widget-image-box .elementor-image-box-title,
span.elementor-image-box-title {
  display: block;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

/* the description sat immediately under the collapsed title */
.elementor-widget-image-box .elementor-image-box-description {
  display: block;
}

/* --- Banner tiles: legible text over light photography --------------------
   Both tiles set title_color and description_color to #ffffff, but the photos
   behind them are pale (measured background rgb(182,184,188) under the copy),
   giving roughly 2:1 contrast where WCAG AA wants 4.5:1. The title only looked
   dark because the <a> inside it inherited the link colour instead of white.
   A soft navy scrim on the text side restores the intended look and makes the
   copy readable without touching the photos. */

.elementor-element-0c42600 .elementor-image-box-wrapper,
.elementor-element-24effa3 .elementor-image-box-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.elementor-element-0c42600 .elementor-image-box-wrapper::before,
.elementor-element-24effa3 .elementor-image-box-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* only as much veil as the text needs: strong at the very left, gone by 45%,
     so the honey stays warm across most of the photo */
  background: linear-gradient(95deg,
              rgba(3, 61, 80, 0.62) 0%,
              rgba(3, 61, 80, 0.34) 22%,
              rgba(3, 61, 80, 0.08) 38%,
              rgba(3, 61, 80, 0) 48%);
}

.elementor-element-0c42600 .elementor-image-box-content,
.elementor-element-24effa3 .elementor-image-box-content {
  position: relative;
  z-index: 1;
}

/* the linked title must honour the configured white, not the link colour */
.elementor-element-0c42600 .elementor-image-box-title,
.elementor-element-0c42600 .elementor-image-box-title a,
.elementor-element-24effa3 .elementor-image-box-title,
.elementor-element-24effa3 .elementor-image-box-title a {
  color: #ffffff !important;
}
.elementor-element-0c42600 .elementor-image-box-description,
.elementor-element-24effa3 .elementor-image-box-description {
  color: rgba(255, 255, 255, 0.92);
}

/* --- Home SEO copy block (above the FAQ) ----------------------------------
   Same 1170px measure as the FAQ block directly below it, so the two align on
   the page grid. No navy fills: the key facts and the closing line sit on the
   light cream used elsewhere, with honey as the accent. Generous top padding
   so the block is not glued to the newsletter above it, matching the breathing
   room before the FAQ underneath. */

.mi-seo {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  color: rgba(3, 61, 80, 0.82);
  font-family: "switzermedium", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

.mi-seo h1 {
  margin: 0 0 22px;
  color: #033d50;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
}
.mi-seo h2 {
  margin: 46px 0 6px;
  color: #033d50;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}
.mi-seo h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 14px 0 22px;
  background: #f9c300;
  border-radius: 2px;
}
.mi-seo p { margin: 0 0 18px; }
.mi-seo strong { color: #033d50; font-family: "switzersemibold", sans-serif; font-weight: 400; }
.mi-seo a { color: #033d50; text-decoration: underline; text-decoration-color: #f9c300; text-underline-offset: 3px; }
.mi-seo a:hover { color: #0a5e7a; }

/* key facts - cream panel with a honey edge instead of a navy slab */
.mi-seo-key {
  background: #fffaf0;
  border: 1px solid rgba(249, 195, 0, 0.45);
  border-left: 4px solid #f9c300;
  border-radius: 8px;
  padding: 26px 30px;
  margin: 18px 0 32px;
}
.mi-seo-key ul { list-style: none; margin: 0; padding: 0; }
.mi-seo-key li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: rgba(3, 61, 80, 0.86);
  font-size: 15px;
  line-height: 1.65;
}
.mi-seo-key li:last-child { margin-bottom: 0; }
.mi-seo-key li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 15px;
  background: #f9c300;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.mi-seo-stats, .mi-seo-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 30px; }
.mi-seo-stats > div, .mi-seo-grid > div { flex: 1 1 220px; }

.mi-seo-stat {
  background: #fff;
  border: 1px solid rgba(3, 61, 80, 0.12);
  border-top: 3px solid #f9c300;
  border-radius: 8px;
  padding: 20px 18px;
  text-align: center;
  transition: box-shadow .35s, transform .35s;
}
.mi-seo-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(3, 61, 80, .08); }
.mi-seo-stat p:first-child {
  margin: 0 0 6px; color: #033d50;
  font-family: "switzersemibold", sans-serif; font-size: 15px;
}
.mi-seo-stat p { margin: 0; font-size: 14px; line-height: 1.5; }

.mi-seo-card {
  background: #fffaf0;
  border: 1px solid rgba(249, 195, 0, 0.45);
  border-radius: 8px;
  padding: 20px 22px;
  transition: border-color .35s, box-shadow .35s, transform .35s;
}
.mi-seo-card--plain { background: #fff; border-color: rgba(3, 61, 80, 0.12); }
.mi-seo-card:hover {
  border-color: #f9c300; transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(3, 61, 80, .08);
}
.mi-seo-card p:first-child {
  margin: 0 0 8px; color: #033d50;
  font-family: "switzersemibold", sans-serif; font-size: 16px;
}
.mi-seo-card p { margin: 0; font-size: 15px; line-height: 1.6; }

/* closing line - a honey rule and centred copy, no filled panel */
.mi-seo-cta {
  background: transparent;
  border-top: 3px solid #f9c300;
  border-radius: 0;
  padding: 30px 20px 0;
  margin: 40px 0 0;
  text-align: center;
}
.mi-seo-cta p:first-child {
  margin: 0 0 10px;
  color: #033d50;
  font-family: "gambarinoregular", serif;
  font-size: 28px;
  line-height: 1.25;
}
.mi-seo-cta p { margin: 0; color: rgba(3, 61, 80, 0.72); font-size: 15px; }

@media (max-width: 767px) {
  .mi-seo h1 { font-size: 30px; }
  .mi-seo h2 { font-size: 24px; margin-top: 34px; }
  .mi-seo-key { padding: 22px 20px; }
  .mi-seo-stats, .mi-seo-grid { gap: 12px; }
  .mi-seo-cta p:first-child { font-size: 22px; }
}

/* --- Heading widgets converted to spans: restore the heading typeface -----
   theme.css gives h1..h6 `font-family: var(--font-family-heading)` (gambarino).
   Heading widgets that never set their own font in the generated CSS - e.g.
   "Inscription à la newsletter" - fell back to the body sans once the tag went
   away. This restores the default; widgets that DO declare a font (the script
   eyebrows use american_brushregular) keep theirs, because Elementor's
   per-element selector is more specific than this one. */

.elementor-widget-heading .elementor-heading-title,
span.elementor-heading-title {
  font-family: var(--font-family-heading);
}

/* text shadow does the rest of the legibility work, so the veil can stay light */
.elementor-element-0c42600 .elementor-image-box-title,
.elementor-element-0c42600 .elementor-image-box-title a,
.elementor-element-24effa3 .elementor-image-box-title,
.elementor-element-24effa3 .elementor-image-box-title a {
  text-shadow: 0 2px 14px rgba(3, 61, 80, 0.55);
}
.elementor-element-0c42600 .elementor-image-box-description,
.elementor-element-24effa3 .elementor-image-box-description {
  text-shadow: 0 1px 10px rgba(3, 61, 80, 0.6);
}

/* ------------------------------------------------------------------
   SEO copy block - spacing.
   This section (5e0b101) was written straight into the layout JSON, so
   Leo Elements never generated its per-element CSS the way it does for
   builder-saved sections. Its padding settings therefore had no effect:
   the block sat flush against the newsletter above it, which on iOS
   Safari rendered as the subscribe button overlapping the H1.
   The values below are the paddings from the element's own settings.
   ------------------------------------------------------------------ */
.elementor-13 .elementor-element.elementor-element-5e0b101 {
  padding: 80px 0 20px;
  position: relative;
  clear: both;
}
@media (max-width: 1024px) {
  .elementor-13 .elementor-element.elementor-element-5e0b101 { padding: 50px 0 10px; }
}
@media (max-width: 767px) {
  .elementor-13 .elementor-element.elementor-element-5e0b101 { padding: 36px 15px 10px; }
  .elementor-13 .elementor-element.elementor-element-68e86d8 > .elementor-element-populated { padding-bottom: 30px; }
}

/* ------------------------------------------------------------------
   Newsletter block - stop it overflowing onto the section below.
   theme.css pins .block_newsletter to height:50px, but its own email
   input is 70px and on phones the submit button switches from
   position:absolute to static and stacks underneath. The content then
   overflows the fixed container by ~150px and paints over whatever
   follows - on the home page, the SEO block's H1.
   Two classes so this outranks the theme's single-class rule.
   ------------------------------------------------------------------ */
.block_newsletter.block {
  height: auto;
  min-height: 50px;
}
.block_newsletter.block form .input-wrapper { overflow: visible; }