/* Audience toggle pill — shared by the home (consumer) landing and
   /producteurs. Two options rendered as one segmented control; the
   active side is a <span> (the page you are on), the other an <a>
   navigating to the sibling page. Keep the two pages' markup mirrored:
   this is a navigation control styled as a switch, so both sides must
   read as clickable at rest. */
.wm-audience-toggle {
  display: inline-flex;
  background: #ECEAE4;
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
  margin: 0 0 22px;
}
.wm-audience-opt {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.18em;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.906rem;
  font-weight: 600;
  color: #57534E;
  text-decoration: none;
  white-space: nowrap;
}
a.wm-audience-opt:hover { color: #1C1917; text-decoration: none; }
/* The side just tapped (audience-toggle.js flips it while the sibling
   page loads) reads as active, hover or not. */
a.wm-audience-opt.is-active, a.wm-audience-opt.is-active:hover { color: #15803D; }
.wm-audience-opt.is-active {
  background: #fff;
  color: #15803D;
  box-shadow: 0 2px 8px rgba(26, 58, 42, 0.14);
}
@media (max-width: 380px) {
  .wm-audience-opt { padding: 7px 12px; font-size: 0.84rem; }
}

/* "sans panneau", in a hand. Next to "J'ai des panneaux", "Je veux du
   solaire" read as wanting to buy some; the note says which solar. It is
   part of the link text (a space precedes it in the markup, so a screen
   reader hears two words), only its face differs. Sized so Caveat's
   x-height meets Inter's, line-height 1 so the pill keeps its height.
   Under 480px the two labels cannot share one line (435px of pill for
   343px of bar), so the note takes a row of its own inside the left half;
   align-items on the pill keeps the right half centred on the taller row. */
.wm-audience-note {
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  font-weight: 700;
  font-size: 1.34em;
  line-height: 1;
  vertical-align: -0.07em;
}
@media (max-width: 480px) {
  .wm-audience-note { flex-basis: 100%; line-height: 1.05; }
}

/* ── Phone bar ──
   On phones audience-toggle.js moves the pill into .wm-audience-bar, a
   direct child of <main> (the script's header says why the pill can't
   simply be sticky where it is). Sticky rather than fixed: at rest the
   bar sits where the hero showed the pill, under the launch-offer band
   when that is on, and only pins once the page scrolls past it. The
   offsets are the fixed header's heights (h-16, sm:h-20); the padding
   mirrors the hero gutters so the pill keeps its left edge. */
.wm-audience-bar {
  position: sticky;
  top: 4rem;
  z-index: 40; /* under the header (50) and the mobile menu (60) */
  padding: 10px 1rem 6px;
  background: rgba(250, 250, 249, 0.92); /* the hero ground, #FAFAF9 */
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
@media (min-width: 640px) {
  .wm-audience-bar { top: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}
.wm-audience-bar .wm-audience-toggle { margin: 0; }

/* ── Switching landing ──
   Both landings opt in to cross-document view transitions, so tapping the
   other side crossfades one page into the other instead of flashing
   white, and the pill, named, morphs in place (Safari 18.2+, Chrome 126+;
   older browsers navigate as before). Only the two pages carrying this
   stylesheet opt in, so a link to the funnel or the blog loads plainly. */
@view-transition { navigation: auto; }
.wm-audience-toggle { view-transition-name: wm-audience-toggle; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}