/* HOREB Équipements additions over the template: catalogue, quote, forms, toast and count badge.
   Written by hand (scripts/equipement.py only links it). Same visual language as the template:
   white cards rounded to 30 px, pill buttons, Rethink Sans headings and Inter text.
   Layer scale: switcher 15, mobile menu 20, toast 25, skip link 30. */
:root {
  --eq-ink: #0a148f;
  --eq-blue: #0f1ed1;
  --eq-text: rgba(10, 20, 143, .8);
  --eq-muted: #464b66;
  --eq-line: rgba(10, 20, 143, .1);
  --eq-tint: #e8eafc;
  --eq-anise: #88bd0b;
  --eq-anise-soft: #eef7d6;
  --eq-heading: "Rethink Sans", "Rethink Sans Placeholder", Inter, sans-serif;
  --eq-body: Inter, "Inter Placeholder", sans-serif;
}

.eq-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.eq-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- catalogue */
.eq-catalogue {
  display: grid;
  gap: 24px;
  width: 100%;
  font-family: var(--eq-body);
  color: var(--eq-text);
}
.eq-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.eq-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 420px;
  max-width: 640px;
}
.eq-search .eq-icon {
  position: absolute;
  left: 22px;
  color: var(--eq-ink);
  pointer-events: none;
}
.eq-search input {
  width: 100%;
  height: 58px;
  padding: 0 24px 0 56px;
  border: 1px solid var(--eq-line);
  border-radius: 100px;
  background: #fff;
  color: var(--eq-ink);
  font: 400 16px/1.5 var(--eq-body);
  appearance: none;
}
.eq-search input::placeholder { color: rgba(10, 20, 143, .5); }
.eq-search input:focus { border-color: var(--eq-blue); outline: none; box-shadow: 0 0 0 3px rgba(15, 30, 209, .18); }
.eq-count { margin: 0; color: var(--eq-muted); font: 500 15px/1.5 var(--eq-body); }

.eq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.eq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--eq-line);
  border-radius: 100px;
  background: #fff;
  color: var(--eq-ink);
  font: 500 15px/1.4 var(--eq-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.eq-chip .eq-icon { width: 18px; height: 18px; }
.eq-chip span { color: var(--eq-muted); font-size: 13px; font-weight: 400; }
.eq-chip:hover { border-color: var(--eq-blue); }
.eq-chip[aria-pressed="true"] { background: var(--eq-ink); border-color: var(--eq-ink); color: #fff; }
.eq-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .75); }

.eq-families { display: grid; gap: 24px; }
.eq-family {
  padding: 30px;
  border-radius: 30px;
  background: #fff;
  scroll-margin-top: 120px;
}
.eq-family-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.eq-family-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--eq-tint);
  color: var(--eq-blue);
}
.eq-family-icon .eq-icon { width: 26px; height: 26px; }
.eq-family-title {
  margin: 0 0 4px;
  color: var(--eq-ink);
  font: 500 26px/1.1 var(--eq-heading);
  letter-spacing: -.04em;
}
.eq-family-head p { margin: 0; font: 400 15px/1.5 var(--eq-body); }
.eq-family-count {
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--eq-anise-soft);
  color: var(--eq-ink);
  font: 500 14px/1.4 var(--eq-body);
  white-space: nowrap;
}

.eq-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  column-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Neutral 1 px separator between rows. */
.eq-product {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 0;
  border-top: 1px solid var(--eq-line);
}
.eq-product-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.eq-product-name { color: var(--eq-ink); font: 500 15px/1.4 var(--eq-body); overflow-wrap: anywhere; }
.eq-product-pack { color: var(--eq-muted); font: 400 13px/1.4 var(--eq-body); }
.eq-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 100px;
  background: var(--eq-tint);
  color: var(--eq-ink);
  font: 500 14px/1 var(--eq-body);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.eq-add .eq-icon { width: 16px; height: 16px; }
