/* Pharmacie Du Dries — Intro section (Figma: Research-Discovery / IntroSection 170:825)
   Base artboard: 1920px. Values below are the exact Figma measurements at that width,
   scaled down fluidly (vw) on smaller screens. */

/* The scale variables are registered as lengths, so the browser works each
   one out once on <html> and every element just inherits the number,
   instead of re-solving the whole formula for every size on the page. */
@property --u   { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --fa  { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --fb  { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --gutter { syntax: "<length>"; inherits: true; initial-value: 20px; }

:root {
  --main-green: #0c4a3f;
  --main-mocha: #e8d8c4;
  --green-dark: #1b4332;
  --green-mid: #116b5b;
  /* page background (was the mocha #fff0dd) */
  --page-bg: #ffffff;
  --bordeaux: #6e001f;
  --grey: #676767;
  --white: #ffffff;

  --font-display: "Momo Trust Display", system-ui, sans-serif;
  --font-sans: "Momo Trust Sans", system-ui, sans-serif;
  --font-serif: "Kadwa", Georgia, serif;
  --font-inter: "Inter", system-ui, sans-serif;

  /* Liquid type: every font size is written as  N * --fa + --fb,  N being the
     Figma size in px: N × 0.6 + 2.5px at 1920, easing to N × 0.48 + 4.5px at
     1100, then to N × 0.38 + 6.5px at 390 (tablet/phone values are set in
     "Tablets and phones" below). Small text barely moves, headings shrink. */
  --fa: clamp(0.48px, calc(0.48px + (100vw - 1100px) * 0.12 / 820), 0.6px);
  --fb: clamp(2.5px, calc(4.5px - (100vw - 1100px) * 2 / 820), 4.5px);

  /* Side gutter: 220px at 1920, easing to 8.33vw (92px) at 1100 and below,
     never under 20px */
  --gutter: clamp(20px, max(8.3333vw, 8.3333vw + (100vw - 1100px) * 0.0732), 220px);
  --content: min(1756px, 100% - 2 * var(--gutter));

  /* One Figma px. Every size below is written as  N * --u: the whole layout
     scales with the window — 0.68 at 1920 (proportional to the content
     width), never under 0.47 on small laptops. Tablets/phones: see below. */
  --u: clamp(0.47px, calc(min(1756px, 100vw - 2 * var(--gutter)) / 2180), 0.8px);
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Page transitions ----------
   Moving between pages of the site cross-fades instead of flashing: the old
   page fades out, the new one fades in while rising slightly. The header and
   the hours card are kept as they are, so only the content changes.
   (Chrome, Edge and Safari; other browsers simply change page as before.) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.hours { view-transition-name: hours-card; }
::view-transition-old(root) {
  animation: page-out .14s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: page-in .28s cubic-bezier(.2, .7, .2, 1) .06s both;
}
/* the header itself doesn't move; only its contents (active link) cross-fade */
::view-transition-group(site-header),
::view-transition-group(hours-card) { animation-duration: .25s; }
@keyframes page-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

/* links to a section of the page glide there instead of jumping */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

html {
  -webkit-text-size-adjust: 100%;
  /* anchor jumps land below the sticky header (height set from JS) */
  scroll-padding-top: calc(var(--header-h, calc(174 * var(--u))) + calc(16 * var(--u)));
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--main-green);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Sticky header (banner + navbar) ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--page-bg);
  /* shadow fades in once the page scrolls (class set in index.html) */
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) rgba(12, 74, 63, 0);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) rgba(12, 74, 63, 0.18); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* ---------- Top banner ---------- */
.topbar {
  background: var(--main-green);
  min-height: calc(64.707 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8 * var(--u)) var(--gutter);
}
.topbar__text {
  margin: 0;
  /* Figma: left: calc(50% - 327px), width 666 → 6px right of true center */
  transform: translateX(calc(6 * var(--u)));
  font-size: calc(22 * var(--fa) + var(--fb));
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}
.topbar__label {
  font-family: var(--font-sans);
  color: var(--main-mocha);
}
.topbar__phone {
  font-family: var(--font-display);
  white-space: nowrap;
  color: var(--white);
}
.topbar__phone:hover { text-decoration: underline; }

/* ---------- Navbar ---------- */
.navbar {
  position: relative;
  width: var(--content);
  height: calc(95 * var(--u));
  margin: calc(13.838 * var(--u)) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(7.3 * var(--u)) rgba(0, 0, 0, 0.15));
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  width: calc(374 * var(--u));
  flex-shrink: 0;
}
.brand__logo { width: calc(47 * var(--u)); height: calc(52 * var(--u)); flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; }
.brand__name {
  font-family: var(--font-display);
  font-size: calc(32 * var(--fa) + var(--fb));
  line-height: 1.0906; /* 34.9px at 32px */
  white-space: nowrap;
}
.brand__place {
  font-family: var(--font-serif);
  font-size: calc(16 * var(--fa) + var(--fb));
  line-height: 1.6618; /* 26.6px at 16px */
  /* Figma: subtitle sits 30.16px below the title's top (overlaps line box) */
  margin-top: -0.2963em; /* subtitle overlaps the title's line box by 4.74px */
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
  width: calc(733 * var(--u));
  height: calc(29 * var(--u));
  font-size: calc(22 * var(--fa) + var(--fb));
  line-height: normal;
  white-space: nowrap;
}
.nav__link {
  font-family: var(--font-sans);
  transition: opacity .15s ease;
}
.nav__link.is-active { font-family: var(--font-display); }
.nav__link:hover { opacity: .7; }

/* Services dropdown: opens on hover (desktop) or with the chevron button */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.nav__sub-toggle {
  display: grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(6 * var(--u));
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav__sub-toggle svg { transition: transform .25s ease; }
.nav__item.is-open .nav__sub-toggle svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute;
  top: calc(100% + calc(26 * var(--u)));
  left: calc(-18 * var(--u));
  z-index: 20;
  min-width: calc(260 * var(--u));
  margin: 0;
  padding: calc(10 * var(--u));
  list-style: none;
  background: var(--white);
  border-radius: calc(16 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(12, 74, 63, 0.16);
  font-size: calc(18 * var(--fa) + var(--fb));
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-6 * var(--u)));
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
/* invisible bridge so the pointer can travel from "Services" to the menu */
.nav__menu::before {
  content: "";
  position: absolute;
  inset: calc(-26 * var(--u)) 0 100%;
}
.nav__item.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nav__menu-link {
  display: block;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  font-family: var(--font-sans);
  color: var(--main-green);
  transition: background-color .15s ease;
}
.nav__menu-link:hover { background: rgba(12, 74, 63, 0.07); }
.nav__menu-link.is-active { font-family: var(--font-display); }
.nav__sub-toggle:focus-visible,
.nav__menu-link:focus-visible {
  outline: 2px solid var(--main-green);
  outline-offset: 2px;
}
@media (min-width: 1101px) {
  .nav__item:hover .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav__item:hover .nav__sub-toggle svg { transform: rotate(180deg); }
}

.lang {
  display: flex;
  /* never so small that the four codes run together */
  width: max(calc(128 * var(--u)), 116px);
  height: max(calc(27.032 * var(--u)), 24px);
  flex-shrink: 0;
  background: var(--white);
  border-radius: calc(7 * var(--u));
  box-shadow: 0 0 calc(12.7 * var(--u)) 0 rgba(0, 0, 0, 0.18);
}
/* On the French-only pages (legal, 404) the language links are hidden: the
   navbar keeps their space so the links stay centred; inside the phone menu
   they take no room at all */
.navbar > .lang[hidden] { display: flex; visibility: hidden; }
.nav > .lang[hidden] { display: none !important; }

.lang__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: max(calc(32 * var(--u)), 29px);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-serif);
  font-size: calc(12 * var(--fa) + var(--fb));
  line-height: normal;
  color: var(--grey);
  cursor: pointer;
  padding-top: 1px;
}
.lang__btn:first-child { border-radius: calc(7 * var(--u)) 0 0 calc(7 * var(--u)); }
.lang__btn:last-child  { border-radius: 0 calc(7 * var(--u)) calc(7 * var(--u)) 0; }
.lang__btn:hover:not(.is-active) { color: var(--main-green); }
.lang__btn.is-active {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: calc(3 * var(--u)) 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.18);
}

.menu-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  /* navbar bottom (173.54) → card top (209.63) */
  margin-top: calc(36.082 * var(--u));
  padding-bottom: calc(5.9 * var(--u)); /* illustration overflows card bottom by 5.9px */
}
.hero__card {
  position: relative;
  /* card width, reused to size the illustration in proportion (654.58 / 1752.37 in Figma) */
  --card-w: min(1752.365px, 100vw - 2 * var(--gutter) - 3.63px);
  /* drawing a little larger than in Figma and moved toward the text, so
     the gap between them is about a third smaller */
  --illus-w: clamp(calc(360 * var(--u)), var(--card-w) * 0.37354, calc(705 * var(--u)));
  --illus-r: calc(var(--card-w) * 0.08);
  width: min(1752.365px, 100% - 2 * var(--gutter) - calc(3.63 * var(--u)));
  min-height: clamp(calc(420 * var(--u)), 31.809vw, calc(610.726 * var(--u)));
  margin: 0 auto;
  background: var(--main-green);
  border-radius: calc(32 * var(--u));
  /* copy block: 133.25px from card left, 155.92px from card top at 1920 */
  padding: clamp(calc(64 * var(--u)), 8.121vw, calc(155.918 * var(--u))) 0 clamp(calc(48 * var(--u)), 5vw, calc(96 * var(--u))) clamp(calc(40 * var(--u)), 6.94vw, calc(133.25 * var(--u)));
}

