/* Local behavior over the reference's preserved responsive design.
   Layer scale: original navigation 10; mobile menu 20; skip link 30. */
:root {
  color-scheme: light;
  --local-green: #0b4426;
  --local-sage: #c9d3bd;
}

html { scroll-behavior: smooth; }
body { margin: 0; }
body [hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid #7c9771;
  outline-offset: 5px;
}

.local-skip-link {
  position: fixed;
  top: 12px;
  left: 20px;
  z-index: 30;
  padding: 12px 20px;
  border-radius: 100px;
  background: white;
  color: var(--local-green);
  font: 500 15px Inter, sans-serif;
  transform: translateY(-160%);
}
.local-skip-link:focus { transform: translateY(0); }

[data-menu-toggle], [data-faq] > [role="button"] { cursor: pointer; }
[data-menu-toggle] { min-width: 44px; min-height: 44px; }
[data-menu-toggle] > div { transition: transform 180ms ease; }
[data-menu-toggle][aria-expanded="true"] > div:first-child { transform: translateY(3px) rotate(45deg) !important; }
[data-menu-toggle][aria-expanded="true"] > div:last-child { transform: translateY(-3px) rotate(-45deg) !important; }

.local-mobile-menu {
  position: fixed;
  z-index: 20;
  top: 100px;
  left: 30px;
  right: 30px;
  padding: 18px;
  max-height: calc(100dvh - 120px);
  overflow: auto;
  border: 1px solid #0b442612;
  border-radius: 24px;
  background: white;
  box-shadow: 0 18px 50px #0b442624;
  font: 400 17px/1.5 Inter, sans-serif;
}
.local-mobile-menu a {
  display: block;
  padding: 13px 18px;
  color: var(--local-green);
  border-radius: 14px;
  text-decoration: none;
}
.local-mobile-menu a:hover,
.local-mobile-menu a[aria-current="page"] { background: var(--local-sage); }
.local-mobile-menu .local-menu-phone { margin-top: 10px; border-top: 1px solid #0b442618; border-radius: 0; }

[data-faq] { transition: background-color 200ms ease; }
[data-faq][data-faq-open="true"] { background: #fff !important; }
[data-faq][data-faq-open="false"] { background: #e5e8e6 !important; }
[data-faq][data-faq-open="true"] > [data-faq-panel] {
  display: flex !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}
[data-faq] .framer-43h2pg { transition: transform 200ms ease; }
[data-faq][data-faq-open="true"] .framer-43h2pg { transform: none !important; }
[data-faq][data-faq-open="false"] .framer-43h2pg { transform: rotate(180deg) !important; }

/* Keep the category ribbon native to touch, keyboard and mouse input. */
[data-category-scroll] {
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y !important;
  scrollbar-width: none;
  cursor: grab;
}
[data-category-scroll]::-webkit-scrollbar { display: none; }
[data-category-scroll][data-dragging] { cursor: grabbing; }
[data-category-track] { opacity: 1 !important; }

/* The form is a two-column grid: the status takes a whole row under the button once there is something to
   say, and stays out of the layout (but in the accessibility tree, for aria-live) until then. */
.local-form-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.local-form-status[data-submitted] {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  overflow: visible;
  clip-path: none;
  margin: 2px 0 0;
  color: var(--local-green);
  font: 400 14px/1.6 Inter, sans-serif;
  padding: 14px 18px;
  border-radius: 12px;
  background: #e5e8e6;
}
form[data-local-form] button[type="submit"] { cursor: pointer; opacity: 1 !important; }
form[data-local-form] button[type="submit"]:hover { filter: brightness(1.12); }

@media (max-width: 809.98px) {
  .local-mobile-menu { top: 84px; left: 20px; right: 20px; }
}

/* Home hero on phones: one photo under the text, the one with the figures (2009, 3 pays), as on
   HOREB Équipements (equipement/assets/css/equipement.css). */
@media (max-width: 809.98px) {
  section.framer-horakz .framer-6otx37 > .framer-clqxrj,
  section.framer-horakz .framer-z2rnha > .framer-1wbxtgm { display: none; }
  section.framer-horakz .framer-z2rnha { grid-template-columns: minmax(0, 1fr); }
}

/* Partner laboratories on the home page (scripts/content-fr.py, logos from scripts/labs.py): the template
   title, then one row of logo tiles, much shorter than the eight activity cards it replaces. Tiles keep one
   width and wrap centered, so a list of any length stays balanced. A laboratory without a logo shows its
   name (horeb-lab-name). */
section.horeb-labs.framer-oijnu5 { padding: 96px 0; }
section.horeb-labs .framer-1rajqr7 { gap: 36px; }
.horeb-labs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 1200px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.horeb-labs-grid li {
  flex: 0 0 120px;
  display: grid;
  place-items: center;
  height: 104px;
  padding: 12px;
  background: #fff;
  border: 1px solid #0c0d0f14;
  border-radius: 16px;
}
.horeb-labs-grid img { display: block; max-width: 100%; height: auto; }
.horeb-labs-grid .horeb-lab-name span { font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--local-green); }
@media (max-width: 1199.98px) {
  section.horeb-labs.framer-oijnu5 { padding: 72px 0; }
  .horeb-labs-grid { max-width: 760px; }
}
@media (max-width: 809.98px) {
  section.horeb-labs.framer-oijnu5 { padding: 56px 0; }
  section.horeb-labs .framer-1rajqr7 { gap: 28px; }
  .horeb-labs-grid { gap: 10px; }
  .horeb-labs-grid li { flex-basis: calc(50% - 5px); height: 88px; }
}
/* Home, "Notre engagement": the template left 200 px above the badge and under the cards, 100 px under the
   title and 350 px of photo before the cards. The photo covers the section, so it follows. */
section.framer-12mlrzt[data-framer-name="Why Choose"] { padding: 96px 0; }
@media (min-width: 1200px) {
  section[data-framer-name="Why Choose"] .framer-k1h97i { padding-bottom: 0; }
  section[data-framer-name="Why Choose"] .framer-b68ua7 { gap: 64px; }
}
@media (max-width: 1199.98px) {
  section.framer-12mlrzt[data-framer-name="Why Choose"] { padding: 80px 0; }
  section[data-framer-name="Why Choose"] .framer-b68ua7 { gap: 48px; }
}
@media (max-width: 809.98px) {
  section.framer-12mlrzt[data-framer-name="Why Choose"] { padding: 64px 0; }
  section[data-framer-name="Why Choose"] .framer-b68ua7 { gap: 40px; }
}
/* Its first two cards: the template placed cut-out product shots against the card edges (top right of the
   first, bottom left of the second). The photos are opaque, so each sits framed at the bottom of its card,
   inset on three sides; the first card's number and text move above it, as on the second. */
section.framer-12mlrzt .framer-1coj3pm { padding-bottom: 300px; justify-content: flex-start; }
section.framer-12mlrzt .framer-1bdmpod { padding-bottom: 8px; }
section.framer-12mlrzt .framer-16nh799,
section.framer-12mlrzt .framer-19c84lg {
  top: auto; right: 12px; bottom: 12px; left: 12px;
  width: auto; height: 276px;
  border-radius: 22px;
}
section.framer-12mlrzt .framer-16nh799 img { object-fit: cover !important; }
@media (max-width: 809.98px) {
  section.framer-12mlrzt .framer-1coj3pm { padding: 20px 20px 280px; }
  section.framer-12mlrzt .framer-dm00n7 { padding-bottom: 280px; }
  section.framer-12mlrzt .framer-16nh799,
  section.framer-12mlrzt .framer-19c84lg { right: 10px; bottom: 10px; left: 10px; height: 256px; border-radius: 20px; }
}
/* Home, "Notre méthode": a shorter card (the steps came 240 px under the title), the photo beside it
   follows its height; on phones the photo above it is cut down. */
@media (min-width: 1200px) {
  section.framer-n48lax .framer-16jjiui { padding: 64px 30px 64px 80px; }
  section.framer-n48lax .framer-seotw5 { padding-top: 56px; }
}
@media (max-width: 809.98px) {
  section.framer-n48lax .framer-1qxu0xo { height: 240px; }
  section.framer-n48lax .framer-seotw5 { padding-top: 32px; }
}
/* Implantations: three locations since the HOREB Équipements card left (scripts/content-fr.py). From the
   tablet up the cards wrap centered, three per row on a computer and two on a tablet, so a list of any
   length stays balanced. */
@media (min-width: 810px) {
  body[data-page="locations"] .framer-1cjv4yv { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
  body[data-page="locations"] .framer-1cjv4yv > * { flex: 0 0 calc((100% - 30px) / 2); }
}
@media (min-width: 1200px) {
  body[data-page="locations"] .framer-1cjv4yv > * { flex-basis: calc((100% - 60px) / 3); }
}
/* Partenaires: a shorter hero (the title was four lines of 86 px between 150 px margins). */
@media (min-width: 1200px) {
  section.framer-atsg38[data-framer-name="Hero"] .framer-7vidnn { padding: 48px 0; }
  section.framer-atsg38 .framer-kka74d h1.framer-styles-preset-10j2vm0 { --framer-font-size: 70px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  section.framer-atsg38[data-framer-name="Hero"] > .framer-1kdo544 { padding-top: 130px; }
}
@media (max-width: 1199.98px) {
  section.framer-atsg38[data-framer-name="Hero"] .framer-h3jc95 { min-height: 280px; }
}
/* Partenaires, "Notre accompagnement en quatre points": each step becomes a white card (number, title,
   text) in one tight row, instead of loose columns 90 px apart with the number far above the title. */
section.framer-fffyu5[data-framer-name="Step"] { padding: 96px 0; }
section[data-framer-name="Step"] .framer-n7wme9 { gap: 40px; }
section[data-framer-name="Step"] .framer-st44k0 { gap: 16px; align-items: stretch; }
section[data-framer-name="Step"] .framer-st44k0 [class*="-container"] { align-self: stretch; height: auto; }
section[data-framer-name="Step"] .framer-st44k0 .framer-pauLb {
  box-sizing: border-box;
  height: 100% !important;
  gap: 22px;
  padding: 32px 28px;
  background: #fff;
  border-radius: 20px;
}
section[data-framer-name="Step"] .framer-st44k0 .framer-g4171b { background: #e4efe7 !important; }
@media (max-width: 809.98px) {
  section.framer-fffyu5[data-framer-name="Step"] { padding: 64px 0; }
  section[data-framer-name="Step"] .framer-n7wme9 { gap: 28px; }
  section[data-framer-name="Step"] .framer-st44k0 { gap: 12px; }
  section[data-framer-name="Step"] .framer-st44k0 .framer-pauLb { gap: 20px; padding: 24px 22px; }
}
/* Privacy policy (privacy() in scripts/content-fr.py): the template's text preset balances every line,
   which suits short blurbs but leaves long paragraphs ragged and narrow. */
.framer-hmikug { --framer-text-wrap-override: pretty; }
/* Narrow phones: the header's "Nous contacter" button ran over the end of the logo below 430 px and
   almost touched it up to 460 px. The menu button stays, and its menu links to Contact. */
@media (max-width: 459.98px) {
  [data-framer-name="Right"] > .framer-19psvrf-container { display: none; }
}

/* motion:start */
/* Motion shared by the two HOREB sites, driven by assets/js/site.js (copied as is into the Équipements
   local.css by scripts/equipement.py). Short, soft curves; nothing here hides content unless the script is
   about to show it, and everything is skipped when the visitor asks for less motion. */
:root {
  --local-ease: cubic-bezier(.16, 1, .3, 1);
  --local-spring: cubic-bezier(.34, 1.56, .64, 1);
  --local-accent: #00843a;
  --local-ink: #0b4426;
}
:root[data-site="equipement"] { --local-accent: #0f1ed1; --local-ink: #0a148f; }
@property --local-hole { syntax: "<length>"; inherits: false; initial-value: 0px; }

.local-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header: fixed at every width (it already was below 1200 px), tighter on a frosted pill once the page
   scrolls, out of the way while reading down. */
.local-head { position: fixed !important; transition: transform 420ms var(--local-ease); }
.local-head > nav { transition: padding 360ms var(--local-ease); }
.local-head [data-framer-name="Nav"] { transition: background-color 360ms ease, box-shadow 360ms ease, padding 360ms var(--local-ease); }
.local-head-compact > nav { padding-top: 12px !important; }
.local-head-compact [data-framer-name="Nav"] {
  background-color: rgb(255 255 255 / .86) !important;
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--local-ink) 35%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.local-head-away { transform: translateY(-115%); }
@media (max-width: 809.98px) {
  .local-head-compact > nav { padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* Odometer digits: one reel per digit, as wide as the final digit so nothing moves around it. */
.local-odo { display: inline-flex; vertical-align: top; }
.local-odo-col { display: inline-block; overflow: visible clip; vertical-align: top; }
.local-odo-reel { display: flex; flex-direction: column; align-items: center; }
.local-odo-reel > span { display: block; }

/* Cross-site veil: the destination's colour grows from the site button, then opens on the new site. */
.local-veil { position: fixed; inset: 0; z-index: 40; pointer-events: none; view-transition-name: local-veil; }

/* Steps: the line drawn between the numbered boxes (a heartbeat for HOREB Pharma, a blue to anise
   gradient for HOREB Équipements) and the box it has reached. */
.local-step-line { position: absolute; z-index: 0; overflow: visible; pointer-events: none; }
.local-step-line path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.local-step-line .local-step-base { stroke: color-mix(in srgb, var(--local-ink) 16%, transparent); }
.local-step-line .local-step-fill { stroke: var(--local-accent); stroke-dasharray: 1; }
.local-step-box { position: relative; z-index: 1; transition: background-color 360ms ease, box-shadow 360ms ease, transform 420ms var(--local-spring); }
.local-step-box .framer-text { transition: color 360ms ease; }
.local-step-box.local-step-on {
  background-color: var(--local-accent) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--local-accent) 16%, transparent);
  transform: scale(1.06);
}
.local-step-box.local-step-on .framer-text { color: #fff !important; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrance on scroll. A plain block rises as before; a block with several parts reveals them one after
     the other, each coming into focus. */
  .local-reveal-pending:not(.local-reveal-cascade) { opacity: 0; transform: translateY(24px); }
  .local-reveal-visible:not(.local-reveal-cascade) { animation: local-reveal 650ms var(--local-ease) both; }
  .local-reveal-cascade.local-reveal-pending { opacity: 1; transform: none; }
  .local-reveal-cascade.local-reveal-visible { animation: none; }
  .local-reveal-cascade.local-reveal-pending .local-reveal-item { opacity: 0; }
  .local-reveal-cascade.local-reveal-visible .local-reveal-item {
    animation: local-focus 760ms var(--local-ease) both;
    animation-delay: calc(var(--local-i, 0) * 80ms);
  }

  /* Hero opening. Until the script takes over (or after 2.5 s if it never runs), the hero blocks wait. */
  html:not(.local-hero-ready) [data-framer-name="Hero"] :is([data-reveal], [data-framer-name="Right"]) {
    animation: local-failsafe 500ms ease 2.5s backwards;
  }
  .local-hero-part { animation: local-rise 700ms var(--local-ease) var(--local-d, 0ms) both; }
  .local-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-block: .12em;
    margin-block: -.12em;
  }
  .local-word > span {
    display: inline-block;
    animation: local-word 900ms var(--local-ease) both;
    animation-delay: calc(140ms + var(--local-l, 0) * 110ms + var(--local-i, 0) * 14ms);
  }
  .local-hero-photo { animation: local-unveil 1200ms var(--local-ease) var(--local-d, 0ms) backwards; }
  .local-hero-photo :is(img, video) { animation: local-settle 1600ms var(--local-ease) var(--local-d, 0ms) backwards; }

  /* Buttons: the hover colour starts where the pointer comes in, the arrow slides through. */
  a.local-btn { isolation: isolate; transition: translate 520ms var(--local-spring); }
  a.local-btn.local-magnet { transition: translate 140ms ease-out; }
  .local-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--local-x, 50%);
    top: var(--local-y, 50%);
    width: var(--local-size, 400px);
    height: var(--local-size, 400px);
    margin: calc(var(--local-size, 400px) / -2) 0 0 calc(var(--local-size, 400px) / -2);
    border-radius: 50%;
    background: var(--local-fill, rgb(255 255 255 / .14));
    transform: scale(0);
    transition: transform 520ms var(--local-ease);
    pointer-events: none;
  }
  .local-btn.local-hot::before { transform: scale(1); }
  a.local-btn[data-highlight="true"]:hover { filter: none; }
  .local-btn [data-framer-name="Icon"]:has(> [data-framer-name="Hover Icon"]) > :is([data-framer-name="Icon"], [data-framer-name="Hover Icon"]) {
    transition: transform 420ms var(--local-ease);
  }
  .local-btn.local-hot [data-framer-name="Icon"]:has(> [data-framer-name="Hover Icon"]) > [data-framer-name="Icon"] { transform: translateX(26px); }
  .local-btn.local-hot [data-framer-name="Icon"] > [data-framer-name="Hover Icon"] { transform: translateX(25px); }

  /* Page to page: the content fades out and the next one slides in under a header that stays put. */
  @view-transition { navigation: auto; }
  .ssr-variant > [class$="-container"]:has(> nav) { view-transition-name: local-head; }
  ::view-transition-old(root) { animation: local-page-out 220ms ease-in both; }
  ::view-transition-new(root) { animation: local-page-in 520ms var(--local-ease) both; }
  ::view-transition-group(local-head) { animation-duration: 420ms; animation-timing-function: var(--local-ease); }
  ::view-transition-old(local-veil) {
    animation: local-veil-open 820ms cubic-bezier(.7, 0, .2, 1) both;
    mask-image: radial-gradient(circle at calc(100% - 54px) calc(100% - 54px), transparent var(--local-hole), #000 calc(var(--local-hole) + 1px));
  }
  @media (max-width: 809.98px) {
    ::view-transition-old(local-veil) {
      mask-image: radial-gradient(circle at calc(100% - 44px) calc(100% - 44px), transparent var(--local-hole), #000 calc(var(--local-hole) + 1px));
    }
  }
  /* Same-page transitions (the catalogue filters): blocks glide to their new place, the rest cross-fades. */
  html.local-same-page::view-transition-old(root) { animation: local-fade-out 200ms ease both; }
  html.local-same-page::view-transition-new(root) { animation: local-fade-in 320ms ease both; }
  html.local-same-page::view-transition-group(*) { animation-duration: 560ms; animation-timing-function: var(--local-ease); }

  @keyframes local-reveal { from { opacity: 0; transform: translateY(24px); } }
  @keyframes local-focus { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
  @keyframes local-failsafe { from { opacity: 0; } }
  @keyframes local-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes local-word { from { transform: translateY(110%); } }
  @keyframes local-unveil {
    from { clip-path: inset(8% 8% 8% 8% round var(--local-r, 20px)); }
    to { clip-path: inset(0 round var(--local-r, 20px)); }
  }
  @keyframes local-settle { from { transform: scale(1.08); } }
  @keyframes local-page-out { to { opacity: 0; } }
  @keyframes local-page-in { from { opacity: 0; transform: translateY(14px); } }
  @keyframes local-fade-out { to { opacity: 0; } }
  @keyframes local-fade-in { from { opacity: 0; } }
  @keyframes local-veil-open { from { --local-hole: 0px; } to { --local-hole: 150vmax; } }
}
/* motion:end */

/* HOREB Pharma signature, "le fil du pouls": a heartbeat line under the home title and between the steps
   of the method (the shared step line above), partner logos that take their colours, locations that
   send a signal. */
.local-ecg { position: absolute; left: 0; top: calc(100% + 6px); width: 100%; height: 22px; overflow: visible; pointer-events: none; }
.local-ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.local-ecg .local-ecg-trace { stroke: #7fd3a0; stroke-width: 1.6; stroke-dasharray: 1; }
.local-ecg .local-ecg-beat { stroke: #e9fff1; stroke-width: 3; stroke-dasharray: .06 1; stroke-dashoffset: .06; opacity: 0; filter: drop-shadow(0 0 5px #7fd3a0); }

.local-pin { position: absolute; top: 26px; right: 26px; width: 12px; height: 12px; pointer-events: none; }
.local-pin i { position: absolute; inset: 0; border-radius: 50%; background: var(--local-accent); }
.local-pin i + i, .local-pin i + i + i { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .local-hero-ready .local-ecg .local-ecg-trace { animation: local-draw 1500ms cubic-bezier(.65, 0, .35, 1) 800ms both; }
  .local-hero-ready .local-ecg .local-ecg-beat { animation: local-beat 1300ms cubic-bezier(.45, 0, .25, 1) 2250ms both; }

  .local-reveal-pending .horeb-labs-grid > .local-reveal-item { filter: grayscale(1); }
  .local-reveal-visible .horeb-labs-grid > .local-reveal-item { animation: local-lab 900ms var(--local-ease) both; animation-delay: calc(var(--local-i, 0) * 80ms); }
  .horeb-labs-grid > li { transition: transform 420ms var(--local-spring), box-shadow 300ms ease; }

  /* The logos pass in a loop (labsMarquee() in assets/js/site.js wraps the list and repeats it), faded
     at both ends, and stop under the pointer. The extra room above and below keeps the lifted tile and
     its shadow inside the clipped strip. */
  .horeb-labs-marquee {
    width: 100%;
    margin: -16px 0 -28px;
    padding: 16px 0 28px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .horeb-labs-marquee .horeb-labs-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    max-width: none;
    animation: local-labs-loop var(--local-labs-duration, 40s) linear infinite;
  }
  .horeb-labs-marquee .horeb-labs-grid li { flex: 0 0 136px; height: 104px; }
  .horeb-labs-marquee:is(:hover, :focus-within) .horeb-labs-grid { animation-play-state: paused; }
  /* One pass moves the list by one copy of the logos and the gap after it: the next copy takes its place. */
  @keyframes local-labs-loop { to { translate: calc(-50% - 6px) 0; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 809.98px) {
  .horeb-labs-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .horeb-labs-marquee .horeb-labs-grid { gap: 10px; }
  .horeb-labs-marquee .horeb-labs-grid li { flex-basis: 120px; height: 88px; }
  @keyframes local-labs-loop { to { translate: calc(-50% - 5px) 0; } }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .horeb-labs-grid > li:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -10px #0b442640; }
}
@media (prefers-reduced-motion: no-preference) {
  .local-reveal-visible .local-pin i:first-child { animation: local-pop 560ms var(--local-spring) both; animation-delay: calc(var(--local-n, 0) * 340ms + 420ms); }
  .local-reveal-visible .local-pin i + i { animation: local-ripple 1800ms cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--local-n, 0) * 340ms + 560ms); }
  .local-reveal-visible .local-pin i + i + i { animation-delay: calc(var(--local-n, 0) * 340ms + 940ms); }

  @keyframes local-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes local-beat {
    0% { stroke-dashoffset: .06; opacity: 0; }
    8%, 88% { opacity: 1; }
    100% { stroke-dashoffset: -1; opacity: 0; }
  }
  @keyframes local-lab {
    0% { opacity: .35; filter: grayscale(1); transform: scale(.96); }
    45% { opacity: .8; filter: grayscale(1); }
    100% { opacity: 1; filter: grayscale(0); transform: none; }
  }
  @keyframes local-pop { from { transform: scale(0); } }
  @keyframes local-ripple { from { transform: scale(1); opacity: .5; } to { transform: scale(3.6); opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* site-switcher:start */
/* Floating site button, bottom right, built by assets/js/site.js: a click pops the two HOREB
   sites up above it. Layer 15: above the template navigation, below the mobile menu and the skip link.
   scripts/equipement.py copies this block as is (never recolored). */
.site-switcher {
  --sw-spring: cubic-bezier(.34, 1.56, .64, 1);
  --sw-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: Inter, sans-serif;
  pointer-events: none;
}
.site-switcher > * { pointer-events: auto; }
/* Away while reading down the page (assets/js/site.js): slid under the bottom edge, still focusable. */
.site-switcher { transition: translate 360ms var(--sw-ease), opacity 240ms ease; }
.site-switcher.sw-away { translate: 0 calc(100% + 24px); opacity: 0; }
.site-switcher.sw-away > * { pointer-events: none; }

/* Sites: each one rises from the button, scales up with a light overshoot, then its label slides in. */
.site-switcher .sw-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
  padding: 0 4px 0 0;
  list-style: none;
}
.site-switcher.open .sw-list { pointer-events: auto; }
.site-switcher:not(.open) .sw-list { pointer-events: none; }
.site-switcher li {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(28px + var(--sw-i) * 64px)) scale(.4);
  transform-origin: right center;
  transition: transform 260ms var(--sw-ease), opacity 160ms ease, visibility 0s linear 260ms;
}
.site-switcher.open li {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform 520ms var(--sw-spring), opacity 220ms ease, visibility 0s;
  transition-delay: calc(var(--sw-i) * 70ms);
}
.site-switcher a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sw-ink);
  text-decoration: none;
  border-radius: 999px;
  outline: none;
}
.site-switcher .sw-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: var(--sw-color);
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--sw-color) 60%, transparent), 0 2px 6px #0c0d0f1f;
  transition: transform 260ms var(--sw-spring), box-shadow 260ms ease;
}
.site-switcher .sw-icon svg { width: 24px; height: 24px; }
/* Current site: a dot in the brand's second color, and "Vous êtes ici" in the label. */
.site-switcher a[aria-current="page"] .sw-icon::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sw-ink);
  box-shadow: 0 0 0 2px var(--sw-color), 0 0 0 4px #fff;
}
.site-switcher .sw-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 9px 16px;
  color: #1f2022;
  white-space: nowrap;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 28px -10px #0c0d0f40, 0 1px 3px #0c0d0f1a;
  opacity: 0;
  transform: translateX(14px);
  transition: transform 200ms var(--sw-ease), opacity 140ms ease;
}
.site-switcher.open .sw-label {
  opacity: 1;
  transform: none;
  transition: transform 420ms var(--sw-ease), opacity 260ms ease;
  transition-delay: calc(140ms + var(--sw-i) * 70ms);
}
.site-switcher .sw-label strong { font: 600 15px/1.2 "Rethink Sans", Inter, sans-serif; color: var(--sw-color); }
.site-switcher .sw-label small { font: 400 12px/1.35 Inter, sans-serif; color: #5b5e66; }
.site-switcher a:hover .sw-icon,
.site-switcher a:focus-visible .sw-icon { transform: scale(1.08); }
.site-switcher a:focus-visible .sw-icon { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sw-color); }

/* Main button: Pharma green blending into Équipements blue (shared by both sites), a soft halo breathing
   around it while folded. The gradient sits on ::after so it can fade into the dark open state. */
.site-switcher .sw-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #1f2022;
  box-shadow: 0 14px 30px -8px #0a3a6e80, 0 3px 8px #0c0d0f26;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 300ms var(--sw-spring), background-color 240ms ease, box-shadow 240ms ease;
}
.site-switcher .sw-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(135deg, #00843a, #0f1ed1);
  animation: sw-halo 2.6s var(--sw-ease) infinite;
}
.site-switcher.open .sw-toggle::before { animation: none; opacity: 0; }
.site-switcher .sw-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #00843a, #0f1ed1);
  transition: opacity 240ms ease, filter 240ms ease;
}
.site-switcher.open .sw-toggle::after { opacity: 0; }
.site-switcher .sw-toggle:hover { transform: scale(1.06); }
.site-switcher .sw-toggle:hover::after { filter: brightness(1.12); }
.site-switcher .sw-toggle:active { transform: scale(.94); }
.site-switcher.open .sw-toggle { background: #1f2022; box-shadow: 0 14px 30px -8px #0c0d0f66, 0 3px 8px #0c0d0f26; }
.site-switcher .sw-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px #1f2022; }
.site-switcher .sw-toggle svg {
  position: absolute;
  z-index: 1;
  transition: transform 380ms var(--sw-spring), opacity 200ms ease;
}
.site-switcher .sw-swap { width: 26px; height: 26px; }
.site-switcher .sw-close { width: 24px; height: 24px; opacity: 0; transform: rotate(-90deg) scale(.4); }
.site-switcher.open .sw-swap { opacity: 0; transform: rotate(90deg) scale(.4); }
.site-switcher.open .sw-close { opacity: 1; transform: none; }
@keyframes sw-halo {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* Phones: a little closer to the corner and smaller, clear of the page content. */
@media (max-width: 809.98px) {
  .site-switcher { right: 16px; bottom: 16px; gap: 12px; }
  .site-switcher .sw-toggle { width: 56px; height: 56px; }
  .site-switcher .sw-icon { width: 48px; height: 48px; flex-basis: 48px; }
  .site-switcher li { transform: translateY(calc(26px + var(--sw-i) * 60px)) scale(.4); }
}
@media (prefers-reduced-motion: reduce) {
  .site-switcher li,
  .site-switcher.open li,
  .site-switcher .sw-label,
  .site-switcher.open .sw-label,
  .site-switcher .sw-toggle,
  .site-switcher .sw-toggle svg { transition: opacity 120ms ease, visibility 0s; transition-delay: 0s; transform: none; }
  .site-switcher .sw-close { transform: none; }
  .site-switcher.open .sw-swap { transform: none; }
  .site-switcher .sw-toggle::before { animation: none; opacity: 0; }
  .site-switcher { transition: opacity 120ms ease; }
  .site-switcher.sw-away { translate: none; }
}
@media print { .site-switcher { display: none; } }
/* site-switcher:end */

/* Brand line at the top of the home title (content-fr.py brand_h1): the main heading names the company. */
.local-h1-brand {
  display: block;
  margin-bottom: .55em;
  font-size: max(14px, .26em);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a6dcb4;
}