.eq-add:hover { background: var(--eq-ink); color: #fff; }
.eq-add.eq-in-quote { background: var(--eq-anise-soft); }
.eq-add.eq-in-quote:hover { background: var(--eq-ink); }

.eq-empty {
  padding: 40px 30px;
  border-radius: 30px;
  background: #fff;
  text-align: center;
  font: 400 16px/1.5 var(--eq-body);
}
.eq-empty p { margin: 0; }
.eq-empty-title { margin-bottom: 6px !important; color: var(--eq-ink); font: 500 22px/1.2 var(--eq-heading) !important; letter-spacing: -.03em; }
.eq-empty a, .eq-quote a:not(.eq-button) { color: var(--eq-blue); }

/* ---------------------------------------------------------------- quote (tinted panel of the quote page) */
.eq-quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  font-family: var(--eq-body);
  color: var(--eq-text);
}
.eq-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eq-quote-title {
  margin: 0;
  color: var(--eq-ink);
  font: 500 36px/1.1 var(--eq-heading);
  letter-spacing: -.04em;
}
.eq-quote-intro { margin: 0; font: 400 16px/1.5 var(--eq-body); }
.eq-link-button {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--eq-ink);
  font: 500 15px/1.4 var(--eq-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.eq-quote-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.eq-quote-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 20px;
  border-radius: 20px;
  background: #fff;
}
.eq-quote-text { display: grid; gap: 2px; min-width: 0; }
.eq-quote-name { color: var(--eq-ink); font: 500 15px/1.4 var(--eq-body); overflow-wrap: anywhere; }
.eq-quote-meta { color: var(--eq-muted); font: 400 13px/1.4 var(--eq-body); }
.eq-qty {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--eq-line);
  border-radius: 100px;
}
.eq-qty button, .eq-remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--eq-tint);
  color: var(--eq-ink);
  cursor: pointer;
}
.eq-qty button:hover, .eq-remove:hover { background: var(--eq-ink); color: #fff; }
.eq-qty .eq-icon, .eq-remove .eq-icon { width: 16px; height: 16px; }
.eq-qty input {
  width: 52px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--eq-ink);
  font: 500 15px/1 var(--eq-body);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.eq-qty input::-webkit-inner-spin-button, .eq-qty input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.eq-remove { background: transparent; }
.eq-quote-empty {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .6);
}
.eq-quote-empty p { margin: 0; color: var(--eq-ink); font: 500 18px/1.4 var(--eq-body); }
.eq-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 100px;
  background: var(--eq-ink);
  color: #fff;
  font: 500 16px/1 var(--eq-body);
  text-decoration: none;
}
.eq-button:hover { background: var(--eq-blue); }
.eq-button .eq-icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- forms (contact and quote) */
form[data-quote-form] button[type="submit"],
form[data-contact-form] button[type="submit"] { opacity: 1 !important; cursor: pointer; }
form[data-quote-form] button[type="submit"]:hover,
form[data-contact-form] button[type="submit"]:hover { filter: brightness(1.15); }
.eq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
}
/* Second send button: outlined version of the template button. */
.eq-secondary button[type="submit"] {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--eq-ink);
}
.eq-secondary button[type="submit"] p { --framer-text-color: var(--eq-ink) !important; }
.eq-secondary button[type="submit"]:hover { filter: none; background: var(--eq-tint) !important; }
.eq-secondary [data-framer-name="Icon"] { box-shadow: inset 0 0 0 1px var(--eq-line); border-radius: 50%; }
.eq-form-note, .eq-error { grid-column: 1 / -1; margin: 0; font: 400 14px/1.5 var(--eq-body); }
.eq-form-note { color: var(--eq-muted); }
.eq-error {
  padding: 12px 16px;
  border-radius: 12px;
  background: #fdeceb;
  color: #9a1d14;
  font-weight: 500;
}

/* ---------------------------------------------------------------- count badge and toast */
.eq-badge-host { position: relative; }
/* The header pill clips its content to its rounded ends, and the count sits over its corner: once the
   header turns compact on scroll, the corner cut into the badge. */
