/* NB: the theme sets html{font-size:36px}, so sizes here are px/vw, not rem.
   Split hero: image left; logo, title and CTA on the packaging yellow, right.
   Replaces the Revolution slider on the homepage. */
:root {
  color-scheme: only light;          /* opt out of OS/browser forced dark mode (Android "force dark") */
  --mielette-yellow: #eca602;       /* packaging yellow, sampled from the sachet in slider-1-la-mielette.png */
  --mielette-ink: #40280a;          /* the brown of la-mielette.svg */
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* the full-width bleed rows below use the vw-based technique instead of JS-measured width, and a
   vertical scrollbar makes 100vw wider than the visible viewport on most desktop browsers;
   without this the page would gain a few pixels of horizontal scroll.
   On `html`, not `body`: setting only overflow-x (without overflow-y) turns the *other* axis
   into `auto` too, on whichever element it's set on — on body that made body itself a scroll
   container instead of html, which broke every sticky-positioned descendant (the header). */
html { overflow-x: hidden; }

/* ---- JS cleanup: sticky header + pure-CSS full-bleed rows, replacing headroom.js / WPBakery's
   JS-measured full-width rows (both recomputed on every resize event via jQuery — the source of
   the layout glitches on resize: a slow/failed recalculation left rows mid-collapse). Neither
   needs JS: `position: sticky` handles the header, and the standard
   `left: 50%; margin-left: -50vw` trick handles full-bleed width, both recalculated for free by
   the browser's own layout engine on every resize, with nothing to race or fail. ---- */
header.header-mobile,
header.header-desktop {
  position: sticky;
  top: 0;
  z-index: 999;
}
/* the theme's own #page/.site wrapper has overflow:hidden (a leftover clip for Slideout.js's old
   "push the page aside" transform, no longer used now the mobile menu is a fixed off-canvas
   panel instead) — any overflow:hidden ancestor disables position:sticky for descendants, which
   silently no-op'd the header rule above until this was found and overridden. */
#page.site { overflow: visible; }
.vc_row[data-vc-full-width="true"] {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box;
}
/* 7 of the page's 8 full-width rows also carry data-vc-stretch-content="true": WPBakery's own
   marker that the row's CONTENT (not just its background) is meant to go edge-to-edge too — the
   "Authentique et naturel" icon grid and photo, for one, should each fill their full half of the
   viewport, not just a normal-container-width slice of it centred in extra whitespace. Only
   "Contactez-nous" (col-sm-3 + col-sm-9 inside col-sm-12) lacks that marker, meaning ITS content
   was meant to stay at the theme's normal reading width — re-add the side gutter there, matching
   what the old JS used to compute. */
.vc_row[data-vc-full-width="true"]:not([data-vc-stretch-content]) {
  padding-left: max(15px, calc((100vw - 1400px) / 2 + 15px));
  padding-right: max(15px, calc((100vw - 1400px) / 2 + 15px));
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  background: var(--mielette-yellow);
}

/* left: image */
.hero-split__media { position: relative; overflow: hidden; }
.hero-split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;          /* keeps the sachet and its logo in frame */
  display: block;
}

/* right: logo / title / CTA */
.hero-split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 5vh, 48px);
  padding: clamp(32px, 6vh, 72px) clamp(32px, 6vw, 96px);
  color: var(--mielette-ink);
}

.hero-split__logo {
  display: block;
  width: clamp(170px, 26vw, 450px);
  height: auto;
}

.hero-split h1.hero-split__title {
  margin: 0;
  font-family: 'Roboto Slab', serif !important;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 50px);
  line-height: 1.05;
  color: var(--mielette-ink);
  text-align: left;
}

.hero-split a.hero-split__cta {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding: .95em 2.2em;
  font-family: 'Roboto Slab', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--mielette-ink);
  background: transparent;
  border: 2px solid var(--mielette-ink);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.hero-split a.hero-split__cta .hero-split__arrow { display: inline-block; transition: transform .2s ease; }