.hero__copy {
  position: relative;
  z-index: 1;
  /* 910px at 1920; shrinks so it never runs under the illustration */
  /* stops 24px short of the illustration */
  width: min(calc(910 * var(--u)), 100% - var(--illus-w) - var(--illus-r) - calc(24 * var(--u)));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(calc(28 * var(--u)), 2.135vw, calc(41 * var(--u)));
  color: var(--main-mocha);
}
.hero__title {
  margin: 0 0 calc(21 * var(--u));
  max-width: calc(893.483 * var(--u));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(56 * var(--fa) + var(--fb));
  line-height: 1.03;
}
.hero__lead {
  margin: 0;
  max-width: calc(893.483 * var(--u));
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: calc(27 * var(--fa) + var(--fb));
  line-height: 1.16;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--u)) calc(40.168 * var(--u));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  height: clamp(calc(56 * var(--u)), 3.6458vw, calc(70 * var(--u)));
  padding: 0 clamp(calc(20 * var(--u)), 1.3021vw, calc(25 * var(--u)));
  border-radius: calc(32 * var(--u));
  font-family: var(--font-inter);
  font-size: calc(22 * var(--fa) + var(--fb));
  line-height: 1.16;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.btn img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex-shrink: 0; transition: transform .15s ease; }
.btn:hover img { transform: translateX(calc(3 * var(--u))); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--main-mocha);
  color: var(--main-green);
  font-weight: 600;
  box-shadow: 0 calc(4 * var(--u)) calc(3.9 * var(--u)) rgba(0, 0, 0, 0.19);
}
.btn--primary:hover { background: #f1e5d6; }

.btn--secondary {
  background: var(--green-mid);
  color: var(--white);
  font-weight: 400;
}
.btn--secondary:hover { background: #147a68; }

.btn:focus-visible,
.nav__link:focus-visible,
.lang__btn:focus-visible,
.topbar__phone:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--main-mocha);
  outline-offset: calc(3 * var(--u));
}
.navbar .nav__link:focus-visible,
.navbar .brand:focus-visible,
.navbar .lang__btn:focus-visible { outline-color: var(--main-green); }

/* Illustration: 37.35% of the card wide, 3.92% from its right edge, 5.9px below card bottom */
.hero__illustration {
  position: absolute;
  right: var(--illus-r);
  bottom: calc(-5.898 * var(--u));
  width: var(--illus-w);
  aspect-ratio: 654.579 / 552.651;
  overflow: hidden;
  pointer-events: none;
}
.hero__illustration img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 1600px) {
  .nav { width: auto; gap: clamp(calc(24 * var(--u)), 2.5vw, calc(48 * var(--u))); }
  .brand { width: auto; }
}

@media (max-width: 1100px) {
  .navbar { height: calc(80 * var(--u)); }

  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(5 * var(--u));
    order: 3;
    flex-shrink: 0;
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    margin-left: auto;
    margin-right: calc(-10 * var(--u));
    padding: calc(10 * var(--u));
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    height: 2px;
    background: var(--main-green);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-open .menu-toggle span:nth-child(1) { transform: translateY(calc(7 * var(--u))) rotate(45deg); }
  .nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .menu-toggle span:nth-child(3) { transform: translateY(calc(-7 * var(--u))) rotate(-45deg); }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4 * var(--u));
    padding: calc(12 * var(--u));
    background: var(--page-bg);
    border-radius: calc(16 * var(--u));
    box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.12);
    font-size: calc(24 * var(--fa) + var(--fb));
  }
  .nav-open .nav { display: flex; }
  .nav__link { width: 100%; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); }
  .nav__link:hover { opacity: 1; background: rgba(12, 74, 63, 0.06); }

  /* Services sub-list: folds out under "Services" inside the menu */
  .nav__item { width: 100%; flex-wrap: wrap; gap: 0; }
  .nav__item > .nav__link { flex: 1; width: auto; }
  .nav__sub-toggle { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); }
  .nav__menu {
    position: static;
    display: none;
    flex-basis: 100%;
    min-width: 0;
    padding: 0 0 calc(6 * var(--u)) calc(12 * var(--u));
    background: none;
    box-shadow: none;
    font-size: calc(20 * var(--fa) + var(--fb));
  }
  .nav__menu::before { content: none; }
  .nav__item.is-open .nav__menu { display: block; }
  .nav__menu-link { padding: calc(8 * var(--u)) calc(12 * var(--u)); }
}

@media (max-width: 900px) {
  .hero__card {
    padding: calc(48 * var(--u)) calc(28 * var(--u)) 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--u));
  }
  .hero__copy { width: 100%; }
  .hero__title { font-size: calc(56 * var(--fa) + var(--fb)); }
  .hero__lead { font-size: calc(27 * var(--fa) + var(--fb)); }
  .btn { font-size: calc(22 * var(--fa) + var(--fb)); }
  .hero__illustration {
    position: relative;
    right: auto;
    bottom: calc(-5.898 * var(--u));
    width: min(100%, calc(480 * var(--u)));
    align-self: center;
    margin-top: calc(-5.898 * var(--u));
  }
}

@media (max-width: 600px) {
  .topbar__text { white-space: normal; transform: none; }
  .brand { gap: calc(6 * var(--u)); min-width: 0; }
  .brand__logo { width: calc(32 * var(--u)); height: calc(35.4 * var(--u)); }
  .menu-toggle { width: calc(40 * var(--u)); margin-right: calc(-8 * var(--u)); }
  .hero__card { border-radius: calc(24 * var(--u)); padding: calc(36 * var(--u)) calc(20 * var(--u)) 0; }
  .hero__cta { gap: calc(12 * var(--u)); width: 100%; }
  .btn { height: calc(56 * var(--u)); padding: 0 calc(20 * var(--u)); width: 100%; }
}

@media (max-width: 420px) {
  :root { --gutter: calc(20 * var(--u)); }
  .brand__logo { width: calc(28 * var(--u)); height: calc(31 * var(--u)); }
  .menu-toggle { width: calc(36 * var(--u)); padding: calc(9 * var(--u)); }
}

/* ==========================================================================
   Services page hero (Figma: Group 38, 106:2019)
   Same card as the home hero; different copy position, type and artwork.
   ========================================================================== */
.hero--services .hero__card {
  /* "Medicine-bro" artwork: 559px square, 97px from the card's right edge,
     its frame running 34px below the card (only empty space there) */
  --art-w: clamp(calc(300 * var(--u)), var(--card-w) * 0.319, calc(640 * var(--u)));
  --art-r: calc(var(--card-w) * 0.12);
  /* copy block: 145.2px from the left, 187.6px from the top at 1920 */
  padding-top: clamp(calc(64 * var(--u)), 9.7708vw, calc(187.6 * var(--u)));
  padding-left: clamp(calc(40 * var(--u)), 7.5625vw, calc(145.2 * var(--u)));
}
.hero--services .hero__copy {
  width: min(calc(822 * var(--u)), 100% - var(--art-w) - var(--art-r) - calc(24 * var(--u)));
}
.hero--services .hero__title {
  font-size: calc(57 * var(--fa) + var(--fb));
}
.hero--services .hero__lead {
  font-family: "DM Serif Text", Georgia, serif;
  font-weight: 400;
}
/* primary button uses the display face here */
.hero--services .btn--primary {
  font-family: var(--font-display);
  font-weight: 400;
}
.hero--services .hero__cta { column-gap: clamp(calc(20 * var(--u)), 1.771vw, calc(34 * var(--u))); }
.btn__icon--down { transform: rotate(90deg); }
.btn:hover .btn__icon--down { transform: rotate(90deg) translateX(calc(3 * var(--u))); }

.services-art {
  position: absolute;
  /* the drawing fills its image edge to edge, so it takes the space the old
     layered artwork drew in (88% of the box) and sits on the card's bottom */
  right: calc(var(--art-r) + var(--art-w) * 0.06);
  bottom: 0;
  width: calc(var(--art-w) * 0.88);
  height: auto;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero--services .hero__title { font-size: calc(57 * var(--fa) + var(--fb)); }
  .services-art {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: center;
    width: min(100%, calc(370 * var(--u)));
  }
  .hero--services .hero__card { padding: calc(48 * var(--u)) calc(28 * var(--u)) 0; }
  .hero--services .hero__copy { width: 100%; }
}
@media (max-width: 600px) {
  .hero--services .hero__card { padding: calc(36 * var(--u)) calc(20 * var(--u)) 0; }
}

/* ==========================================================================
   Vaccination page hero (Figma: Group 64, 211:1392)
   Same card as the other heroes, a little shorter (556px), with the
   vaccination drawing sitting on the card's bottom edge.
   ========================================================================== */
.hero--vaccination .hero__card {
  /* drawing: 636px of the 1758px card, 144px from its right edge */
  --art-w: clamp(calc(320 * var(--u)), var(--card-w) * 0.3619, calc(690 * var(--u)));
  --art-r: calc(var(--card-w) * 0.12);
  min-height: clamp(calc(400 * var(--u)), 28.964vw, calc(556.114 * var(--u)));
  /* copy block: 151.6px from the left, 175px from the top at 1920 */
  padding-top: clamp(calc(64 * var(--u)), 9.115vw, calc(175.01 * var(--u)));
  padding-left: clamp(calc(40 * var(--u)), 7.897vw, calc(151.63 * var(--u)));
}
.hero--vaccination .hero__copy {
  width: min(calc(870.25 * var(--u)), 100% - var(--art-w) - var(--art-r) - calc(24 * var(--u)));
  gap: clamp(calc(24 * var(--u)), 1.771vw, calc(34 * var(--u)));
}
.hero--vaccination .hero__text { max-width: calc(790.3 * var(--u)); }
.hero--vaccination .hero__title { font-size: calc(57 * var(--fa) + var(--fb)); }
.hero--vaccination .hero__lead {
  font-family: "DM Serif Text", Georgia, serif;
  font-weight: 400;
}
.hero--vaccination .hero__cta { column-gap: clamp(calc(20 * var(--u)), 1.771vw, calc(34 * var(--u))); }

/* Service pages whose drawing is about as tall as wide: it sits narrower */
.hero--portrait-art .hero__card {
  --art-w: clamp(calc(220 * var(--u)), var(--card-w) * 0.2276, calc(480 * var(--u)));
  --art-r: calc(var(--card-w) * 0.2);
}

.vacc-hero__art {
  position: absolute;
  right: var(--art-r);
  bottom: 0;
  width: var(--art-w);
  height: auto;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero--vaccination .hero__card { padding: calc(48 * var(--u)) calc(28 * var(--u)) 0; min-height: 0; }
  .hero--vaccination .hero__copy { width: 100%; }
  .hero--vaccination .hero__title { font-size: calc(57 * var(--fa) + var(--fb)); }
  .vacc-hero__art {
    position: relative;
    right: auto;
    align-self: center;
    width: min(100%, calc(480 * var(--u)));
  }
}
@media (max-width: 900px) {
  .hero--portrait-art .vacc-hero__art { width: min(100%, calc(300 * var(--u))); }
}
@media (max-width: 600px) {
  .hero--vaccination .hero__card { padding: calc(36 * var(--u)) calc(20 * var(--u)) 0; }
}