@media (min-width: 810px) {
  [data-framer-name="Nav"]:has(.eq-badge-host) { overflow: visible; }
}
.eq-count-badge {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--eq-anise);
  color: var(--eq-ink);
  box-shadow: 0 0 0 2px #fff;
  font: 700 12px/22px var(--eq-body);
  text-align: center;
  pointer-events: none;
}
.eq-toast {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--eq-ink);
  color: #fff;
  box-shadow: 0 18px 50px rgba(10, 20, 143, .28);
  font: 400 15px/1.45 var(--eq-body);
  transform: translateX(-50%);
}
.eq-toast a { color: var(--eq-anise); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .eq-toast:not([hidden]) { animation: eq-toast 260ms cubic-bezier(.22, 1, .36, 1); }
  @keyframes eq-toast { from { opacity: 0; transform: translate(-50%, 12px); } }
}

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 1199.98px) {
  .eq-quote-title { font-size: 30px; }
}
@media (max-width: 809.98px) {
  .eq-catalogue, .eq-families { gap: 16px; }
  .eq-search { flex-basis: 100%; }
  .eq-search input { height: 52px; }
  /* One scrolling row of chips instead of a dropdown. */
  .eq-chips {
    flex-wrap: nowrap;
    margin: 0 -20px;
    padding: 0 20px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .eq-chips::-webkit-scrollbar { display: none; }
  .eq-family { padding: 20px; border-radius: 20px; scroll-margin-top: 100px; }
  .eq-family-head { grid-template-columns: auto 1fr; gap: 14px; }
  .eq-family-icon { width: 46px; height: 46px; }
  .eq-family-title { font-size: 22px; }
  .eq-family-head p { font-size: 14px; }
  .eq-family-count { grid-column: 1 / -1; justify-self: start; }
  .eq-add { padding: 0 12px; }
  .eq-quote-title { font-size: 26px; }
  .eq-quote-item { grid-template-columns: 1fr auto; padding: 14px; }
  .eq-quote-text { grid-column: 1 / -1; }
  .eq-toast { bottom: 88px; } /* above the floating site button */
}
/* Narrow phones: the longer logo met the header's "Demander un devis" button below 480 px.
   The menu button stays, and its menu links to the quote page. */
@media (max-width: 479.98px) {
  [data-framer-name="Right"] > .framer-19psvrf-container { display: none; }
}
@media print {
  .eq-add, .eq-chips, .eq-toolbar, .eq-toast { display: none; }
}

/* Closing call to action (fr.compact_cta, run by scripts/equipement.py): the photo is dropped; the panel
   is styled further down ("Un besoin précis ?"). */

/* Home, "Pourquoi nous choisir": no photo behind it (Pharma keeps its sky), the badge and title on the
   left with the line "Pour les hôpitaux…" level with them on the right, then the cards. Their photos sit
   framed at the bottom of the first two cards, as on Pharma (assets/css/local.css). */
section.framer-12mlrzt[data-framer-name="Why Choose"] { padding: 96px 0 56px; }
section.framer-12mlrzt > .framer-113xuny { display: none; }
section.framer-12mlrzt .framer-b68ua7 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px 32px; }
section.framer-12mlrzt .framer-1hk7xb0 { display: contents; }
section.framer-12mlrzt .framer-k1h97i { grid-column: 1; width: 100%; padding-bottom: 0; align-items: flex-start; }
section.framer-12mlrzt .framer-k1h97i .framer-text { --framer-text-alignment: start !important; }
section.framer-12mlrzt .framer-n41dif { grid-column: 2; grid-row: 1; background: var(--eq-tint) !important; }
section.framer-12mlrzt .framer-1frg8g7 { grid-column: 1 / -1; }
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: 1199.98px) {
  section.framer-12mlrzt[data-framer-name="Why Choose"] { padding: 72px 0 48px; }
}
@media (max-width: 809.98px) {
  section.framer-12mlrzt[data-framer-name="Why Choose"] { padding: 56px 0 40px; }
  section.framer-12mlrzt .framer-b68ua7 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  section.framer-12mlrzt .framer-n41dif { grid-column: 1; grid-row: auto; justify-self: start; }
  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, "Commander": 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: 56px 30px 56px 80px; }
  section.framer-n48lax .framer-seotw5 { padding-top: 48px; }
}
@media (max-width: 809.98px) {
  section.framer-n48lax .framer-1qxu0xo { height: 220px; }
  section.framer-n48lax .framer-seotw5 { padding-top: 32px; }
}