.hero-split a.hero-split__cta:hover,
.hero-split a.hero-split__cta:focus-visible {
  background: var(--mielette-ink);
  color: var(--mielette-yellow);
}
.hero-split a.hero-split__cta:hover .hero-split__arrow,
.hero-split a.hero-split__cta:focus-visible .hero-split__arrow { transform: translateY(3px); }
.hero-split a.hero-split__cta:focus-visible { outline: 2px solid var(--mielette-ink); outline-offset: 3px; }

/* phones / narrow: image on top, text below */
@media (max-width: 767px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60vh auto; min-height: 0; }
  .hero-split__text { padding: 40px 8vw 56px; gap: 28px; }
  .hero-split__logo { width: 180px; }
}

/* Anchor nav (header menu + "Découvrir" button) is now plain <a href="#id">: with the header
   made `position: sticky` above, a fixed scroll-margin-top per breakpoint is all that's needed
   to land below it instead of behind it — no JS measuring required. */
#after-hero, #bienfaitsdumiel, #terroir, #contact-info { scroll-margin-top: 128px; }
@media (max-width: 991px) {
  #after-hero, #bienfaitsdumiel, #terroir, #contact-info { scroll-margin-top: 114px; }
}

/* Intro band under the header ("LA MIELETTE BEEO"): same palette as the hero.
   The honeycomb is baked into the PNG; frame-deco-packaging.png is frame-deco-wp-1.png recoloured to #eca602
   (every pixel = packaging yellow x its original darkness relative to the old base #ECB745, so the hexagons are unchanged). */
html body .vc_row.vc_custom_1568388253415 {
  background-color: var(--mielette-yellow) !important;
  background-image: url(../wp-content/uploads/2023/05/frame-deco-packaging.png) !important;
}
html body .vc_row.vc_custom_1568388253415 h4,
html body .vc_row.vc_custom_1568388253415 h4 strong {
  color: var(--mielette-ink);
}
/* title colour/weight left at the theme default (rgb(57,42,37), weight 400) to match the
   "Pourquoi du miel ?" / "TERROIR" titles elsewhere on the page (that default already renders 400). */

/* "Sain / Pratique" row (photo left, text right): hero palette, no vertical padding.
   The photo itself is the CSS background of .vc_custom_1568635250418 (inline <style> in index.html). */
html body .vc_row.vc_custom_1567686424426 {
  background-color: var(--mielette-yellow) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .vc_row.vc_custom_1567686424426 .vc_column-inner.vc_custom_1567684116609 { background: transparent !important; }
/* photo column: no 300px padding, height follows the image's own aspect ratio (1404x1120) so nothing is cropped */
html body .vc_column-inner.vc_custom_1568635250418 {
  padding: 0 !important;
  aspect-ratio: 1404 / 1120;
  background-size: cover !important;
  background-position: center !important;
}
html body .vc_row.vc_custom_1567686424426 h2,
html body .vc_row.vc_custom_1567686424426 h2 b,
html body .vc_row.vc_custom_1567686424426 p,
html body .vc_row.vc_custom_1567686424426 p span {
  color: var(--mielette-ink);
}

/* "BIENFAITS DU MIEL" row: honeycomb photo background (honey-bg.jpg, set in the inline rule .vc_custom_1567686680621).
   Brown fade over the right half only, so the white text stays readable and the comb stays bright on the left.
   Delete this rule to show the bare photo. */
html body .vc_row.vc_custom_1567686680621 {
  background-image:
    linear-gradient(90deg, rgba(64, 40, 10, 0) 38%, rgba(64, 40, 10, .72) 62%, rgba(64, 40, 10, .72) 100%),
    url(../wp-content/uploads/2019/09/honey-bg.jpg) !important;
}

/* "Moins calorique" block: title row + comparison-table row (illustration left, text and table right).
  Palette = hero (#eca602 / brown). The image is the CSS background of .vc_custom_1568635292525
  (inline <style> in index.html, now mielette-avion.jpg, 1086x1448). */
html body .vc_row.vc_custom_1567675788935 {
  background-color: var(--mielette-yellow) !important;
}
/* image column: no padding, height follows the image's own aspect ratio (3:4) so nothing is cropped */
html body .vc_column-inner.vc_custom_1568635292525 {
  padding: 0 !important;
  aspect-ratio: 1086 / 1448;
  background-size: cover !important;
  background-position: center !important;
}
/* "Authentique et naturel" image column (.vc_custom_1568635213250, now mielette-hotel.jpg, 1214x1295):
  same treatment, height follows the image instead of the 430px padding so nothing is cropped */
html body .vc_column-inner.vc_custom_1568635213250 {
  padding: 0 !important;
  aspect-ratio: 1214 / 1295;
  background-size: cover !important;
  background-position: center !important;
}
/* text column: yellow instead of white, brown text */
html body .vc_column-inner.vc_custom_1567588406978 { background: transparent !important; }
html body .vc_row.vc_custom_1567675788935 p,
html body .vc_row.vc_custom_1567675788935 p span { color: var(--mielette-ink); }

/* table */
html body #tablepress-4 {
  width: 100%;
  margin: 28px 0 0;
  border-collapse: collapse;
  border: 2px solid var(--mielette-ink);
  background: transparent;
  color: var(--mielette-ink);
}
html body #tablepress-4 th,
html body #tablepress-4 td {
  padding: 11px 16px;
  border: 0;
  border-top: 1px solid rgba(64, 40, 10, .28);
  background: transparent;
  color: var(--mielette-ink);
  text-align: left;
  vertical-align: middle;
}
html body #tablepress-4 td center,
html body #tablepress-4 th center { text-align: center; }
html body #tablepress-4 thead th {
  background: var(--mielette-ink);
  color: var(--mielette-yellow);
  font-weight: 700;
  border-top: 0;
}
html body #tablepress-4 tbody tr.even td { background: rgba(255, 255, 255, .22); }
html body #tablepress-4 tbody tr:hover td { background: rgba(64, 40, 10, .12); }
html body #tablepress-4 tbody td.column-1 { font-weight: 500; }
/* the block's title now lives at the top of the text column */
html body .vc_row.vc_custom_1567675788935 h2 {
  color: var(--mielette-ink);
  margin: 0 0 24px;
}

