/* 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: #0a148f;
  --local-sage: #d3d7fb;
}

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

:focus-visible {
  outline: 3px solid #0f1ed1;
  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 #0a148f12;
  border-radius: 24px;
  background: white;
  box-shadow: 0 18px 50px #0a148f24;
  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 #0a148f18; 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: #e4e6f0 !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; }

.local-form-status {
  width: 100%;
  margin: 2px 0 0;
  color: var(--local-green);
  font: 400 14px/1.6 Inter, sans-serif;
}
.local-form-status[data-submitted] {
  padding: 14px 18px;
  border-radius: 12px;
  background: #e4e6f0;
}
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; }
}

@media (prefers-reduced-motion: no-preference) {
  .local-reveal-pending { opacity: 0; transform: translateY(24px); }
  .local-reveal-visible { animation: local-reveal 650ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes local-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  a[data-highlight="true"] { transition: filter 180ms ease; }
  a[data-highlight="true"]:hover { filter: brightness(.94); }
}

@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 */

/* 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 */