/* ==========================================================================
   Vaccination page steps (Figma: Group 63, 210:1386)
   Burgundy eyebrow, section title, then three numbered steps in an outlined
   box, separated by thin vertical lines.
   ========================================================================== */
.steps {
  width: min(1743.95px, var(--content));
  /* hero card bottom → eyebrow: 111px (the hero section already adds 5.9px) */
  margin: clamp(calc(48 * var(--u)), 5.474vw, calc(105.1 * var(--u))) auto calc(64.024 * var(--u));
}
/* Conseils santé: other advice topics, names only */
.topics {
  width: min(1743.95px, var(--content));
  margin: 0 auto calc(64.024 * var(--u));
}
.topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
  margin: calc(32 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.topics__item {
  padding: calc(14 * var(--u)) calc(30 * var(--u));
  border: 1px solid var(--main-green);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: calc(24 * var(--fa) + var(--fb));
  line-height: 1.2;
  color: var(--main-green);
}
.steps__link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(12, 74, 63, 0.35); text-underline-offset: 3px; }
.steps__link:hover { text-decoration-color: currentColor; }

/* Garde de nuit: pharmacie.be and the duty numbers stand out as links */
.garde-link {
  /* brighter green than the titles so the links stand out (4.7:1 on white) */
  color: #0b8457;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(11, 132, 87, 0.4);
  text-underline-offset: 0.18em;
  white-space: nowrap;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.garde-link:hover { color: var(--main-green); text-decoration-color: currentColor; }
.garde-link:focus-visible { outline: 2px solid #0b8457; outline-offset: 2px; border-radius: 2px; }

/* ==========================================================================
   Numéros d'urgence & utiles
   ========================================================================== */
/* hero without illustration */
.hero--plain .hero__card { min-height: 0; padding-bottom: clamp(calc(48 * var(--u)), 5vw, calc(96 * var(--u))); }
.hero--plain .hero__copy { width: min(calc(980 * var(--u)), 100%); }

.urgences,
.helplines {
  width: min(1743.95px, var(--content));
  margin: clamp(calc(48 * var(--u)), 5.474vw, calc(105.1 * var(--u))) auto calc(64.024 * var(--u));
}
.urgences__warning {
  margin: calc(16 * var(--u)) 0 0;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 15px;
  color: #d0213a;
}
.urgences__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(20 * var(--u));
  margin: calc(32 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.urgence-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: clamp(18px, calc(28 * var(--u)), 28px);
  border-radius: calc(20 * var(--u));
  background: var(--main-green);
  color: var(--main-mocha);
  text-decoration: none;
  transition: background-color .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}
.urgence-card:hover { background: var(--green-mid); transform: translateY(-3px); }
.urgence-card:focus-visible { outline: 3px solid var(--main-green); outline-offset: 3px; }
.urgence-card__number {
  font-family: var(--font-display);
  font-size: calc(64 * var(--fa) + var(--fb));
  line-height: 1;
  white-space: nowrap;
}
.urgence-card__label {
  font-family: var(--font-inter);
  font-size: 15px;
  line-height: 1.35;
  color: rgba(232, 216, 196, 0.85);
}
.urgences__info {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(20 * var(--u)) calc(40 * var(--u));
  align-items: start;
  margin-top: calc(28 * var(--u));
}
.urgences__box {
  padding: clamp(18px, calc(28 * var(--u)), 28px);
  border: 1px solid rgba(12, 74, 63, 0.18);
  border-radius: calc(20 * var(--u));
}
.urgences__box-title {
  margin: 0 0 10px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  color: var(--main-green);
}
.urgences__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
  font-family: var(--font-inter);
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}
.urgences__list li::marker { color: var(--main-green); }
.urgences__free {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.helplines__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16 * var(--u)) calc(20 * var(--u));
  margin: calc(32 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.helpline {
  padding: clamp(16px, calc(24 * var(--u)), 24px);
  border: 1px solid rgba(12, 74, 63, 0.18);
  border-radius: calc(16 * var(--u));
}
.helpline__name {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--main-green);
}
.helpline__number {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(26 * var(--fa) + var(--fb));
  line-height: 1.2;
  color: #0b8457;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(11, 132, 87, 0.35);
  text-underline-offset: 0.18em;
}
.helpline__number:hover { color: var(--main-green); text-decoration-color: currentColor; }
.helpline__number:focus-visible { outline: 2px solid #0b8457; outline-offset: 2px; border-radius: 2px; }
.helpline__note {
  margin: 6px 0 0;
  font-family: var(--font-inter);
  font-size: 13px;
  line-height: 1.5;
  color: #555;
}

@media (max-width: 1300px) {
  .urgences__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .helplines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .urgences__info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .urgences__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .helplines__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .urgence-card { transition: none; }
  .urgence-card:hover { transform: none; }
}

.topics__item { display: inline-flex; align-items: center; gap: 8px; }
.topics__soon {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--main-green);
  color: var(--main-mocha);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topics__note {
  max-width: 640px;
  margin: calc(24 * var(--u)) 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--main-green);
  background: rgba(12, 74, 63, 0.05);
  border-radius: 0 10px 10px 0;
  font-family: var(--font-inter);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.topics__note strong { color: var(--main-green); font-weight: 600; }
.topics__link {
  color: var(--main-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(12, 74, 63, 0.35);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.topics__link:hover { text-decoration-color: currentColor; }

/* small burgundy label above a section title */
.eyebrow {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: calc(30 * var(--fa) + var(--fb));
  line-height: 1.16;
  color: var(--bordeaux);
}
.steps__box {
  /* title bottom → box: 48px */
  margin-top: clamp(calc(24 * var(--u)), 2.5vw, calc(48 * var(--u)));
  padding: clamp(calc(28 * var(--u)), 2.257vw, calc(43.34 * var(--u))) clamp(calc(20 * var(--u)), 1.4vw, calc(26.9 * var(--u)));
  border: 1px solid var(--main-green);
  border-radius: calc(32 * var(--u));
}
.steps__list {
  display: grid;
  grid-template-columns: 523.9fr 544.13fr 544.13fr;
  column-gap: calc(46 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--main-green);
}
/* thin divider centred in the gap before steps 2 and 3 */
.steps__item + .steps__item::before {
  content: "";
  position: absolute;
  left: calc(-23.5 * var(--u));
  top: calc(12 * var(--u));
  height: min(calc(149.7 * var(--u)), 100% - calc(12 * var(--u)));
  width: 1px;
  background: var(--main-green);
}
.steps__number {
  font-family: var(--font-display);
  font-size: calc(39 * var(--fa) + var(--fb));
  line-height: 1.16;
  color: var(--bordeaux);
}
.steps__name {
  /* number top → title top: 49.9px for a 45px number line */
  margin: calc(4.6 * var(--u)) 0 calc(11 * var(--u));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(39 * var(--fa) + var(--fb));
  line-height: 1.16;
}
.steps__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: calc(24 * var(--fa) + var(--fb));
  line-height: 1.16;
}

/* phones and small tablets: steps stack, divided by horizontal lines */
@media (max-width: 900px) {
  .steps__list { grid-template-columns: minmax(0, 1fr); row-gap: calc(40 * var(--u)); }
  .steps__item + .steps__item::before {
    left: 0;
    top: calc(-20 * var(--u));
    width: 100%;
    height: 1px;
  }
  .steps__box { border-radius: calc(24 * var(--u)); }
}

/* ==========================================================================
   Vaccination page booking form (Figma: Group 62, 210:1385)
   Sent to a Google Apps Script web app that writes the request into the
   pharmacy's Google Calendar (see booking/README.md).
   Form text keeps the design's fixed UI sizes (labels 12px, fields 14px)
   rather than the page's 80% type scale, so it stays legible.
   ========================================================================== */
.booking {
  width: min(1743.95px, var(--content));
  /* steps box bottom → eyebrow: 111px */
  margin: clamp(calc(48 * var(--u)), 5.781vw, calc(111 * var(--u))) auto calc(64.024 * var(--u));
  /* the heading, form card and call bar are centred on the page */
  text-align: center;
}
.booking__card {
  /* title bottom → card: 48px */
  margin: clamp(calc(24 * var(--u)), 2.5vw, calc(48 * var(--u))) auto 0;
  /* the form text stays 14px, so the card keeps room for three fields a row */
  max-width: max(calc(911 * var(--u)), 700px);
  padding: calc(40 * var(--u));
  text-align: left;
  border: 1px solid var(--main-green);
  border-radius: calc(16 * var(--u));
  background: var(--white);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
}
.booking__row {
  display: grid;
  gap: calc(20 * var(--u));
  max-width: max(calc(766 * var(--u)), 620px);
  margin-inline: auto;
}
.booking__row + .booking__row { margin-top: calc(24 * var(--u)); }
.booking__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking__field { display: flex; flex-direction: column; min-width: 0; }
.booking__field--wide { max-width: max(calc(766 * var(--u)), 620px); margin: calc(24 * var(--u)) auto 0; }
.booking__field--wide + .booking__row { margin-top: calc(24 * var(--u)); }

.booking__label {
  padding-bottom: calc(6 * var(--u));
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3333;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #4a4a4a;
}
.booking__input {
  width: 100%;
  /* the text stays 14px, so the box never gets shorter than it needs */
  height: max(calc(46 * var(--u)), 38px);
  padding: 0 max(calc(16 * var(--u)), 12px);
  border: 1px solid rgba(12, 74, 63, 0.55);
  border-radius: calc(8 * var(--u));
  background: #f5f0e8;
  font-family: var(--font-inter);
  font-size: 14px;
  color: #1a1a1a;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.booking__input::placeholder { color: rgba(26, 26, 26, 0.5); }
.booking__input:focus {
  outline: none;
  border-color: var(--main-green);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(12, 74, 63, 0.15);
}
.booking__input:user-invalid { border-color: var(--bordeaux); }
.booking__textarea { height: max(calc(86 * var(--u)), 72px); padding-block: 8px; resize: vertical; line-height: 1.4286; }

.booking__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.booking__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  max-width: max(calc(766 * var(--u)), 620px);
  margin: calc(38 * var(--u)) auto 0;
}
.booking__note {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 12px;
  line-height: 1.3333;
  color: #4a4a4a;
}
.booking__submit {
  padding: calc(14 * var(--u)) calc(32 * var(--u));
  border: 0;
  border-radius: calc(8 * var(--u));
  background: var(--main-green);
  color: var(--white);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4286;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.booking__submit:hover { background: #0f5a4d; }
.booking__submit:active { transform: translateY(1px); }
.booking__submit:focus-visible { outline: 2px solid var(--main-green); outline-offset: calc(3 * var(--u)); }
.booking__submit[disabled] { opacity: .6; cursor: progress; }

.booking__status {
  max-width: max(calc(766 * var(--u)), 620px);
  margin: calc(20 * var(--u)) auto 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.4286;
}
.booking__status[data-state="success"] { background: rgba(12, 74, 63, 0.08); color: var(--main-green); }
.booking__status[data-state="error"] { background: rgba(110, 0, 31, 0.07); color: var(--bordeaux); }

/* touch screens zoom into fields under 16px, so fields use 16px there */
@media (max-width: 1100px) {
  .booking__input { font-size: 16px; }
}
@media (max-width: 640px) {
  .booking__card { padding: calc(24 * var(--u)) calc(20 * var(--u)); }
  .booking__row--2 { grid-template-columns: minmax(0, 1fr); }
  .booking__submit { width: 100%; }
}

/* ==========================================================================
   Services page list (Figma: Frame 427318192, 183:1342)
   Six service cards, 3 × 2. As elsewhere, the green card in Figma is the
   hover / focus state (desktop only). The whole card is clickable through
   its "En Savoir Plus" link.
   ========================================================================== */
.svc-list {
  width: var(--content);
  /* hero card bottom (820.3) → list top (919.6) */
  margin: clamp(calc(40 * var(--u)), 4.861vw, calc(93.34 * var(--u))) auto calc(64.024 * var(--u));
}
.svc-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(31 * var(--u)) calc(20 * var(--u));
}

.svc-card {
  --ease: .6s cubic-bezier(.2, .7, .2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(15 * var(--u));
  padding: clamp(calc(24 * var(--u)), 2.34vw, calc(45 * var(--u)));
  border-radius: calc(29 * var(--u));
  background: var(--white);
  color: var(--main-green);
  box-shadow: calc(3 * var(--u)) calc(-3 * var(--u)) calc(8.85 * var(--u)) rgba(0, 0, 0, 0.12);
  transition: background-color var(--ease), color var(--ease);
}
.svc-card__image {
  align-self: center;
  /* every drawing is 280px tall (as in Figma), so titles line up; a drawing
     too wide for its card is scaled down inside that same height */
  height: calc(280 * var(--u));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* 40px from the art to the title, 15px of it comes from the card's gap */
  margin-bottom: calc(25 * var(--u));
}
/* the vaccination drawing sits on the left edge in the design */
.svc-card--vaccination .svc-card__image { align-self: flex-start; object-position: left bottom; }

.svc-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(37 * var(--fa) + var(--fb));
  line-height: 1.16;
}
.svc-card__text {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: calc(20 * var(--fa) + var(--fb));
  line-height: 1.16;
}
.svc-card__link {
  /* pinned to the bottom of the card, so the links line up across a row */
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(15 * var(--u));
  font-family: var(--font-display);
  font-size: calc(20 * var(--fa) + var(--fb));
  line-height: 1.16;
}
/* stretch the link over the whole card so any click opens the service */
.svc-card__link::after { content: ""; position: absolute; inset: 0; border-radius: calc(29 * var(--u)); }
.svc-card__link:focus-visible { outline: none; }
.svc-card:has(.svc-card__link:focus-visible) { outline: calc(3 * var(--u)) solid var(--main-green); outline-offset: calc(4 * var(--u)); }

.svc-card__icon { display: grid; flex-shrink: 0; }
.svc-card__icon img { grid-area: 1 / 1; width: calc(18.5 * var(--u)); height: calc(18.5 * var(--u)); transition: opacity var(--ease); }
.svc-card__icon-hover { opacity: 0; }

@media (min-width: 1101px) {
  .svc-card:is(:hover, :focus-within) { background: var(--main-green); color: var(--white); }
  .svc-card:is(:hover, :focus-within) .svc-card__icon-hover { opacity: 1; }
  .svc-card:is(:hover, :focus-within) .svc-card__icon-rest { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card * { transition-duration: 0s !important; }
}

/* tablets and phones: one swipeable row, like the other card rows */
@media (max-width: 1100px) {
  .svc-list__grid {
    display: flex;
    gap: calc(16 * var(--u));
    margin-inline: calc(-1 * var(--gutter));
    padding: calc(12 * var(--u)) var(--gutter) calc(28 * var(--u));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .svc-list__grid::-webkit-scrollbar { display: none; }
  .svc-card {
    flex: 0 0 auto;
    width: calc((20 * var(--fa) + var(--fb)) * 17);
    padding: calc(22 * var(--u));
    scroll-snap-align: start;
  }
  .svc-card__image { height: calc(170 * var(--u)); margin-bottom: calc(10 * var(--u)); }
}

/* ==========================================================================
   Services page FAQ (Figma: FAQ Section, 175:784)
   Five question cards and a green "other question" card, 3 per row.
   The questions are accordions (<details>): only the question shows until
   it is opened, and opening one closes the others (name="faq").
   ========================================================================== */
.faq {
  width: var(--content);
  /* services list bottom → FAQ title: 92.9px (collapses with the list's 64px margin) */
  margin: clamp(calc(40 * var(--u)), 4.84vw, calc(92.93 * var(--u))) auto calc(64.024 * var(--u));
}
.faq__title {
  margin: 0 0 clamp(calc(28 * var(--u)), 2.5vw, calc(48 * var(--u)));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(52 * var(--fa) + var(--fb));
  line-height: normal;
  color: var(--main-green);
}
.faq__grid {
  display: grid;
  /* 556px cards with 24px gaps: 1716px of the 1756px row, left-aligned */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: calc(24 * var(--u));
}
.faq-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding: clamp(calc(24 * var(--u)), 1.875vw, calc(36 * var(--u)));
  border-radius: calc(24 * var(--u));
  background: var(--white);
  box-shadow: calc(3 * var(--u)) calc(-3 * var(--u)) calc(8.85 * var(--u)) rgba(0, 0, 0, 0.12);
}
.faq-card__question {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(18 * var(--fa) + var(--fb));
  line-height: 1.3;
  color: var(--main-green);
}
.faq-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: max(calc(40 * var(--u)), 30px);
  height: max(calc(40 * var(--u)), 30px);
  border-radius: 50%;
  background: var(--main-green);
  color: var(--main-mocha);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(20 * var(--fa) + var(--fb));
  line-height: normal;
}
.faq-card__answer {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: calc(16 * var(--fa) + var(--fb));
  line-height: 1.5;
  color: #444;
}

.faq-card__answer > p { margin: 0; }
.faq-card__list {
  display: grid;
  gap: calc(8 * var(--u));
  margin: calc(8 * var(--u)) 0 0;
  padding-left: 1.2em;
}
.faq-card__list li::marker { color: var(--main-green); }
.faq-card__list strong { font-weight: 600; color: var(--main-green); }

/* ---------- Accordion questions ---------- */
.faq-card--item {
  display: block;
  /* lets the answer slide open (browsers without support just open it) */
  interpolate-size: allow-keywords;
}
.faq-card__summary {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  list-style: none;
  cursor: pointer;
  border-radius: calc(12 * var(--u));
}
.faq-card__summary::-webkit-details-marker { display: none; }
.faq-card__summary .faq-card__question { flex: 1; }
.faq-card__summary:focus-visible { outline: 2px solid var(--main-green); outline-offset: calc(6 * var(--u)); }

/* round "+" that turns into "×" when the answer is open */
.faq-card__toggle {
  position: relative;
  flex-shrink: 0;
  width: max(calc(48 * var(--u)), 36px);
  height: max(calc(48 * var(--u)), 36px);
  border-radius: 50%;
  background: rgba(12, 74, 63, 0.08);
  transition: background-color .3s ease, transform .3s ease;
}
/* the + is two bars, 40% of the circle wide */
.faq-card__toggle::before,
.faq-card__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--main-green);
  transform: translate(-50%, -50%);
  transition: background-color .3s ease;
}
.faq-card__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-card__summary:hover .faq-card__toggle { background: rgba(12, 74, 63, 0.16); }
.faq-card--item[open] .faq-card__toggle { background: var(--main-green); transform: rotate(45deg); }
.faq-card--item[open] .faq-card__toggle::before,
.faq-card--item[open] .faq-card__toggle::after { background: var(--main-mocha); }

.faq-card--item .faq-card__answer { padding-top: calc(12 * var(--u)); }
.faq-card--item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
}
.faq-card--item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .faq-card--item::details-content,
  .faq-card__toggle { transition: none; }
}