/* Services and À propos: heroes about as tall as the catalogue's (500 px on a computer). Below 1200 px
   the photos, stacked under the text by the template, are left out. */
@media (min-width: 1200px) {
  section.framer-atsg38[data-framer-name="Hero"] .framer-7vidnn { padding: 24px 0; gap: 28px; }
  section.framer-atsg38 .framer-kka74d { gap: 22px; }
  section.framer-atsg38 .framer-6zm88i { gap: 16px; }
  section.framer-atsg38 .framer-kka74d h1.framer-styles-preset-10j2vm0 { --framer-font-size: 56px; }
  section.framer-y2su65 .framer-15fufei { padding: 40px 50px; }
  section.framer-y2su65 .framer-1d1xatm { gap: 22px; }
  section.framer-y2su65 .framer-xnp8k7 { padding-top: 36px; }
  section.framer-y2su65 .framer-1js5s0q h1.framer-styles-preset-126orpg { --framer-font-size: 52px; }
  section.framer-y2su65 .framer-1olqawj { padding: 24px 50px; }
}
@media (max-width: 1199.98px) {
  section.framer-atsg38[data-framer-name="Hero"] > .framer-1kdo544 { padding-top: 140px; }
  section.framer-atsg38 .framer-h3jc95 { display: none; }
  section.framer-y2su65 .framer-1qdkaex { display: none; }
  section.framer-y2su65 .framer-xnp8k7 { padding-top: 28px; }
}
@media (max-width: 809.98px) {
  section.framer-atsg38[data-framer-name="Hero"] > .framer-1kdo544 { padding-top: 120px; padding-bottom: 40px; }
  section.framer-y2su65 .framer-1olqawj { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  section.framer-y2su65 .framer-1olqawj [class*="-container"] { width: auto !important; }
}

/* Services, "Ce que nous proposons": same spacing as the steps of Pharma's Partenaires page
   (assets/css/local.css) instead of the template's 200 px above the title. */
section.framer-fffyu5[data-framer-name="Step"] { padding: 96px 0; }
@media (max-width: 809.98px) {
  section.framer-fffyu5[data-framer-name="Step"] { padding: 64px 0; }
}

/* "Un besoin précis ?" (home, catalogue, À propos): one deep blue panel, the text on the left and the
   quote button in anise on the right, with two soft blue glows. Overrides the template's centered white card. */
section.horeb-cta > [data-framer-name="Content"] { padding: 40px 0; background: none; }
section.horeb-cta [data-framer-name="Container"] > [data-framer-name="Content"] { width: 100%; max-width: 1160px; }
section.horeb-cta [data-framer-name="CTA card"] {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 48px 56px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(76, 96, 255, .5), transparent 70%),
    radial-gradient(560px 360px at 0% 100%, rgba(15, 30, 209, .75), transparent 70%),
    var(--eq-ink);
}
section.horeb-cta [data-framer-name="CTA card"] > [data-framer-name="Top"] {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  background: none !important;
}
section.horeb-cta [data-framer-name="CTA card"] > [data-framer-name="Top"] > [data-framer-name="Content"] {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  max-width: 100%;
}
section.horeb-cta [data-framer-name="Top"] [data-framer-name="Icon"] {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
}
section.horeb-cta [data-framer-name="Top"] [data-framer-name="Icon"] > div { inset: 14px !important; }
section.horeb-cta [data-framer-name="Info"] { flex: 1 1 auto; min-width: 0; align-items: flex-start; gap: 6px; }
section.horeb-cta [data-framer-name="Info"] > * { width: 100%; }
section.horeb-cta [data-framer-name="Info"] .framer-text {
  --framer-text-alignment: start !important;
  --framer-text-wrap-override: pretty;
  --framer-text-color: rgba(255, 255, 255, .8) !important;
}
section.horeb-cta [data-framer-name="Info"] h2.framer-text {
  --framer-text-color: #fff !important;
  --framer-font-size: 34px;
}
section.horeb-cta [data-framer-name="CTA card"] > [data-framer-name="Bottom"] { flex: none; width: auto; }
section.horeb-cta [data-framer-name="Bottom"] a {
  width: auto !important;
  padding: 18px 20px 18px 28px;
  gap: 16px;
  border-radius: 100px !important;
  background-color: var(--eq-anise) !important;
  transition: background-color 180ms ease, translate 520ms cubic-bezier(.34, 1.56, .64, 1);
}
section.horeb-cta [data-framer-name="Bottom"] a:hover { background-color: #9bd10f !important; }
section.horeb-cta [data-framer-name="Bottom"] a .framer-text { --framer-text-color: var(--eq-ink) !important; font-weight: 500; }
@media (max-width: 1199.98px) {
  section.horeb-cta [data-framer-name="CTA card"] { padding: 40px; }
}
@media (max-width: 809.98px) {
  section.horeb-cta > [data-framer-name="Content"] { padding: 28px 0; }
  section.horeb-cta [data-framer-name="CTA card"] { flex-direction: column; align-items: stretch; gap: 24px; padding: 28px 22px; border-radius: 24px; }
  section.horeb-cta [data-framer-name="CTA card"] > [data-framer-name="Top"] { width: 100%; }
  section.horeb-cta [data-framer-name="CTA card"] > [data-framer-name="Top"] > [data-framer-name="Content"] { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
  section.horeb-cta [data-framer-name="Top"] [data-framer-name="Icon"] { width: 52px; height: 52px; border-radius: 14px; }
  section.horeb-cta [data-framer-name="Top"] [data-framer-name="Icon"] > div { inset: 11px !important; }
  section.horeb-cta [data-framer-name="Info"] h2.framer-text { --framer-font-size: 28px; }
  section.horeb-cta [data-framer-name="Bottom"] a { width: 100% !important; justify-content: space-between; }
}

/* ---------------------------------------------------------------- layouts of its own */
/* The template gives both sites the same centered sections. HOREB Équipements reads like a spec sheet:
   the hero photos on the left, and below, each section's title in a left column (held in view on a
   computer) with its content beside it, rows split by thin lines. "Votre devis en trois étapes" and the
   closing call to action keep the shared layout. */

/* Heroes of the home page and Services: the photos on the left, the text on the right; on the home page
   the two smaller photos come first. À propos already opens on its photo, framed on the faces. */
@media (min-width: 1200px) {
  section.framer-horakz .framer-13m72pr > .framer-6otx37 { order: -1; flex-direction: column-reverse; }
  section.framer-atsg38 .framer-lm4ujr > .framer-h3jc95 { order: -1; }
  section.framer-y2su65 .framer-1lins6f { min-height: 440px; }
}
section.framer-y2su65 .framer-1qdkaex img { object-position: center 8% !important; }
/* Phones (as on Pharma, assets/css/local.css): one photo under the hero text, the one with the figures. */
@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); }
}