/* "Pourquoi du miel ?" row: white background (not the hero palette), no vertical row margin,
   plain title (no hexagons, done in index.html), 50/50 columns (was 5/7).
   Right illustration is the CSS background of .vc_custom_1568628559417 (inline <style> in index.html,
   now mielette-thes.jpg, 1312x1199). */
html body .vc_row.vc_custom_1567774418498 {
  background-color: #ffffff !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
/* image column: height follows the image instead of the 300px padding. On desktop the text column
   is taller, so the sides still get cropped: anchor right so the mielette sticks stay in frame. */
html body .vc_column-inner.vc_custom_1568628559417 {
  padding: 0 !important;
  aspect-ratio: 1312 / 1199;
  background-size: cover !important;
  background-position: 85% center !important;
}

/* Terroir row: keep image and white background, just remove the row's own vertical padding
   (75px top/bottom) and use 50/50 columns (was 7/5). Title hexagons removed in index.html. */
html body .vc_row.vc_custom_1567774406887 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* "Contactez-nous" row (was the newsletter signup): reuse the hero's packaging-yellow honeycomb
   background (frame-deco-packaging.png, see the intro-band rule above) instead of the old pale
   frame-deco-wp-1.png that the theme's shared inline rule applies to both rows. Form replaced by
   plain text + mailto link in index.html. */
html body .vc_row.vc_custom_1568982928659 {
  background-color: var(--mielette-yellow) !important;
  background-image: url(../wp-content/uploads/2023/05/frame-deco-packaging.png) !important;
}
html body .vc_row.vc_custom_1568982928659 h3,
html body .newsletter-contact-text {
  color: var(--mielette-ink);
}
/* alignment: centre both columns' content on the flex cross-axis instead of fighting the
   paragraph's default top margin. Font sizes bumped a touch (h3 23px->24px, text 15px->17px). */
html body .vc_row.vc_custom_1568982928659 > .wpb_column > .vc_column-inner {
  display: flex;
  /* WPBakery's own base rule already sets flex-direction:column on every .vc_column-inner, which
     flips the axes: align-items governs the horizontal axis in column mode, justify-content the
     vertical one. Centering needs the latter — align-items:center here was a no-op. */
  justify-content: center;
  height: 100%;
}
/* every .vc_column-inner carries WPBakery's base 15px side padding; on top of the row's own
   36px edge gutter that reads as noticeably indented from the yellow band's edge (title text
   landing ~55-60px in) compared to the rest of the page (e.g. the hero's own text starts at
   32px). Zero it here so both columns start flush with the row's base gutter instead. */
html body .vc_row.vc_custom_1568982928659 .wpb_column > .vc_column-inner { padding-left: 0; padding-right: 0; }
/* both the title and the paragraph next to it used to reflow between 1 and 2 lines depending on
   viewport width, and around the sm-3/sm-9 column split that reflow briefly overlapped the two
   (title text drawn past its narrow column's edge, over the paragraph's first line) before the
   layout settled. Hard <br>s in index.html now force both to a fixed, width-independent line
   count instead — no more reflow, so nothing to glitch. */
html body .vc_row.vc_custom_1568982928659 h3 { font-size: 24px; }
/* on wide screens the safe area (1400px, shared with every other constrained full-width row)
   left the short title + one-line paragraph hugging its left edge with a lot of bare honeycomb
   to the right — nothing to center against. Narrow the safe area for this row specifically, and
   let the title/paragraph pair shrink to their own content width instead of stretching across
   fixed 25%/75% columns, so the two sit together as one compact block centred in the band.
   Desktop-only (>991px, matching the theme's own header/mobile breakpoint): below that the
   columns stack to one-per-line and centering them instead reads as inconsistent against the
   rest of the page's left-aligned mobile headings — the flush-left mobile layout is unaffected. */
@media (min-width: 992px) {
  html body .vc_row.vc_custom_1568982928659 > .wpb_column {
    max-width: min(100%, 900px);
    margin: 0 auto;
  }
  html body .vc_row.vc_custom_1568982928659 .vc_row.vc_row-flex {
    justify-content: center;
    gap: 28px;
  }
  html body .vc_row.vc_custom_1568982928659 .vc_row.vc_row-flex > .wpb_column {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}
html body .newsletter-contact-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}
html body a.newsletter-contact-link {
  display: inline-block;
  color: var(--mielette-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 3px;
  transition: background-color .2s ease, color .2s ease;
}
/* white-on-yellow was unreadable; invert to a dark chip instead (matches the hero CTA
   and footer social-icon hover pattern), which stays legible regardless of background.
   !important needed: the page has a page-wide `body a:hover{color:#FDB83E !important;}`
   rule (leftover WPBakery branding CSS) that otherwise wins over this despite being less specific. */
html body a.newsletter-contact-link:hover,
html body a.newsletter-contact-link:focus-visible {
  color: var(--mielette-yellow) !important;
  background-color: var(--mielette-ink);
  text-decoration: none;
}

/* Footer + copyright bar: mielette-brown background, white text, packaging-yellow accents
   (icons, hover states) — mirrors the hero's ink/yellow pairing, just inverted.
   Every hover `color` below needs !important: the page has a page-wide
   `body a:hover{color:#FDB83E !important;}` rule (leftover WPBakery branding CSS) that
   otherwise wins over these despite being less specific. */
html body footer.footer {
  background-color: var(--mielette-ink) !important;
  padding-top: 60px;      /* was 130px/100px; Instagram column removed, footer is more compact now */
  padding-bottom: 50px;
}
/* Instagram column removed (dead: the feed never loads offline) and its two siblings widened
   (col-md-4/col-md-2 -> col-md-5/col-md-3); space-between so Contact sits flush at the
   container's left edge and Information flush at its right edge, instead of clustering in
   the middle (justify-content:center, tried first) or hugging only the left. */
html body footer.footer .row {
  justify-content: space-between;
}
html body footer.footer .widget .widget-title {
  color: #fff;
  /* !important needed: the page has a page-wide
     `h1,h2,h3,h4,h5,h6{font-weight:normal !important}` rule (same "new branding" inline CSS
     block as the #FDB83E hover rule) that otherwise wins over this. */
  font-weight: 700 !important;
}
html body footer.footer .textwidget,
html body footer.footer .textwidget p,
html body footer.footer .textwidget a,
html body footer.footer .widget ul li a {
  color: #fff;
}
html body footer.footer .textwidget a:hover,
html body footer.footer .widget ul li a:hover {
  color: var(--mielette-yellow) !important;
}
html body footer.footer .textwidget i {
  color: var(--mielette-yellow);
}
/* the theme gives .footer-social margin-top (30px, space above the icons) but no margin-bottom,
   so the next widget's title ("Information") landed flush against the icons with zero gap. */
html body footer.footer .footer-social {
  margin-bottom: 30px;
}
html body footer.footer .footer-social a {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
html body footer.footer .footer-social a:hover {
  background-color: var(--mielette-yellow);
  border-color: var(--mielette-yellow);
  color: var(--mielette-ink) !important;
}

html body .copyright {
  background-color: var(--mielette-ink) !important;
}
html body .copyright .copyright-container {
  border-top-color: rgba(255, 255, 255, .15);
}
html body .copyright .copyright-left,
html body .copyright .copyright-left span {
  color: rgba(255, 255, 255, .8);
}
html body .copyright .copyright-right ul li a {
  color: #fff;
}
html body .copyright .copyright-right ul li a:hover {
  color: var(--mielette-yellow) !important;
}

/* Copyright bar sits OUTSIDE <footer> (a sibling div), so it misses the theme's site-wide
   "everything -> Roboto Slab" rule (which targets the bare `footer` element and its descendants)
   and was falling back to Playfair Display (italic) / Lato. Force Roboto Slab here too so the
   whole footer area uses one typeface. */
html body .copyright .copyright-left,
html body .copyright .copyright-left span,
html body .copyright .copyright-right ul li a {
  font-family: 'Roboto Slab', serif;
  font-style: normal;
}

/* Privacy-policy modal: replaces the "/privacy-policy/" page link in the footer copyright bar. */
.mielette-modal { position: fixed; inset: 0; z-index: 1000; }
.mielette-modal[hidden] { display: none; }
.mielette-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(64, 40, 10, .55);
}
.mielette-modal__dialog {
  position: relative;
  max-width: 720px;
  width: calc(100% - 40px);
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  overflow-y: auto;
  background: #fff;
  color: var(--mielette-ink);
  border-radius: 6px;
  padding: 48px 40px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.mielette-modal__close {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  padding: 0;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  font-family: inherit;
  color: var(--mielette-ink);
  background: transparent;
  border: 0;
  outline: none;      /* native button focus ring renders as an oval on this circular button; replaced below */
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.mielette-modal__close:hover {
  background: var(--mielette-yellow);
}
.mielette-modal__close:focus-visible {
  background: var(--mielette-yellow);
  box-shadow: 0 0 0 3px var(--mielette-ink);
}
.mielette-modal__title {
  font-family: 'Roboto Slab', serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--mielette-ink);
}
.mielette-modal__body {
  font-family: Lato, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
.mielette-modal__body p { margin: 0 0 1.2em; }
.mielette-modal__body p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .mielette-modal__dialog { width: calc(100% - 24px); margin: 24px auto; padding: 40px 20px 28px; }
  .mielette-modal__title { font-size: 24px; }
}

/* ---- mobile pass (<=991px, where the theme switches to header.header-mobile) ---- */
@media (max-width: 991px) {
  /* mobile header logo: production bug, src="" (fixed in index.html) rendered a ~50x10px sliver.
     Root cause: the theme's generic img{max-width:100%} resolves against a narrow containing
     block here, and max-width CLAMPS width independently of !important (!important only wins
     conflicts on the *same* property — width:...!important still gets capped by a plain
     max-width). Both must be overridden together. The wordmark's aspect ratio (1799x347, ~5.2:1)
     needs real width to read at all; the row is empty on both sides now (cart icon removed
     earlier, hamburger sits far left), so it can safely overflow its 33%-width column. */
  header.header-mobile .logo-image {
    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;
  }

  /* the column's own 33.75px side padding leaves a ~50px content box for text-align:center to
     centre within; once the logo (160px) is wider than that, the browser anchors it to the
     content box's left edge instead of overflowing evenly both ways. Flexbox centering ignores
     the content-box/overflow quirk and centres the logo reliably. */
  header.header-mobile .header-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* footer: ~100px of dead space had built up between the last link and the divider, from the
     column's own margin-bottom + the footer's bottom padding + the copyright bar's top padding
     all stacking (separate elements, nothing to collapse). Trim all three on mobile only. */
  footer.footer .footer-c1,
  footer.footer .footer-c2 {
    margin-bottom: 0;
  }
  html body footer.footer {
    padding-bottom: 24px;
  }
  html body .copyright .copyright-container {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  /* copyright bar: "POLITIQUE.../CONDITIONS..." stacked and hugging the right edge (their own
     text-align:right) read as lopsided against the left-aligned copyright line above, especially
     stacked full-width on a phone. Left-align both lines and give the two links breathing room. */
  html body .copyright .copyright-left,
  html body .copyright .copyright-right {
    text-align: left;
  }
  html body .copyright .copyright-right ul li {
    display: block;
    margin: 10px 0 0;
  }
}

/* ---- mobile hamburger menu: replaces Slideout.js (a "push the page aside" library that
   dragged in touch-gesture handling nothing here uses) with a plain slide-in panel + backdrop,
   toggled by the vanilla script at the bottom of index.html via .menu-open on <html>. ---- */
/* every property here is !important: the theme's own #menu-slideout rule (for the old JS-toggled
   show/hide) is the same ID specificity and loads after this file, so it otherwise wins property
   by property (already bit twice: display, then z-index). */
#menu-slideout {
  display: block !important;
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: 256px !important;
  max-width: 80vw !important;
  overflow-y: auto !important;
  background: #fff !important;
  z-index: 1001 !important;
  transform: translateX(-100%) !important;
  transition: transform .25s ease !important;
}
html.menu-open #menu-slideout { transform: translateX(0) !important; }
.menu-slideout-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1000;
}
html.menu-open .menu-slideout-backdrop { display: block; }
html.menu-open { overflow: hidden; }
#menu-slideout .mobile-menu { padding: 24px 20px; }
#menu-slideout .sub-menu-toggle { display: none; }  /* decorative leftover: every item is a flat link, nothing to expand */

/* ---- Samsung Internet (and other browsers with forced/auto dark mode) ----
   `color-scheme: only light` is ignored by Samsung Internet's "dark mode for websites", which
   re-colours the page algorithmically. When the OS is dark, restate every colour of the page
   explicitly (same values as above, !important) so the light design is kept as authored. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
    --mielette-yellow: #eca602;
    --mielette-ink: #40280a;
  }
  html, html body, html body #page.site, html body #content, html body .site-content {
    background-color: #fff !important;
    color: #392a25 !important;
  }

  /* headers + mobile menu */
  html body header.header,
  html body header.header-desktop,
  html body header.header-mobile,
  html body #menu-slideout {
    background-color: #fff !important;
    color: #392a25 !important;
  }
  html body header.header a,
  html body #menu-slideout a { color: #392a25 !important; }
  html body header.header a:hover,
  html body #menu-slideout a:hover { color: #FDB83E !important; }

  /* hero */
  html body .hero-split { background-color: var(--mielette-yellow) !important; }
  html body .hero-split__text,
  html body .hero-split h1.hero-split__title { color: var(--mielette-ink) !important; }
  html body .hero-split a.hero-split__cta {
    color: var(--mielette-ink) !important;
    background-color: transparent !important;
    border-color: var(--mielette-ink) !important;
  }
  html body .hero-split a.hero-split__cta:hover,
  html body .hero-split a.hero-split__cta:focus-visible {
    color: var(--mielette-yellow) !important;
    background-color: var(--mielette-ink) !important;
  }

  /* yellow bands */
  html body .vc_row.vc_custom_1568388253415,
  html body .vc_row.vc_custom_1567686424426,
  html body .vc_row.vc_custom_1567675788935,
  html body .vc_row.vc_custom_1568982928659 { background-color: var(--mielette-yellow) !important; }
  html body .vc_row.vc_custom_1568388253415 h4,
  html body .vc_row.vc_custom_1568388253415 h4 strong,
  html body .vc_row.vc_custom_1567686424426 h2,
  html body .vc_row.vc_custom_1567686424426 h2 b,
  html body .vc_row.vc_custom_1567686424426 p,
  html body .vc_row.vc_custom_1567686424426 p span,
  html body .vc_row.vc_custom_1567675788935 h2,
  html body .vc_row.vc_custom_1567675788935 p,
  html body .vc_row.vc_custom_1567675788935 p span,
  html body .vc_row.vc_custom_1568982928659 h3,
  html body .newsletter-contact-text,
  html body a.newsletter-contact-link { color: var(--mielette-ink) !important; }
  html body a.newsletter-contact-link:hover,
  html body a.newsletter-contact-link:focus-visible {
    color: var(--mielette-yellow) !important;
    background-color: var(--mielette-ink) !important;
  }
  html body .vc_row.vc_custom_1567686424426 .vc_column-inner.vc_custom_1567684116609,
  html body .vc_column-inner.vc_custom_1567588406978 { background-color: transparent !important; }

  /* "Pourquoi du miel ?" (white) and Terroir rows */
  html body .vc_row.vc_custom_1567774418498 { background-color: #fff !important; }
  html body .vc_row.vc_custom_1567774418498,
  html body .vc_row.vc_custom_1567774418498 h2,
  html body .vc_row.vc_custom_1567774418498 p,
  html body .vc_row.vc_custom_1567774406887,
  html body .vc_row.vc_custom_1567774406887 h2,
  html body .vc_row.vc_custom_1567774406887 p { color: #392a25 !important; }

  /* "Bienfaits du miel": photo row with white text */
  html body .vc_row.vc_custom_1567686680621,
  html body .vc_row.vc_custom_1567686680621 h2,
  html body .vc_row.vc_custom_1567686680621 h3,
  html body .vc_row.vc_custom_1567686680621 h4,
  html body .vc_row.vc_custom_1567686680621 p,
  html body .vc_row.vc_custom_1567686680621 span { color: #fff !important; }

  /* comparison table */
  html body #tablepress-4 {
    background-color: transparent !important;
    color: var(--mielette-ink) !important;
    border-color: var(--mielette-ink) !important;
  }
  html body #tablepress-4 th,
  html body #tablepress-4 td {
    background-color: transparent !important;
    color: var(--mielette-ink) !important;
  }
  html body #tablepress-4 thead th {
    background-color: var(--mielette-ink) !important;
    color: var(--mielette-yellow) !important;
  }
  html body #tablepress-4 tbody tr.even td { background-color: rgba(255, 255, 255, .22) !important; }
  html body #tablepress-4 tbody tr:hover td { background-color: rgba(64, 40, 10, .12) !important; }

  /* footer + copyright bar */
  html body footer.footer,
  html body .copyright { background-color: var(--mielette-ink) !important; }
  html body footer.footer .widget .widget-title,
  html body footer.footer .textwidget,
  html body footer.footer .textwidget p,
  html body footer.footer .textwidget a,
  html body footer.footer .widget ul li a,
  html body footer.footer .footer-social a,
  html body .copyright .copyright-right ul li a { color: #fff !important; }
  html body footer.footer .textwidget i { color: var(--mielette-yellow) !important; }
  html body footer.footer .textwidget a:hover,
  html body footer.footer .widget ul li a:hover,
  html body .copyright .copyright-right ul li a:hover { color: var(--mielette-yellow) !important; }
  html body footer.footer .footer-social a { border-color: rgba(255, 255, 255, .35) !important; }
  html body footer.footer .footer-social a:hover {
    background-color: var(--mielette-yellow) !important;
    border-color: var(--mielette-yellow) !important;
    color: var(--mielette-ink) !important;
  }
  html body .copyright .copyright-container { border-top-color: rgba(255, 255, 255, .15) !important; }
  html body .copyright .copyright-left,
  html body .copyright .copyright-left span { color: rgba(255, 255, 255, .8) !important; }

  /* modals */
  .mielette-modal__dialog {
    background-color: #fff !important;
    color: var(--mielette-ink) !important;
  }
  .mielette-modal__title,
  .mielette-modal__close { color: var(--mielette-ink) !important; }
  .mielette-modal__close { background-color: transparent !important; }
  .mielette-modal__close:hover,
  .mielette-modal__close:focus-visible { background-color: var(--mielette-yellow) !important; }
}