/* the contact card: green, 20px top/bottom padding (226px tall in the design,
   now sized to its content so it sits better beside the closed questions) */
.faq-card--contact {
  padding-block: calc(20 * var(--u));
  background: var(--main-green);
}
.faq-card--contact .faq-card__question { color: var(--main-mocha); }
.faq-card--contact .faq-card__badge { background: var(--main-mocha); color: var(--main-green); }
.faq-card--contact .faq-card__answer { color: var(--white); }
.faq-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(14 * var(--u)) calc(24 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--main-mocha);
  color: var(--main-green);
  font-family: var(--font-display);
  font-size: calc(18 * var(--fa) + var(--fb));
  line-height: normal;
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.faq-card__button:hover { background: #f1e5d6; }
.faq-card__button:active { transform: translateY(1px); }
.faq-card__button:focus-visible { outline: 2px solid var(--main-mocha); outline-offset: calc(3 * var(--u)); }

/* Vaccination page: booking call bar bottom → FAQ title is 130px */
.faq--vaccination { margin-top: clamp(calc(64 * var(--u)), 6.771vw, calc(130 * var(--u))); }

/* White cards keep a light outline now that the page itself is white */
.svc-card,
.faq-card--item,
.legal__toc,
.legal__section,
.contact-panel { border: 1px solid rgba(12, 74, 63, 0.12); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: max(calc(120 * var(--u)), 64px);
  background: var(--main-green);
  color: var(--main-mocha);
  font-family: var(--font-sans);
}
.site-footer__inner {
  width: var(--content);
  margin-inline: auto;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:focus-visible { outline: 2px solid var(--main-mocha); outline-offset: 3px; border-radius: 2px; }

/* top: logo on the left, phone and e-mail large on the right */
.site-footer__top {
  display: grid;
  /* same split as the row below, so the phone lines up with Navigation */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 24px 32px;
  align-items: start;
  padding: max(calc(56 * var(--u)), 36px) 0;
  border-bottom: 1px solid rgba(232, 216, 196, 0.18);
}
.site-footer__brand { width: auto; }
.site-footer__reach { display: flex; flex-direction: column; gap: 6px; }
.site-footer__big {
  width: fit-content;
  font-size: clamp(22px, 1.9vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .6s cubic-bezier(.2, .7, .2, 1);
}
.site-footer__big:hover { background-size: 100% 1px; }

/* middle: about + button on the left, three link columns on the right */
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 40px 32px;
  padding: max(calc(64 * var(--u)), 40px) 0 max(calc(88 * var(--u)), 48px);
}
.site-footer__tagline {
  max-width: 340px;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}
.site-footer__address {
  margin: 14px 0 0;
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(232, 216, 196, 0.8);
}
.site-footer__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--main-mocha);
  color: var(--main-green) !important;
  font-size: 15px;
  transition: background-color .6s cubic-bezier(.2, .7, .2, 1);
}
.site-footer__cta:hover { background: #fff; }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}
.site-footer__heading {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--main-mocha);
}
.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer__col a {
  color: rgba(232, 216, 196, 0.8);
  font-size: 15px;
  line-height: 1.4;
  transition: color .6s cubic-bezier(.2, .7, .2, 1);
}
.site-footer__col a:hover { color: var(--main-mocha); }