/* Home, product families: the title on the left with the catalogue line on its right, the ribbon under
   both, across the whole width. */
section.framer-oijnu5[data-framer-name="Category"] { padding: 96px 0 72px; }
section.framer-oijnu5 .framer-1rajqr7 {
  --eq-side: max(30px, calc((100% - 1300px) / 2));
  display: grid;
  grid-template-columns: var(--eq-side) minmax(0, 1fr) auto var(--eq-side);
  align-items: end;
  gap: 36px 0;
}
section.framer-oijnu5 .framer-3iuf8z { grid-column: 2; grid-row: 1; width: 100%; max-width: 640px; justify-content: flex-start; }
section.framer-oijnu5 .framer-3iuf8z .framer-text { --framer-text-alignment: start !important; }
section.framer-oijnu5 .framer-1dxc17g { grid-column: 3; grid-row: 1; width: auto; padding: 0 0 0 32px; }
section.framer-oijnu5 .framer-1dxc17g > * { flex: none; width: auto; max-width: 340px; }
section.framer-oijnu5 .framer-1dxc17g .framer-text { --framer-text-alignment: end !important; }
section.framer-oijnu5 .framer-1rajqr7 > .ssr-variant > *,
section.framer-oijnu5 .framer-1rajqr7 > :not(.ssr-variant, .framer-3iuf8z, .framer-1dxc17g) { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 809.98px) {
  section.framer-oijnu5[data-framer-name="Category"] { padding: 64px 0 48px; }
  /* The container already keeps 20 px on each side here: one column. */
  section.framer-oijnu5 .framer-1rajqr7 { grid-template-columns: minmax(0, 1fr); gap: 24px 0; }
  section.framer-oijnu5 .framer-3iuf8z { grid-column: 1; }
  section.framer-oijnu5 .framer-1dxc17g { grid-column: 1; grid-row: 3; width: 100%; padding: 0; }
  section.framer-oijnu5 .framer-1dxc17g > * { width: 100%; max-width: none; }
  section.framer-oijnu5 .framer-1dxc17g .framer-text { --framer-text-alignment: start !important; }
}