/* bottom: copyright and back-to-top in grey */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  padding-bottom: 28px;
  font-size: 14px;
  color: rgba(232, 216, 196, 0.75);
}
.site-footer__copy { margin: 0; font-size: 12px; }
.site-footer__top-link { color: rgba(232, 216, 196, 0.75) !important; transition: color .6s cubic-bezier(.2, .7, .2, 1); }
.site-footer__top-link:hover { color: var(--main-mocha) !important; }

@media (max-width: 900px) {
  .site-footer__top,
  .site-footer__main { grid-template-columns: 1fr; }
}
@media (max-width: 1300px) and (min-width: 901px) {
  /* four columns need more of the row than the description */
  .site-footer__top,
  .site-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); }
}
@media (max-width: 560px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom { flex-direction: column; }
}
.booking__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Legal pages (mentions légales, politique de confidentialité) ---------- */
.legal__header {
  width: var(--content);
  margin: max(calc(72 * var(--u)), 40px) auto 0;
}
.legal__intro {
  max-width: 640px;
  margin: 16px 0 0;
  font-family: var(--font-inter);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.legal__date {
  margin: 12px 0 0;
  font-family: var(--font-inter);
  font-size: 13px;
  color: var(--grey);
}
.legal__body {
  /* a comfortable reading column, aligned with the title on the left */
  width: min(860px, 100% - 2 * var(--gutter));
  margin: max(calc(40 * var(--u)), 28px) 0 0 max(var(--gutter), (100% - 1756px) / 2);
}
.legal__toc,
.legal__section {
  margin-bottom: 20px;
  padding: max(calc(36 * var(--u)), 22px);
  border-radius: max(calc(24 * var(--u)), 16px);
  background: var(--white);
  box-shadow: calc(3 * var(--u)) calc(-3 * var(--u)) calc(8.85 * var(--u)) rgba(0, 0, 0, 0.08);
}
.legal__toc-title,
.legal__section .legal__num {
  margin: 0 0 10px;
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.legal__toc ol { margin: 0; padding-left: 22px; font-family: var(--font-inter); font-size: 14px; line-height: 1.9; }
.legal__toc a { color: var(--main-green); text-underline-offset: 3px; }
.legal__toc a:hover { text-decoration: underline; }
.legal__h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(34 * var(--fa) + var(--fb));
  line-height: 1.2;
  color: var(--main-green);
}
.legal__section p {
  margin: 0 0 12px;
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.75;
  color: #222;
}
.legal__section p:last-child { margin-bottom: 0; }
.legal__section a { color: var(--main-green); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(12, 74, 63, 0.3); text-underline-offset: 3px; }
.legal__section a:hover { text-decoration-color: currentColor; }
.legal__grid,
.legal__rights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
.legal__grid > div,
.legal__rights > div {
  padding: 14px 16px;
  border-radius: 12px;
  background: #f5f0e8;
}
.legal__grid dt,
.legal__rights dt {
  margin-bottom: 4px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c5c5c;
}
.legal__rights dt { color: var(--main-green); }
.legal__grid dd,
.legal__rights dd {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.45;
  color: #1a1a1a;
}
.legal__rights dd { font-size: 13px; color: #444; }
.legal__table-wrap { margin: 0 0 14px; overflow-x: auto; }
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-inter);
  font-size: 13px;
  line-height: 1.5;
}
.legal__table th {
  padding: 10px 14px;
  background: rgba(12, 74, 63, 0.08);
  color: var(--main-green);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.legal__table th:first-child { border-radius: 10px 0 0 10px; }
.legal__table th:last-child { border-radius: 0 10px 10px 0; }
.legal__table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(12, 74, 63, 0.1);
  color: #1a1a1a;
  vertical-align: top;
}
.legal__table td:first-child { width: 40%; }
.legal__callout {
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--main-green);
}
.legal__section .legal__callout p { color: var(--white); }
.legal__section .legal__callout a { color: var(--main-mocha); text-decoration-color: rgba(232, 216, 196, 0.5); }
.legal__section .legal__callout .legal__callout-title {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--main-mocha);
}
.not-found__links { margin: 0; padding-left: 20px; font-family: var(--font-inter); font-size: 16px; line-height: 2; }
.not-found__links a { color: var(--main-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Horaires & Contact page ---------- */
.contact-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: max(calc(24 * var(--u)), 16px);
  width: var(--content);
  margin: max(calc(96 * var(--u)), 56px) auto 0;
}
.contact-panel {
  padding: max(calc(40 * var(--u)), 24px);
  border-radius: max(calc(24 * var(--u)), 16px);
  background: var(--white);
  box-shadow: 0 2px 6px rgba(12, 74, 63, 0.12), 0 16px 40px -8px rgba(12, 74, 63, 0.32);
}
.contact-panel .eyebrow { margin: 0 0 4px; }
.contact-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(44 * var(--fa) + var(--fb));
  line-height: 1.16;
  color: var(--main-green);
}
.contact-panel .contact-card__info { max-width: none; }
.contact-panel__note {
  margin: 18px 0 0;
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}
.contact-panel__note a { color: var(--main-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* "Ouvert maintenant · jusqu'à 19h00" */
.week-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(110, 0, 31, 0.07);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  color: var(--bordeaux);
}
.week-status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.week-status.is-open { background: rgba(34, 197, 94, 0.12); color: #146c3a; }

.week {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(12, 74, 63, 0.15);
  font-family: var(--font-inter);
  font-size: 15px;
}
.week__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(12, 74, 63, 0.15);
  color: #333;
}
.week__time { font-variant-numeric: tabular-nums; color: var(--main-green); }
.week__time.is-closed { color: #888; }
.week__row.is-today { font-weight: 700; color: var(--main-green); }
.week__row.is-today .week__day::after {
  content: "Aujourd'hui";
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--main-green);
  color: var(--main-mocha);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 1px;
}
:lang(nl) .week__row.is-today .week__day::after { content: "Vandaag"; }
:lang(en) .week__row.is-today .week__day::after { content: "Today"; }
:lang(es) .week__row.is-today .week__day::after { content: "Hoy"; }

/* the inline contact form follows the left-aligned card */
.contact-card .booking__row,
.contact-card .booking__field--wide,
.contact-card .booking__footer,
.contact-card .booking__status { margin-left: 0; }

@media (max-width: 1100px) {
  .contact-page { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contact dialog (the FAQs' "Contactez-nous") ---------- */
.contact-dialog {
  width: min(600px, 100% - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--main-green);
  border-radius: 16px;
  background: var(--white);
  color: var(--main-green);
  box-shadow: 0 24px 64px rgba(12, 74, 63, 0.28);
  overflow: auto;
}
.contact-dialog::backdrop { background: rgba(12, 40, 34, 0.45); }
/* the page behind stays put while the dialog is open */
html:has(.contact-dialog[open]) { overflow: hidden; }
.contact-dialog__form { position: relative; padding: 36px 36px 28px; }
.contact-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 74, 63, 0.08);
  color: var(--main-green);
  cursor: pointer;
  transition: background-color .15s ease;
}
.contact-dialog__close:hover { background: rgba(12, 74, 63, 0.16); }
.contact-dialog__close:focus-visible { outline: 2px solid var(--main-green); outline-offset: 2px; }
.contact-dialog__eyebrow { margin: 0 0 4px; font-size: 18px; }
.contact-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.16;
}
.contact-dialog__intro {
  margin: 10px 0 22px;
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.55;
  color: #444;
}
/* inside the dialog the form fields fill its width */
.contact-dialog .booking__row,
.contact-dialog .booking__field--wide,
.contact-dialog .booking__footer,
.contact-dialog .booking__status { max-width: none; }
.contact-dialog .booking__field--wide { margin-top: 18px; }
.contact-dialog .booking__footer { margin-top: 24px; }
/* opens with a short fade and rise */
.contact-dialog[open] { animation: dialog-in .3s cubic-bezier(.2, .7, .2, 1); }
.contact-dialog[open]::backdrop { animation: backdrop-in .3s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .contact-dialog[open], .contact-dialog[open]::backdrop { animation: none; }
}
@media (max-width: 640px) {
  .contact-dialog__form { padding: 28px 20px 22px; }
  .contact-dialog__title { font-size: 26px; }
  .contact-dialog .booking__row--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contact card (service pages without a form) ----------
   Sits where the form is on Vaccination / Ordonnances: same centred section
   and white card, with the phone, address and hours, and one or two actions. */
/* left-aligned, like the other sections' titles */
.booking.contact { text-align: left; }
.booking.contact .booking__card { margin-left: 0; }
.contact-card { text-align: left; }
.contact-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(30 * var(--fa) + var(--fb));
  line-height: 1.2;
  color: var(--main-green);
}
.contact-card__lead {
  max-width: max(calc(640 * var(--u)), 520px);
  margin: 0;
  font-family: var(--font-inter);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.contact-card__lead + .contact-card__lead { margin-top: 12px; }
.contact-card__warning-label { color: var(--bordeaux); }
.contact-card__info {
  /* one column, three rows (phone, address, hours) at every screen size;
     in each row the label sits beside its value */
  display: grid;
  max-width: max(calc(560 * var(--u)), 460px);
  margin: max(calc(28 * var(--u)), 22px) 0 0;
  border-block: 1px solid rgba(12, 74, 63, 0.15);
}
.contact-card__info > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 0;
}
.contact-card__info > div + div { border-top: 1px solid rgba(12, 74, 63, 0.15); }
.contact-card__info dt {
  margin: 0;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3333;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #4a4a4a;
}
.contact-card__info dd {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-green);
}
.contact-card__info a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(12, 74, 63, 0.3); text-underline-offset: 3px; }
.contact-card__info a:hover { text-decoration-color: currentColor; }
/* Ordonnances: the three ways to send or reserve, one per row */
.rx-options {
  display: grid;
  max-width: max(calc(720 * var(--u)), 560px);
  margin: max(calc(28 * var(--u)), 22px) 0 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid rgba(12, 74, 63, 0.15);
}
.rx-option { padding: 16px 0; }
.rx-option + .rx-option { border-top: 1px solid rgba(12, 74, 63, 0.15); }
.rx-option__title {
  margin: 0 0 4px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--main-green);
}
.rx-option__text {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}
.rx-option__text a { color: var(--main-green); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(12, 74, 63, 0.3); text-underline-offset: 3px; overflow-wrap: anywhere; }
.rx-option__text a:hover { text-decoration-color: currentColor; }
.contact-card > .rx-options:first-child { margin-top: 0; border-top: 0; }
.contact-card > .rx-options:first-child > .rx-option:first-child { padding-top: 0; }
.rx-options + .contact-card__info { max-width: max(calc(720 * var(--u)), 560px); margin-top: 0; border-top: 0; }
.contact-card__note {
  margin: max(calc(20 * var(--u)), 16px) 0 0;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  /* a clear emergency red (not the dark bordeaux), still 5.3:1 on white */
  color: #d0213a;
}
.contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: max(calc(28 * var(--u)), 20px);
}
.contact-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 28px;
  border: 1px solid var(--main-green);
  border-radius: 8px;
  background: var(--main-green);
  color: var(--white);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease;
}
.contact-card__action:hover { background: #136050; }
.contact-card__action--ghost { background: transparent; color: var(--main-green); }
.contact-card__action--ghost:hover { background: rgba(12, 74, 63, 0.07); }
.contact-card__action:focus-visible { outline: 2px solid var(--main-green); outline-offset: 3px; }
@media (max-width: 640px) {
  .contact-card__action { width: 100%; }
}
/* the smallest phones: the label goes above its value */
@media (max-width: 360px) {
  .contact-card__info > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Other services (service pages) — Figma 219:1450 ----------
   A row of six outlined cards; the current page's card is filled green.
   Desktop hover slides in an arrow (tablets/phones: arrow always shown). */
.other-svc {
  width: var(--content);
  /* FAQ grid bottom → title: 111px (collapses with the FAQ's 64px margin) */
  margin: clamp(calc(56 * var(--u)), 5.781vw, calc(111 * var(--u))) auto calc(64 * var(--u));
}
.other-svc__title {
  margin: 0 0 clamp(calc(24 * var(--u)), 2.135vw, calc(41 * var(--u)));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(52 * var(--fa) + var(--fb));
  line-height: normal;
  color: var(--main-green);
}
.other-svc__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(20 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.other-svc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--u));
  height: 100%;
  min-height: clamp(calc(84 * var(--u)), 5.44vw, calc(104.446 * var(--u)));
  padding: calc(18 * var(--u)) calc(44 * var(--u)) calc(18 * var(--u)) calc(23 * var(--u));
  border: 0.5px solid var(--main-green);
  border-radius: calc(29 * var(--u));
  color: var(--main-green);
  transition: background-color .6s ease, border-color .6s ease;
}
.other-svc__name {
  font-family: var(--font-display);
  font-size: calc(25 * var(--fa) + var(--fb));
  line-height: normal;
}
.other-svc__sub {
  font-family: var(--font-sans);
  font-size: calc(16 * var(--fa) + var(--fb));
  line-height: normal;
}
.other-svc__arrow {
  position: absolute;
  right: calc(18 * var(--u));
  bottom: calc(18 * var(--u));
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  opacity: 0;
  transform: translateX(calc(-8 * var(--u)));
  transition: opacity .6s ease, transform .6s ease;
}
/* current page: filled, centred, a touch larger (27 / 17px) */
.other-svc__card.is-current {
  align-items: center;
  padding-inline: calc(15 * var(--u));
  text-align: center;
  background: var(--main-green);
  border-color: var(--main-mocha);
  color: var(--main-mocha);
}
.other-svc__card.is-current .other-svc__name { font-size: calc(27 * var(--fa) + var(--fb)); }
.other-svc__card.is-current .other-svc__sub { font-size: calc(17 * var(--fa) + var(--fb)); }
.other-svc__card.is-current .other-svc__arrow { display: none; }
.other-svc__card:focus-visible {
  outline: 2px solid var(--main-green);
  outline-offset: calc(3 * var(--u));
}
@media (min-width: 1101px) {
  .other-svc__card:not(.is-current):hover { background: rgba(12, 74, 63, 0.05); }
  .other-svc__card:hover .other-svc__arrow,
  .other-svc__card:focus-visible .other-svc__arrow { opacity: 1; transform: none; }
}
@media (min-width: 1101px) and (max-width: 1365px) {
  .other-svc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  /* one row that scrolls sideways, like the other card rows */
  .other-svc__list {
    --bleed: var(--gutter);
    display: flex;
    gap: calc(12 * var(--u));
    margin-inline: calc(-1 * var(--bleed));
    padding: calc(4 * var(--u)) var(--bleed) calc(12 * var(--u));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bleed);
    scrollbar-width: none;
  }
  .other-svc__list::-webkit-scrollbar { display: none; }
  .other-svc__list li { flex: 0 0 auto; width: clamp(calc(200 * var(--u)), 54vw, calc(240 * var(--u))); scroll-snap-align: start; }
  .other-svc__card { border-radius: calc(24 * var(--u)); }
  .other-svc__arrow { opacity: 1; transform: none; }
}