/* Spec sheet sections: the home team, Services "Ce que nous proposons" and "Questions fréquentes",
   À propos "Ce qui nous guide". */
section.framer-c5w2w9 .framer-5hxfgh .framer-text,
section.framer-fffyu5 .framer-1nva8yd .framer-text,
section.framer-1x95t4s .framer-10h755d .framer-text,
section.framer-1by2p5 .framer-epxnic .framer-text { --framer-text-alignment: start !important; }
section.framer-c5w2w9 .framer-5hxfgh,
section.framer-fffyu5 .framer-1nva8yd,
section.framer-1x95t4s .framer-10h755d,
section.framer-1by2p5 .framer-epxnic { width: 100%; max-width: none; flex-direction: column; align-items: flex-start; }
/* Their title box is a template flex child one pixel wide that grows along the row: in a column it
   must take the whole width instead. */
section.framer-c5w2w9 .framer-5hxfgh > *,
section.framer-fffyu5 .framer-1nva8yd > *,
section.framer-1x95t4s .framer-10h755d > *,
section.framer-1by2p5 .framer-epxnic > * { flex: none; width: 100%; }
@media (min-width: 810px) {
  section.framer-c5w2w9 .framer-vpy9v7,
  section.framer-fffyu5 .framer-n7wme9,
  section.framer-1x95t4s .framer-tyxfk7,
  section.framer-1by2p5 .framer-13e6imp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: 40px 64px;
  }
  section.framer-c5w2w9 .framer-5hxfgh,
  section.framer-fffyu5 .framer-1nva8yd,
  section.framer-1x95t4s .framer-10h755d,
  section.framer-1by2p5 .framer-epxnic { position: sticky; top: 120px; }
  section.framer-c5w2w9 .framer-rhd4x2,
  section.framer-fffyu5 .framer-st44k0,
  section.framer-1x95t4s .framer-2tciv0,
  section.framer-1by2p5 .framer-bcfce4 { width: 100%; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  section.framer-c5w2w9 .framer-vpy9v7,
  section.framer-fffyu5 .framer-n7wme9,
  section.framer-1x95t4s .framer-tyxfk7,
  section.framer-1by2p5 .framer-13e6imp { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 32px 40px; }
}

/* Home team: one card per row, the photo beside the details. */
/* "clip" rather than the template's "hidden": a hidden overflow would hold the title 120 px down inside the panel. */
section.framer-c5w2w9 .framer-oj5e1m { padding: 96px 0; overflow: clip; }
@media (min-width: 810px) {
  section.framer-c5w2w9 .framer-16yt6e6 { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  section.framer-c5w2w9 .framer-uvpkc2 { grid-column: 1 / -1 !important; }
  section.framer-c5w2w9 .framer-PjN1c { flex-direction: row !important; align-items: stretch; gap: 10px; }
  section.framer-c5w2w9 .framer-PjN1c > .framer-13zwbga { flex: 0 0 38%; width: 38%; align-self: stretch; }
  section.framer-c5w2w9 .framer-PjN1c > .framer-13zwbga > .framer-1634uot { height: 100% !important; aspect-ratio: auto !important; }
  section.framer-c5w2w9 .framer-PjN1c > .framer-dit6fh { flex: 1 1 0; width: auto; }
}
@media (max-width: 809.98px) {
  section.framer-c5w2w9 .framer-oj5e1m { padding: 64px 0; }
}

/* Services, "Ce que nous proposons": four rows, the number beside the title and its text. */
section.framer-fffyu5 .framer-st44k0 {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--eq-line);
}
section.framer-fffyu5 .framer-st44k0 [class*="-container"] { width: 100% !important; }
section.framer-fffyu5 .framer-pauLb {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 26px 0;
  border-bottom: 1px solid var(--eq-line);
}
section.framer-fffyu5 .framer-pauLb > .framer-1du2r7h { flex: none; width: auto; padding: 0; }
section.framer-fffyu5 .framer-pauLb > .framer-s7d0qm { flex: 1 1 0; width: auto; padding: 0; }
@media (min-width: 1200px) {
  section.framer-fffyu5 .framer-tuq8vf { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 32px; align-items: baseline; }
}

/* Services, "Questions fréquentes": the questions take the whole right column. */
section.framer-1x95t4s .framer-2tciv0 [class*="-container"],
section.framer-1x95t4s .framer-Z1yf0 { width: 100% !important; max-width: none; }
section.framer-1evj7v0[data-framer-name="Transfer"] { padding-bottom: 96px; }
section.framer-1x95t4s[data-framer-name="FAQs"] { padding-bottom: 96px; }
@media (max-width: 809.98px) {
  section.framer-1evj7v0[data-framer-name="Transfer"],
  section.framer-1x95t4s[data-framer-name="FAQs"] { padding-bottom: 64px; }
}