/* tablets: two columns */
@media (max-width: 1100px) {
  .faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: the questions stack, so every answer stays readable */
@media (max-width: 700px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); }
}

/* ==========================================================================
   Promotions (Figma: DiscountDesction 80:2863)
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.promos {
  width: min(1752.365px, 100% - 2 * var(--gutter) - calc(3.63 * var(--u)));
  /* hero section bottom (826.25) → title top (884.38) */
  margin: calc(58.127 * var(--u)) auto 0;
}

/* Promotions not live yet: products blurred and faded, a notice on top */
.promos__soon { position: relative; }
.promos__soon > .promos__grid {
  filter: blur(6px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.promos__notice {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(max(calc(560 * var(--u)), 420px), calc(100% - 32px));
  padding: clamp(20px, calc(36 * var(--u)), 36px) clamp(20px, calc(40 * var(--u)), 40px);
  border-radius: calc(24 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(12, 74, 63, 0.12), 0 16px 40px -8px rgba(12, 74, 63, 0.32);
  text-align: center;
}
.promos__notice-badge {
  display: inline-block;
  margin: 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--main-green);
  color: var(--main-mocha);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.promos__notice-text {
  margin: 14px 0 0;
  font-family: var(--font-inter);
  font-size: 15px;
  line-height: 1.55;
  color: #333;
}

/* Section heading row, shared by Promotions and Services */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(8 * var(--u)) calc(24 * var(--u));
  padding-left: 1.27px;
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(68 * var(--fa) + var(--fb));
  line-height: 1.16;
  color: var(--main-green);
}
.section-link {
  display: inline-flex;
  align-items: center;
  gap: calc(13.818 * var(--u));
  /* link text sits 22px below the title's top at 1920 */
  margin-top: clamp(calc(8 * var(--u)), 1.1458vw, calc(22 * var(--u)));
  font-family: var(--font-sans);
  font-size: calc(35 * var(--fa) + var(--fb));
  line-height: 1.16;
  color: var(--main-green);
  white-space: nowrap;
}
.section-link img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); transition: transform .15s ease; }
.section-link:hover img { transform: translateX(calc(4 * var(--u))); }
.section-link:focus-visible { outline: 2px solid var(--main-green); outline-offset: calc(4 * var(--u)); border-radius: calc(4 * var(--u)); }

/* Services heading: title inset 6.09px, serif link 19px down, arrow 28px after the text */
.section-header--services { padding-left: calc(6.087 * var(--u)); }
.section-header--services .section-link {
  gap: calc(28.007 * var(--u));
  margin-top: clamp(calc(7 * var(--u)), 0.9896vw, calc(19 * var(--u)));
  font-family: "DM Serif Text", Georgia, serif;
}

.promos__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(20.78 * var(--u));
  /* cards span 1747.96px of the 1752.37px row */
  padding-right: calc(4.405 * var(--u));
  /* title bottom (963.38) → cards top (1019.46) */
  margin-top: clamp(calc(28 * var(--u)), 2.9208vw, calc(56.079 * var(--u)));
}

/* ---------- Product card ----------
   Resting state is the light card; the green card from Figma is the hover
   (and keyboard-focus) state: the image grows to 260px, the "- 40%" tab
   slides in and the colours flip. */
.product {
  --ease: .6s cubic-bezier(.2, .7, .2, 1);
  /* image grows from 228.53px to 260px, centred on the Figma hover position */
  --hover-scale: 1.13769;
  --hover-shift: translate(calc(5.74 * var(--u)), calc(-3.4 * var(--u)));
  position: relative;
  height: calc(573.523 * var(--u));
  border-radius: calc(32 * var(--u));
  background: #fdeded;
  /* light outline + soft shadow so the card reads on the white page */
  border: 1px solid rgba(12, 74, 63, 0.1);
  box-shadow: 0 2px 6px rgba(12, 74, 63, 0.12), 0 16px 40px -8px rgba(12, 74, 63, 0.32);
  transition: background-color var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.product__image {
  position: absolute;
  /* 228.53px image, 6px left of the card's centre */
  left: calc(50% - calc(120.45 * var(--u)));
  top: calc(101.82 * var(--u));
  width: calc(228.533 * var(--u));
  height: calc(228.533 * var(--u));
  object-fit: cover;
  /* hover shadow is -1px 23px 30.3px once scaled, so pre-divided by --hover-scale */
  filter: drop-shadow(-0.88px calc(20.22 * var(--u)) calc(26.63 * var(--u)) rgba(0, 0, 0, 0));
  transition: transform var(--ease), filter var(--ease);
}

.product__badge {
  position: absolute;
  top: calc(57.936 * var(--u));
  right: 0;
  z-index: 1;
  /* sized by its text and centred, so it fits at every screen size;
     always visible (it no longer waits for the hover) */
  display: flex;
  align-items: center;
  gap: 0.15em;
  height: max(calc(43.883 * var(--u)), 1.9em);
  margin: 0;
  padding: 0 0.7em 0 0.85em;
  background: var(--main-mocha);
  border-radius: 999px 0 0 999px;
  font-family: var(--font-display);
  font-size: calc(24 * var(--fa) + var(--fb));
  line-height: 1;
  color: #0c493f;
  white-space: nowrap;
}

.product__info {
  position: absolute;
  left: 0.7px;
  right: 0.7px;
  bottom: 0;
  /* grows upwards when the price has to wrap under the availability tag */
  min-height: calc(188.469 * var(--u));
  /* 45px left inset at 1920, never below 20px on narrower cards */
  padding: calc(24 * var(--u)) calc(23 * var(--u)) calc(37 * var(--u)) max(calc(20 * var(--u)), min(calc(45 * var(--u)), 100% - calc(375 * var(--u))));
  border-radius: calc(32 * var(--u));
  background: #f8e8e8;
  box-shadow: 0 calc(-3 * var(--u)) calc(29.7 * var(--u)) rgba(0, 0, 0, 0.1);
  color: var(--main-green);
  transition: background-color var(--ease), box-shadow var(--ease), color var(--ease);
}


/* star and plus icons: both colours are stacked, the hover one fades in */
.product__icon { transition: opacity var(--ease); }
.product__icon--hover { opacity: 0; }

.product__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(352.152 * var(--u));
  height: calc(23 * var(--u));
}
.product__category {
  font-family: var(--font-sans);
  font-size: calc(20 * var(--fa) + var(--fb));
  line-height: 1.16;
  transition: color var(--ease);
}

.product__rating {
  display: grid;
  font-family: var(--font-display);
  font-size: calc(19 * var(--fa) + var(--fb));
  line-height: 1.16;
}
.product__rating > * { grid-area: 1 / 1; }
.product__rating img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(3.986 * var(--u)); }
.product__rating span { margin-left: calc(20.152 * var(--u)); }

.product__name {
  max-width: calc(352.152 * var(--u));
  margin: calc(10.5 * var(--u)) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(26 * var(--fa) + var(--fb));
  line-height: 1.16;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product__actions {
  display: flex;
  /* the price drops under the tag whenever the card is too narrow for both */
  flex-wrap: wrap;
  row-gap: calc(8 * var(--u));
  align-items: center;
  /* 46px at full size, tightening on narrow cards */
  column-gap: max(calc(10 * var(--u)), min(calc(46 * var(--u)), 100% - calc(302 * var(--u))));
  max-width: calc(352 * var(--u));
  margin-top: calc(23.34 * var(--u));
}

.product__stock {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  flex-shrink: 0;
  height: calc(40 * var(--u));
  margin: 0;
  padding: 0 calc(18 * var(--u)) 0 calc(14 * var(--u));
  border: 1px solid rgba(12, 74, 63, 0.35);
  border-radius: calc(32 * var(--u));
  font-family: var(--font-display);
  font-size: calc(17 * var(--fa) + var(--fb));
  line-height: 1.16;
  white-space: nowrap;
  transition: border-color var(--ease), color var(--ease);
}
.product__stock-icon { flex-shrink: 0; width: 1em; height: 1em; }

.product__price {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--u));
  margin: 0;
  white-space: nowrap;
  line-height: 1.16;
}
.product__price-old {
  font-family: var(--font-sans);
  font-size: calc(24 * var(--fa) + var(--fb));
  color: #6c8c7e;
  text-decoration: line-through;
}
.product__price-new {
  font-family: var(--font-display);
  font-size: calc(27 * var(--fa) + var(--fb));
}

@media (prefers-reduced-motion: reduce) {
  .product, .product * { transition-duration: 0s !important; }
}

/* ==========================================================================
   Services (Figma: OurServices 179:848)
   Like the promo cards, the green card in Figma is the hover / focus state:
   the card turns green, the title turns white in the display face and an
   arrow slides in beside it.
   ========================================================================== */
.services {
  width: min(1752.365px, 100% - 2 * var(--gutter) - calc(3.63 * var(--u)));
  /* more room above now that the team band no longer separates it from the promotions */
  margin: min(calc(110 * var(--u)), 80px) auto calc(64.024 * var(--u));
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(16 * var(--u));
  /* title bottom (79) → cards top (111.99) */
  margin-top: clamp(calc(20 * var(--u)), 1.7182vw, calc(32.988 * var(--u)));
}

.service {
  --ease: .6s cubic-bezier(.2, .7, .2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  min-height: calc(374 * var(--u));
  /* 45px above the art; less below, since Figma's cards are a fixed 374px */
  padding: calc(45 * var(--u)) clamp(calc(20 * var(--u)), 2.34vw, calc(45 * var(--u))) calc(32 * var(--u));
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: calc(29 * var(--u));
  background: var(--white);
  color: var(--main-green);
  box-shadow: calc(3 * var(--u)) calc(-3 * var(--u)) calc(8.85 * var(--u)) rgba(0, 0, 0, 0.12);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.service:focus-visible { outline: calc(3 * var(--u)) solid var(--main-mocha); outline-offset: calc(3 * var(--u)); }

.service__image {
  flex-shrink: 0;
  /* every drawing gets the same height, so the titles line up across cards */
  height: calc(215 * var(--u));
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.service__title {
  display: flex;
  align-items: center;
  /* gap and arrow width open up on hover so the title + arrow stay centred */
  gap: 0;
  transition: gap var(--ease);
}
.service__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(37 * var(--fa) + var(--fb));
  line-height: 1.16;
  white-space: nowrap;
}
.service__arrow {
  display: block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width var(--ease), opacity var(--ease);
}
.service__arrow img { width: calc(27.618 * var(--u)); height: calc(21.195 * var(--u)); max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .service, .service * { transition-duration: 0s !important; }
}


/* ==========================================================================
   Nous Rendre Visite (Figma: Group 45, 101:701)
   Title and contact details on the left; the map on the right links to
   Google Maps in a new tab, with a hint shown on hover / focus.
   ========================================================================== */
.visit {
  width: min(1752.365px, 100% - 2 * var(--gutter) - calc(3.63 * var(--u)));
  margin: 0 auto calc(64.024 * var(--u));
  display: grid;
  /* map is 804.76px of the 1752.37px row at 1920 */
  grid-template-columns: minmax(0, 1fr) 45.924%;
  grid-template-rows: auto 1fr;
  column-gap: calc(32 * var(--u));
}
.visit__title {
  grid-column: 1;
  padding-left: calc(11.433 * var(--u));
}

.visit__info {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  /* blocks are 97.77px apart; each is two 31.32px lines */
  gap: calc(35.13 * var(--u));
  /* title top → first block 114.77px, title is 78.88px tall */
  margin: calc(35.89 * var(--u)) 0 0;
  padding-left: calc(22.195 * var(--u));
}
.visit__item dt {
  font-family: var(--font-display);
  font-size: calc(22 * var(--fa) + var(--fb));
  /* the label shares the value's 27px line box in Figma */
  line-height: calc((27 * var(--fa) + var(--fb)) * 1.16);
  color: var(--main-green);
}
.visit__item dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: calc(27 * var(--fa) + var(--fb));
  line-height: 1.16;
  color: #000;
}
/* Transport: trams, buses and stations in three separate groups */
.transit {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: calc(16 * var(--u)) clamp(calc(28 * var(--u)), 3vw, calc(56 * var(--u)));
  margin-top: calc(10 * var(--u));
}
.transit__head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0 0 calc(8 * var(--u));
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(22 * var(--fa) + var(--fb));
  line-height: 1.2;
  color: var(--main-green);
}
.transit__icon {
  flex-shrink: 0;
  box-sizing: content-box;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  min-width: 15px;
  min-height: 15px;
  padding: calc(7 * var(--u));
  border-radius: 50%;
  background: var(--main-green);
  color: var(--main-mocha);
}
.transit__lines {
  display: grid;
  gap: calc(4 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(20 * var(--fa) + var(--fb));
  line-height: 1.35;
  color: #333;
}
.transit__lines strong { font-weight: 600; color: var(--main-green); }
@media (max-width: 1300px) {
  .transit { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 600px) {
  .transit { grid-template-columns: minmax(0, 1fr); }
}

.visit__plus { font-family: "DM Serif Display", Georgia, serif; }
.visit__item a { color: inherit; text-decoration: none; }
.visit__item a:hover { text-decoration: underline; text-underline-offset: calc(4 * var(--u)); }
.visit__item a:focus-visible { outline: 2px solid var(--main-green); outline-offset: calc(3 * var(--u)); border-radius: calc(4 * var(--u)); }

.visit__map {
  --ease: .3s ease;
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: block;
  /* map top sits 36.43px below the title top; right edge 2.18px short of the row */
  margin: calc(36.423 * var(--u)) calc(2.182 * var(--u)) 0 0;
  aspect-ratio: 804.756 / 520.936;
  max-width: 100%;
  border-radius: calc(37 * var(--u));
  overflow: hidden;
  cursor: pointer;
}
.visit__map > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* green tint so the hint reads as "this whole map is a link" */
.visit__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 74, 63, 0.28);
  opacity: 0;
  transition: opacity var(--ease);
}
.visit__map-hint {
  position: absolute;
  left: 50%;
  bottom: calc(28 * var(--u));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(48 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(24 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--main-mocha);
  color: var(--main-green);
  font-family: var(--font-display);
  font-size: calc(20 * var(--fa) + var(--fb));
  line-height: 1.16;
  white-space: nowrap;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, calc(12 * var(--u)));
  transition: opacity var(--ease), transform var(--ease);
}
/* north-east arrow = opens somewhere else */
.visit__map-hint img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); transform: rotate(-45deg); }