/* À propos, "Ce qui nous guide": three tinted rows, number and value on the left, its meaning on the right. */
section.framer-1by2p5[data-framer-name="Our promise"] { padding: 96px 0; }
section.framer-1by2p5 .framer-bcfce4 { display: flex; flex-direction: column; gap: 10px; }
section.framer-1by2p5 .framer-bcfce4 [class*="-container"] { width: 100% !important; }
section.framer-1by2p5 .framer-57aW7 { height: auto !important; min-height: 0; gap: 18px; padding: 28px 32px; }
section.framer-1by2p5 .framer-57aW7 > .framer-11yfsq2 { flex-direction: row; justify-content: flex-start; align-items: center; gap: 18px; padding: 0; }
section.framer-1by2p5 .framer-57aW7 .framer-5xv1ze { flex: 1 1 0; width: auto; min-width: 0; }
section.framer-1by2p5 .framer-57aW7 .framer-text { --framer-text-alignment: start !important; }
section.framer-1by2p5 .framer-57aW7 .framer-lt55i9 .framer-text { --framer-text-alignment: center !important; }
@media (min-width: 1200px) {
  section.framer-1by2p5 .framer-57aW7 { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  section.framer-1by2p5 .framer-57aW7 > .framer-11yfsq2 { flex: 0 0 40%; }
  section.framer-1by2p5 .framer-57aW7 > .framer-1b31x2a { flex: 1 1 0; width: auto; }
}
@media (max-width: 809.98px) {
  section.framer-1by2p5[data-framer-name="Our promise"] { padding: 64px 0; }
  section.framer-1by2p5 .framer-57aW7 { padding: 22px; align-items: flex-start; }
}

/* ---------------------------------------------------------------- signature motion */
/* "Précision technique": a blueprint grid traced over the home hero with crop marks and a dimension line
   (built by /assets/js/site.js), the product flying to the quote, the count that bounces, family cards that
   lean towards the pointer (equipement/assets/js/site.js). Everything is skipped with reduced motion. */
.eq-blueprint { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .07; pointer-events: none; }
.eq-blueprint line { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.eq-crop { position: absolute; z-index: 2; width: 22px; height: 22px; color: var(--eq-anise); pointer-events: none; }
.eq-crop path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.eq-crop-tl { top: -12px; left: -12px; }
.eq-crop-tr { top: -12px; right: -12px; transform: rotate(90deg); }
.eq-crop-br { bottom: -12px; right: -12px; transform: rotate(180deg); }
.eq-crop-bl { bottom: -12px; left: -12px; transform: rotate(270deg); }
.eq-dim {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: calc(100% + 8px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--eq-anise);
  font: 600 11px/1 var(--eq-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.eq-dim-rule { position: relative; flex: 1; height: 9px; }
.eq-dim-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor; }
.eq-dim-rule::after { content: ""; position: absolute; top: 0; width: 1px; height: 9px; background: currentColor; }
.eq-dim-rule:first-child { transform-origin: right center; }
.eq-dim-rule:first-child::after { left: 0; }
.eq-dim-rule:last-child { transform-origin: left center; }
.eq-dim-rule:last-child::after { right: 0; }

.eq-fly {
  position: fixed;
  z-index: 26;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--eq-anise);
  color: var(--eq-ink);
  box-shadow: 0 10px 24px -6px rgba(10, 20, 143, .45);
  pointer-events: none;
  will-change: transform;
}
.eq-fly .eq-icon { width: 18px; height: 18px; }
.eq-count-badge { overflow: hidden; }
.eq-count-badge > span { display: block; }

.eq-tilt { transition: transform 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms ease; }
.eq-tilt.eq-tilting { transition: transform 90ms linear, box-shadow 300ms ease; box-shadow: 0 18px 34px -14px rgba(10, 20, 143, .3); }

@media (prefers-reduced-motion: no-preference) {
  .local-hero-ready .eq-blueprint { animation: eq-grid-fade 2600ms ease both; }
  .local-hero-ready .eq-blueprint line { animation: eq-grid-draw 900ms cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--local-i, 0) * 30ms); }
  .local-hero-ready .eq-crop-tl { animation: eq-crop-tl 800ms cubic-bezier(.16, 1, .3, 1) 900ms both; }
  .local-hero-ready .eq-crop-tr { animation: eq-crop-tr 800ms cubic-bezier(.16, 1, .3, 1) 900ms both; }
  .local-hero-ready .eq-crop-br { animation: eq-crop-br 800ms cubic-bezier(.16, 1, .3, 1) 900ms both; }
  .local-hero-ready .eq-crop-bl { animation: eq-crop-bl 800ms cubic-bezier(.16, 1, .3, 1) 900ms both; }
  .local-hero-ready .eq-dim-rule { animation: eq-grow 900ms cubic-bezier(.16, 1, .3, 1) 1200ms both; }
  .local-hero-ready .eq-dim-text { animation: eq-fade-up 500ms cubic-bezier(.16, 1, .3, 1) 1450ms both; }
  /* The family strip passes in a loop (equipement/assets/js/site.js): faded at both ends. */
  section.framer-oijnu5 [data-category-scroll] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .eq-count-badge.eq-bump { animation: eq-bump 560ms cubic-bezier(.34, 1.56, .64, 1); }
  .eq-count-badge.eq-bump > span { animation: eq-roll 420ms cubic-bezier(.16, 1, .3, 1); }

  @keyframes eq-grid-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes eq-grid-fade { 0%, 55% { opacity: .22; } 100% { opacity: .07; } }
  @keyframes eq-crop-tl { from { opacity: 0; transform: translate(-14px, -14px); } }
  @keyframes eq-crop-tr { from { opacity: 0; transform: translate(14px, -14px) rotate(90deg); } }
  @keyframes eq-crop-br { from { opacity: 0; transform: translate(14px, 14px) rotate(180deg); } }
  @keyframes eq-crop-bl { from { opacity: 0; transform: translate(-14px, 14px) rotate(270deg); } }
  @keyframes eq-grow { from { transform: scaleX(0); } }
  @keyframes eq-fade-up { from { opacity: 0; transform: translateY(6px); } }
  @keyframes eq-bump { 40% { scale: 1.4; } }
  @keyframes eq-roll { from { transform: translateY(100%); } }
}

/* Brand line at the top of the home title, as on HOREB Pharma (assets/css/local.css), in anise. */
.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: #88bd0b;
}