.visit__map:focus-visible { outline: calc(3 * var(--u)) solid var(--main-green); outline-offset: calc(4 * var(--u)); }


@media (prefers-reduced-motion: reduce) {
  .visit__map, .visit__map * { transition-duration: 0s !important; }
  .visit__map:is(:hover, :focus-visible) > img { transform: none; }
}

@media (max-width: 1099px) {
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit__map { grid-column: 1; grid-row: auto; margin: calc(40 * var(--u)) 0 0; }
}
@media (max-width: 600px) {
  .visit__map { border-radius: calc(24 * var(--u)); }
  .visit__map-hint { bottom: calc(16 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(18 * var(--u)); }
  .visit__info, .visit__title { padding-left: 0; }
  .visit__item dd { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Floating opening hours (from the "Horaires du Dries" component)
   Collapsed to its header in the bottom-right corner; the week slides open
   above the header.
   ========================================================================== */
.hours {
  --green-light: #d4eae4;
  --ink: #1a1a1a;
  --ink-muted: #5c5c5c;
  --open-dot: #22c55e;
  --closed-dot: #ef4444;
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-width: calc(100% - 32px);
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(12, 74, 63, 0.18), 0 2px 8px rgba(12, 74, 63, 0.10);
  overflow: hidden;
  font-family: "Inter", system-ui, sans-serif;
  transition: box-shadow .3s ease;
}
.hours:hover { box-shadow: 0 12px 40px rgba(12, 74, 63, 0.22), 0 4px 12px rgba(12, 74, 63, 0.12); }

.hours__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-top: 1px solid transparent;
  background: var(--white);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color .25s ease;
}
.hours.is-expanded .hours__header { border-top-color: var(--green-light); }
.hours__header:focus-visible { outline: 2px solid var(--main-green); outline-offset: -4px; border-radius: 14px; }

.hours__header-left { display: flex; flex-direction: column; gap: 4px; }
.hours__title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}
.hours__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
}
.hours__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--closed-dot);
}
.hours__dot.is-open {
  background: var(--open-dot);
  animation: hours-pulse 2s ease-in-out infinite;
}
@keyframes hours-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.hours__header-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* the title stays on one line; a long "ouvre demain à 08h30" wraps instead,
   so the chevron button always stays visible */
.hours__title { white-space: nowrap; }
.hours__today {
  font-size: 13px;
  font-weight: 600;
  color: var(--main-green);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* chevron points up (the list opens upwards) and flips down to close */
.hours__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--main-green);
  transition: background-color .2s, color .2s;
}
.hours__chevron svg { transform: rotate(180deg); transition: transform .3s ease; }
.hours.is-expanded .hours__chevron { background: var(--main-green); color: var(--white); }
.hours.is-expanded .hours__chevron svg { transform: rotate(0deg); }

.hours__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}
.hours.is-expanded .hours__body { max-height: 500px; }

.hours__list { margin: 0; padding: 6px 20px 4px; list-style: none; }
.hours__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0 -20px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--green-light);
}
.hours__row:last-child { border-bottom: 0; }
.hours__row.is-today {
  margin: 2px -8px;
  padding-inline: 8px;
  border-color: transparent;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(12, 74, 63, 0.07) 0%, rgba(12, 74, 63, 0.03) 100%);
}
.hours__day {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.hours__row.is-today .hours__day { font-weight: 600; color: var(--main-green); }
.hours__badge {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--main-green);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hours__time {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.hours__row.is-today .hours__time { font-weight: 700; color: var(--main-green); }
.hours__time.is-closed { font-weight: 400; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .hours, .hours * { transition: none !important; animation: none !important; }
}

/* the footer leaves room at its bottom so the floating card never covers it */
.site-footer { padding-bottom: calc(76px + 24px + 16px); }

/* phones: full-width bar along the bottom edge */
@media (max-width: 600px) {
  .hours {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    left: 12px;
    max-width: none;
  }
}

/* ==========================================================================
   Card and map hover states: desktop only
   (tablets and phones show the resting cards, and the map's hover look as
   its normal state; see below)
   ========================================================================== */
@media (min-width: 1101px) {
  .product:is(:hover, :focus-within) {
    background: var(--main-green);
    border-color: var(--main-green);
    box-shadow: 0 2px 6px rgba(12, 74, 63, 0), 0 16px 40px -8px rgba(12, 74, 63, 0);
  }
  .product:is(:hover, :focus-within) .product__image {
    transform: var(--hover-shift) scale(var(--hover-scale));
    filter: drop-shadow(-0.88px calc(20.22 * var(--u)) calc(26.63 * var(--u)) rgba(0, 0, 0, 0.21));
  }
  .product:is(:hover, :focus-within) .product__info {
    background: var(--main-green);
    box-shadow: 0 calc(-3 * var(--u)) calc(30.6 * var(--u)) rgba(0, 0, 0, 0.14);
    color: var(--main-mocha);
  }
  .product:is(:hover, :focus-within) .product__icon--hover { opacity: 1; }
  .product:is(:hover, :focus-within) .product__icon--rest { opacity: 0; }
  .product:is(:hover, :focus-within) .product__category { color: rgba(234, 234, 234, 0.68); }
  .product:is(:hover, :focus-within) .product__stock { border-color: rgba(232, 216, 196, 0.5); }
  .service:is(:hover, :focus-visible) {
    background: var(--main-green);
    border-color: transparent;
    color: var(--white);
  }
  .service:is(:hover, :focus-visible) .service__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: calc(38 * var(--fa) + var(--fb));
  }
  .service:is(:hover, :focus-visible) .service__title { gap: calc(40 * var(--u)); }
  .service:is(:hover, :focus-visible) .service__arrow { width: calc(27.907 * var(--u)); opacity: 1; }
  .visit__map:is(:hover, :focus-visible) > img { transform: scale(1.03); }
  .visit__map:is(:hover, :focus-visible)::after { opacity: 1; }
  .visit__map:is(:hover, :focus-visible) .visit__map-hint { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Tablets and phones (≤ 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
  /* Liquid type: size = Figma px × --fa + --fb, both following the screen width.
     At 1100px: × 0.48 + 4.5px (a 68px title → 37px); at 390px: × 0.38 + 6.5px
     (68px → 32px, 27px body → 17px, 17px button → 13px). */
  :root {
    --fa: clamp(0.38px, calc(0.38px + (100vw - 390px) * 0.1 / 710), 0.48px);
    --fb: clamp(4.5px, calc(6.5px - (100vw - 390px) * 2 / 710), 6.5px);
    /* sizes: 0.9 of the Figma size on phones, easing to 0.7 on large tablets */
    --u: clamp(0.7px, calc(0.9px - (100vw - 390px) * 0.2 / 710), 0.9px);
  }
  /* the banner line runs a little smaller than the scale so it fits on two lines */
  .topbar__text { font-size: calc(19 * var(--fa) + var(--fb)); }
  /* the long subtitle under the logo stays a notch smaller than the scale */
  .brand__place { font-size: calc(16 * var(--fa) + var(--fb) - 4px); }

  /* Language selector lives at the bottom of the menu (moved there by script) */
  .nav .lang {
    width: auto;
    height: calc(40 * var(--u));
    margin: calc(8 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u));
    box-shadow: 0 0 0 1px rgba(12, 74, 63, 0.14);
  }
  .nav .lang__btn {
    width: calc(52 * var(--u));
    font-size: calc(14 * var(--fa) + var(--fb));
  }

  /* Cards: smaller, no hover, one horizontal row that scrolls (and snaps)
     edge to edge instead of stacking. */
  .promos__grid,
  .services__grid {
    /* bleed to the screen edges; cards start and snap on the page margin */
    --bleed: calc(var(--gutter) + 1.815px);
    display: flex;
    gap: calc(16 * var(--u));
    margin-inline: calc(-1 * var(--bleed));
    padding: calc(12 * var(--u)) var(--bleed) calc(28 * var(--u));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bleed);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .promos__grid::-webkit-scrollbar,
  .services__grid::-webkit-scrollbar { display: none; }
  .promos__grid { margin-top: calc(16 * var(--u)); }
  .services__grid { margin-top: calc(8 * var(--u)); }

  .product,
  .service { flex: 0 0 auto; scroll-snap-align: start; }

  /* card width follows the button's text size so button + price always fit
     (≈ 276px on phones, 315px at 1100px) */
  .product { width: calc((17 * var(--fa) + var(--fb)) * 20); height: calc(400 * var(--u)); }
  .product__image { left: calc(50% - calc(85 * var(--u))); top: calc(40 * var(--u)); width: calc(170 * var(--u)); height: calc(170 * var(--u)); }
  .product__info {
    height: auto;
    padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  }
  .product__name { margin-top: calc(6 * var(--u)); }
  /* the price sits under the availability label on these narrow cards */
  .product__actions { flex-wrap: wrap; gap: calc(8 * var(--u)) calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
  .product__stock { height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); }

  .service {
    width: calc(240 * var(--u));
    min-height: 0;
    gap: calc(20 * var(--u));
    padding: calc(24 * var(--u)) calc(20 * var(--u));
  }
  .service__image { height: calc(150 * var(--u)); width: auto; max-width: 100%; object-fit: contain; }

  /* Map: the hover look is the normal state */
  .visit__map::after { opacity: 1; }
  .visit__map > img { transform: scale(1.03); }
  .visit__map-hint { opacity: 1; transform: translate(-50%, 0); }
}