/* ===== RDV Button under specialty cards (specialites.html) ===== */
.specialty-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.specialty-card-wrap .specialty-card {
  border-radius: 12px 12px 0 0;
  margin-bottom: 0 !important;
}
.btn-rdv-card {
  display: block;
  text-align: center;
  background: #738b69;
  color: #fff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.15s ease;
}
.btn-rdv-card:hover {
  background: #5a6c52;
  transform: translateY(-1px);
}
.btn-rdv-card::before {
  content: "\f073";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
}
/* ============================================================
   CABINET DENTAIRE CÔTÉ GARE BUSSIGNY
   Stylesheet global - identique au site original
   Palette: #738b69 (vert principal) / #5a6c52 (vert hover)
   Fonts: Inter (texte) / Playfair Display (titres de section) / Plus Jakarta Sans (titre de bannière)
   ============================================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #212529;
  line-height: 1.6;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #738b69; text-decoration: none; transition: color 0.25s ease; }
a:hover { color: #5a6c52; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===== VARIABLES ===== */
:root {
  --primary: #738b69;
  --primary-dark: #5a6c52;
  --primary-light: #e8f0e3;
  --text-dark: #212529;
  --text-medium: #4a5568;
  --text-light: #888;
  --bg-light: #fafafa;
  --bg-section: #f5f6f3;
  --bg-dark: #1a1a1a;
  --border: #e5e7eb;
  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);
  /* One type system. Body, lists, forms, nav, buttons and card titles are
     Inter; the section headings (h2) are Playfair Display; Plus Jakarta Sans
     is the page title (h1) and nothing else. */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Playfair Display', serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --h1-size: clamp(1.8rem, 3.2vw, 2.5rem);
  --h2-size: clamp(1.5rem, 2.5vw, 2rem);
  --h3-size: 1.125rem;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-dark);
}
/* Page titles outside the banners (booking page, landing pages): the banner
   typeface at a size that suits a title on white. */
h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: 600;
}
/* Section headings: Playfair Display, one weight, one case, one scale. */
/* The titles of the split and feature blocks on the corporate pages are h3
   elements that stand as section headings, so they share the h2 style. */
h2,
.lc-split__text h3,
.nc-feature__content h3 {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
/* Card, step, question and price-item titles: Inter 600, one size. */
h3, h4, h5, h6 {
  font-size: var(--h3-size);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
p { margin-bottom: 1rem; }

/* ===== CONTAINERS ===== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}
.btn-outline {
  background: var(--white);
  color: var(--text-dark);
  border-color: var(--white);
}
.btn-outline:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.btn-sm { padding: 8px 20px; font-size: 0.8rem; }

/* ===== HEADER ===== */
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-top: 4px solid #c9c1ad;
}
/* script.js used to write a box-shadow into this element's style attribute on
   every scroll event. It never rendered: all four header states are claimed by
   an !important box-shadow further down (lines ~3099, ~3147, ~3461, ~3487),
   and an inline style without !important loses to those. The write is gone and
   nothing replaces it. */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 40px 0;
  position: relative;
}
.header-contact-left, .header-contact-right {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.95rem;
  color: #000;
  flex: 1;
}
.header-contact-right { justify-content: flex-end; }
.header-contact-left a, .header-contact-right a {
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
}
.header-contact-left a:hover, .header-contact-right a:hover { color: #738b69; }
.header-contact-left i, .header-contact-right i { color: #738b69; }
.logo-center {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  z-index: 5;
}
.logo-center a { display: block; }
.logo-center img { height: 92px; width: auto; display: block; }
.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 40px;
  position: relative;
}
.nav-left, .nav-right { flex: 1; display: flex; align-items: center; }
.nav-left { justify-content: flex-start; padding-right: 130px; }
.nav-right { justify-content: flex-end; padding-left: 130px; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}
.main-nav > a, .has-submenu > a {
  color: #2a2a2a;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.3s;
  padding: 6px 0;
  white-space: nowrap;
}
.main-nav > a:hover, .has-submenu > a:hover { color: #738b69; }
.has-submenu { position: relative; }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #f5f6f3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  min-width: 260px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s;
  z-index: 200;
  list-style: none;
  margin: 0;
}
.has-submenu:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li a {
  display: block;
  padding: 10px 20px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.submenu li a:hover { background: #d8e6cf; color: #738b69; }
.main-nav .btn-primary, .main-nav a.btn {
  background: #738b69;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
  transition: background 0.3s, transform 0.2s;
  margin-left: 4px;
}
.main-nav .btn-primary:hover, .main-nav a.btn:hover { background: #5a6c52; color: #fff !important; }
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 16px;
}
.mobile-menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #2a2a2a;
  margin: 5px 0;
  border-radius: 8px;
  transition: 0.3s;
}
/* The desktop nav needs 1427px to lay itself out. Below that the viewport cut
   it off: CONTACT, EXCELLENCE, CARRIÈRE and PRENDRE RDV were painted past the
   right edge, and `overflow-x: hidden` on body meant nothing scrolled to reach
   them - measured at 1025, 1100, 1280 and 1400, all clipped. The switch to the
   hamburger now happens at 1100, the same width where the tall logo stops, and
   the band below tightens the nav so it fits between 1101 and 1400. */
@media (max-width: 1100px) {
  .nav-left { padding-right: 0; }
  .nav-right { padding-left: 0; justify-content: flex-end; }
  .nav-left .main-nav, .nav-right .main-nav:not(.mobile-keep) { display: none; }
  .mobile-menu-toggle { display: block; }
  .logo-center img { height: 90px; }
}
/* No upper bound. The nav at full size needs about 1427px, and the header is
   capped at 1400 with 40 of padding either side - 1320 of room - so above 1400
   it was not clipped by the window but it did push out past its own container,
   which is why PRENDRE RDV sat further right than the language switcher above
   it. Tightened at every desktop width, it fits inside the container and the
   two rows line up. */
@media (min-width: 1101px) {
  .nav-left { padding-right: 56px; }
  .nav-right { padding-left: 56px; }
  .main-nav { gap: 4px; }
  .main-nav > a, .has-submenu > a { font-size: 0.85rem; letter-spacing: 0.3px; }
}
@media (max-width: 900px) {
  .header-top { padding: 12px 20px 0; font-size: 0.85rem; }
  .header-contact-left, .header-contact-right { gap: 10px; font-size: 0.82rem; }
  .logo-center img { height: 70px; }
  .header-main { padding: 14px 20px; }
  .nav-left .main-nav, .nav-right .main-nav:not(.mobile-keep) { display: none; }
  .nav-left { padding-right: 0; }
  .nav-right { padding-left: 0; justify-content: flex-end; }
  .mobile-menu-toggle { display: block; }
  .main-nav .btn-primary { padding: 10px 18px; font-size: 0.78rem; }
}
@media (max-width: 600px) {
  .header-top { padding: 10px 14px 0; }
  .header-contact-left { font-size: 0.78rem; }
  .logo-center img { height: 58px; }
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  height: calc(100vh - 160px);
  min-height: 600px;
  overflow: hidden;
}
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8vh;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%);
}
.hero-content {
  position: relative;
  text-align: center;
  color: var(--white);
  max-width: 100%;
  padding: 0 24px;
  z-index: 2;
}
.hero-title {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1rem, 2.6vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  margin-bottom: 36px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.hero-title .line { display: block !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; }
/* The two lines are held on one line each so the break falls where it was
   written. At 360 the first line needs 350px against 312 available, and
   `nowrap` sent the end of "des dents," off the screen. Below 600 the lines
   wrap and the type can go back up to a readable size. The !important here
   only matches the ones above it - nothing weaker can reach these rules. */
@media (max-width: 600px) {
  .hero-title { font-size: 1.15rem !important; letter-spacing: 1px !important; white-space: normal !important; }
  .hero-title .line { white-space: normal !important; }
}
.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-arrows {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  pointer-events: none;
  z-index: 5;
}
.hero-arrows button {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.hero-arrows button:hover { background: rgba(255,255,255,0.4); }

/* ===== FLOATING BUTTONS (WhatsApp, Lang) ===== */
/* ===== COOKIE CONSENT =====
   Built by script.js rather than written into 47 pages. Sits above the
   floating bar so it cannot be hidden behind it. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px 24px;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.consent-banner.is-visible { transform: translateY(0); }
.consent-text {
  margin: 0;
  max-width: 760px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-medium);
}
.consent-text a { color: var(--primary); text-decoration: underline; }
.consent-actions { display: flex; gap: 12px; }
.consent-btn {
  /* 44px tall: this is a phone-first audience and these are the only two
     controls that stand between a visitor and the page. */
  min-height: 44px;
  min-width: 120px;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
/* Refusing is as easy to find as accepting, which is the point of asking. */
.consent-refuse {
  background: var(--white);
  color: var(--text-dark);
  border: 1px solid var(--border);
}
.consent-refuse:hover { background: var(--bg-section); }
.consent-accept {
  background: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
}
.consent-accept:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.consent-btn:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
@media (max-width: 600px) {
  .consent-banner { gap: 12px; padding: 16px; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: none; }
}

.floating-side {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* White on --primary is 3.73:1 at this size; --primary-dark clears 4.5:1. */
  background: var(--primary-dark);
  color: var(--white);
  padding: 14px 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease;
}
.floating-btn:hover { background: var(--primary-dark); color: var(--white); }
.floating-btn.lang-btn { background: #2c2c2c; }
.floating-btn.lang-btn:hover { background: var(--primary); }

/* ===== MOBILE ACTION BAR =====
   Phones only, and a deliberate difference from the desktop layout. Measured
   at 360: the homepage runs 26 screens, spécialités 20, and on tarifs and
   conseils there was no way to call or to book from the content at all - a
   patient reading prices had to scroll eleven screens to the footer or go back
   into the menu. The two things somebody on a phone came for now sit on the
   screen the whole time.

   It is hidden above 768px, where the header carries both already. ===== */
.mobile-bar { display: none; }

@media (max-width: 768px) {
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 96;
    gap: 1px;
    background: var(--border);
    /* The home indicator on an iPhone sits over the bottom edge. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
  }
  .mobile-bar__btn {
    flex: 1;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    padding: 8px 10px;
    text-align: center;
  }
  .mobile-bar__btn i { font-size: 1rem; }
  .mobile-bar__btn--call {
    background: var(--white);
    color: var(--primary-dark);
  }
  .mobile-bar__btn--rdv {
    background: var(--primary-dark);
    color: var(--white);
  }
  .mobile-bar__btn:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
  /* Only one button left: let it take the width. */
  .mobile-bar--single .mobile-bar__btn { flex: 1 1 100%; }

  /* The bar is fixed, so the end of the footer would sit underneath it. */
  body { padding-bottom: 56px; }

  /* And the assistant moves up to clear it. */
  .assistant { bottom: 70px; }
}

/* ===== ASSISTANT =====
   A bubble bottom-right that answers from the site's own published questions.
   The floating bar above sits mid-height on the right edge, so the two do not
   collide; below 768 the panel takes the whole screen instead of floating.
   Nothing here loads until someone opens it — see script.js. */
.assistant {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
}
/* Same sage as the ÊTRE RAPPELÉ and WHATSAPP buttons beside it. White on
   --primary-dark measures 5.6:1; on --primary it would be 3.73:1, under the
   floor for a label this size, which is why the buttons here all use the dark
   one. What makes this button carry is its shape and its wording, not a colour
   of its own. */
.assistant-bubble {
  position: relative;
  min-width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--primary-dark);
  color: var(--white);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px 0 20px;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(43, 54, 38, 0.34);
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.assistant-bubble__label {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
/* No colour change on hover: the palette has nothing darker than
   --primary-dark, and --primary would drop the label to 3.73:1. It lifts
   instead. */
.assistant-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(43, 54, 38, 0.42);
}
.assistant-bubble:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 3px; }

/* A ring that leaves the button and fades, the way a notification does. It
   animates transform and opacity only, so it never costs a layout. */
.assistant-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--primary-dark);
  animation: assistant-ring 2.6s ease-out 4;
  pointer-events: none;
}
@keyframes assistant-ring {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
/* The panel is open: the ring has done its job and would only distract. */
.assistant.is-open .assistant-bubble::after { animation: none; }
.assistant-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  border: 2px solid var(--white);
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  display: none;
}
.assistant.is-calling .assistant-badge { display: block; }
/* The browser blocks a sound before the visitor has clicked anything, so the
   bubble draws attention by moving instead. */
.assistant.is-calling .assistant-bubble { animation: assistant-nudge 1.4s ease-in-out 3; }
@keyframes assistant-nudge {
  0%, 100% { transform: translateY(0) rotate(0); }
  15% { transform: translateY(-6px) rotate(-8deg); }
  30% { transform: translateY(0) rotate(6deg); }
  45% { transform: translateY(-3px) rotate(-4deg); }
  60% { transform: translateY(0) rotate(0); }
}

.assistant-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 360px;
  max-height: min(560px, calc(100vh - 120px));
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.assistant-panel[hidden] { display: none; }
.assistant-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--primary-dark);
  color: var(--white);
}
.assistant-head img { width: 40px; height: 40px; border-radius: 50%; background: var(--white); padding: 3px; }
.assistant-eyebrow { font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; margin: 0; }
.assistant-name { font-size: 0.95rem; font-weight: 600; margin: 0; }
.assistant-close {
  margin-left: auto;
  width: 44px;
  height: 44px;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
}
.assistant-close:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }

.assistant-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-section);
}
.assistant-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.assistant-msg--bot { background: var(--white); color: var(--text-dark); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.assistant-msg--me { background: var(--primary-dark); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
.assistant-msg a { color: var(--primary-dark); font-weight: 600; text-decoration: underline; }
.assistant-msg--me a { color: var(--white); }

.assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
  background: var(--bg-section);
}
.assistant-chip {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-dark);
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 0.82rem;
  min-height: 36px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.assistant-chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.assistant-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.assistant-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.assistant-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 11px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--text-dark);
}
.assistant-form input:focus { outline: none; border-color: var(--primary); }
.assistant-form button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
}
.assistant-form button:hover { background: var(--primary); }
.assistant-form button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.assistant-note {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-light);
}
.assistant-note a { color: var(--primary-dark); font-weight: 600; }
.assistant-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .assistant { right: 14px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  /* Open, the panel is the whole screen, so it has to sit above the site
     header (its close button was underneath) and above the bar. */
  .assistant.is-open { z-index: 1000; }
  .assistant-bubble {
    min-width: 56px;
    height: 56px;
    border-radius: 28px;
    font-size: 1.25rem;
    gap: 8px;
    padding: 0 18px 0 16px;
  }
  .assistant-bubble__label { font-size: 0.88rem; }
  /* Full screen rather than a floating card: a 360px panel on a 360px phone
     leaves nothing around it, and the keyboard takes half of what is left. */
  .assistant-panel {
    position: fixed;
    inset: 0;
    width: auto;
    max-height: none;
    border-radius: 0;
  }
  .assistant-form input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant.is-calling .assistant-bubble { animation: none; }
  .assistant-bubble::after { animation: none; }
  .assistant-bubble:hover { transform: none; }
}

.lang-dropdown {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  min-width: 60px;
  margin-right: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.lang-dropdown.active { opacity: 1; visibility: visible; }
.lang-dropdown a {
  display: block;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--text-dark);
  writing-mode: horizontal-tb;
  text-align: center;
}
.lang-dropdown a:hover { background: var(--primary-light); }

/* ===== WELCOME SECTION ===== */
.welcome-section {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(rgba(40,50,40,0.55), rgba(40,50,40,0.65)),
              url('images/bg-page-hero.webp') center/cover fixed;
  color: var(--white);
  text-align: center;
}
.welcome-section h2 {
  color: var(--white);
  margin-bottom: 18px;
}
.welcome-section .divider {
  width: 80px;
  height: 1px;
  background: var(--white);
  margin: 18px auto 28px;
}
.welcome-subtitle {
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--white);
}
.welcome-tagline {
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}
.welcome-section p {
  max-width: 720px;
  margin: 0 auto 18px;
  font-size: 0.97rem;
  line-height: 1.8;
}
.welcome-section h3 {
  color: var(--white);
  margin: 36px 0 18px;
}
.welcome-section .highlight {
  font-style: italic;
  font-weight: 600;
  margin: 30px 0 24px;
}
.welcome-cta { margin-top: 24px; }

/* ===== OFFRES BAND (parallax) ===== */
.offers-band {
  position: relative;
  /* The pale green, in place of a photograph darkened almost to black. One
     fewer full-width image to fetch, and the band stops shouting over the
     sections either side of it. */
  background: var(--primary-light);
  /* 60 held 162px of content inside 336. 24 here and 18 under the title bring
     the band to 254 on a desktop; the phone takes it to 226. */
  padding: 24px 0;
  color: var(--text-dark);
}
.offers-band-title {
  text-align: center;
  color: var(--text-dark);
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.offers-carousel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.offers-track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: offers-scroll 40s linear infinite;
  will-change: transform;
}
.offers-carousel:hover .offers-track {
  animation-play-state: paused;
}
.offers-track .offer-item {
  flex: 0 0 320px;
  min-width: 320px;
}
@keyframes offers-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .offers-track .offer-item { flex: 0 0 260px; min-width: 260px; }
  .offers-track { animation-duration: 30s; }
}
.offer-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
}
.offer-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  /* Was knocked out to white for the dark band; now the opposite, so the line
     art reads on the pale green. */
  filter: brightness(0);
}
.offer-text { flex: 1; }
.offer-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}
/* The pill stays green and the figure inside it goes black - 5.9:1, which
   clears the 4.5 floor comfortably. */
.offer-price {
  display: inline-block;
  padding: 6px 22px;
  border: 2px solid var(--primary);
  background: var(--primary);
  color: #000000;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* ===== SERVICES SECTION ===== */
.services-section {
  position: relative;
  padding: 90px 0;
  background: var(--bg-section);
}
.services-section .section-title { color: #2a2a2a; }
.services-section .service-content h3 { color: #2a2a2a; }
.services-section .service-card { background: transparent; }
.section-title {
  text-align: center;
  color: var(--white);
  margin-bottom: 60px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.service-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  display: block;
}
.service-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  transition: transform 0.3s ease;
}
.service-card:hover { transform: translateY(-6px); }
.service-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } 
.service-card:hover .service-media img { transform: scale(1.05); }
.service-content { padding: 18px 8px 24px; text-align: left; }
.service-content h3 {
  color: #fff;
  margin-bottom: 10px;
}
.service-link {
  display: inline-block;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.service-link:hover { border-color: var(--primary); }
/* The homepage services as pill buttons: white inside, a dark green border,
   capitals, rounded all the way. They sit on a grid of equal pills, four to a
   row (two on a tablet or a phone), so twenty of them make five tidy rows and
   the longer names wrap onto a second line inside the same height. */
.service-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.service-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 68px;
  padding: 10px 22px;
  border: 2px solid var(--primary-dark);
  border-radius: 999px;
  background: var(--white);
  color: var(--text-dark);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.service-pill:hover,
.service-pill:focus-visible { background: var(--primary-light); }
.service-pill:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service-pill:hover { transform: translateY(-2px); }
}
@media (max-width: 900px) {
  .service-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .service-pills { gap: 10px; padding: 0 16px; }
  .service-pill { min-height: 60px; padding: 8px 12px; font-size: 0.78rem; }
}

/* ===== GALLERY ===== */
.gallery-section { padding: 25px 0; background: var(--white); }
.gallery-section .section-title { color: var(--text-dark); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.08); }

/* ===== GALLERY CYLINDER =====
   The clinic photographs stand on a cylinder that turns slowly. Each card is
   rotateY(step * i) translateZ(radius): the curve is real, the cards at the back
   are hidden when seen edge-on. One element, the stage, is animated.
   The radius makes the chord between neighbours equal to card width plus gap. */
.cyl {
  --cyl-n: 25;
  --cyl-cw: clamp(132px, 15vw, 218px);
  --cyl-gap: 14px;
  --cyl-r: calc((var(--cyl-cw) + var(--cyl-gap)) * 3.9894);
  --cyl-step: calc(360deg / var(--cyl-n));
  position: relative;
  touch-action: pan-y;
  height: calc(var(--cyl-cw) * 1.333 + 26px);
  perspective: calc(var(--cyl-r) * 2.6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.cyl__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: cyl-spin 72s linear infinite;
}
/* translateZ(-r) brings the front of the cylinder into the plane of the section;
   without it the card in front would stand a radius nearer and look far larger */
@keyframes cyl-spin {
  from { transform: translateZ(calc(var(--cyl-r) * -1)) rotateY(0deg); }
  to   { transform: translateZ(calc(var(--cyl-r) * -1)) rotateY(-360deg); }
}
.cyl__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cyl-cw);
  height: calc(var(--cyl-cw) * 1.333);
  margin: calc(var(--cyl-cw) * -0.6665) 0 0 calc(var(--cyl-cw) / -2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-section);
  backface-visibility: hidden;
  transform: rotateY(calc(var(--cyl-step) * var(--i))) translateZ(var(--cyl-r));
  box-shadow: 0 18px 40px -26px rgba(16, 24, 32, 0.5);
  cursor: pointer;
}
.cyl__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .cyl__stage { animation-play-state: paused; }
}
.cyl.is-offscreen .cyl__stage { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .cyl:hover .cyl__stage { animation-play-state: paused; }
}
@media (max-width: 720px) {
  .cyl {
    --cyl-cw: 158px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  }
}

/* ===== TEAM MARQUEE =====
   A band of portrait cards that slides from left to right at a constant speed
   (script.js sets --tm-shift, the distance of one set of cards, and --tm-dur).
   The cards are in the page twice, so the loop has no seam. Only transform
   moves, on one layer. */
.tm__head {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.tm__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-medium);
}
.tm__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-dark);
}
.tm__head .section-title { margin-bottom: 14px; }
.tm__intro {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-medium);
  text-wrap: balance;
}
.tm__wrap {
  position: relative;
  max-width: 1500px;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  --tm-gap: clamp(0.9rem, 1.2vw, 1.1rem);
  --tm-dur: 70s;
  --tm-shift: calc(50% + var(--tm-gap) / 2);
}
.tm__row {
  overflow: hidden;
  touch-action: pan-y;
  padding-bottom: 0.4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.tm__track {
  display: flex;
  gap: var(--tm-gap);
  width: max-content;
  animation: tm-marquee var(--tm-dur) linear infinite;
  will-change: transform;
}
.tm__row, .cyl { cursor: grab; -webkit-user-select: none; user-select: none; }
.tm__row.is-dragging, .tm__row.is-dragging *,
.cyl.is-dragging, .cyl.is-dragging * { cursor: grabbing; }
@keyframes tm-marquee {
  from { transform: translate3d(calc(-1 * var(--tm-shift)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .tm__row:hover .tm__track { animation-play-state: paused; }
}
.tm__wrap.is-paused .tm__track,
.tm__wrap.is-offscreen .tm__track { animation-play-state: paused; }
.tm__pause {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(16, 24, 32, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px -12px rgba(16, 24, 32, 0.45);
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.tm__pause svg { width: 15px; height: 15px; }
.tm__pause .tm__pause--play { display: none; }
.tm__wrap.is-paused .tm__pause .tm__pause--play { display: block; }
.tm__wrap.is-paused .tm__pause .tm__pause--stop { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tm__pause:hover { background: var(--primary-dark); color: #fff; }
}
.tm__pause:focus-visible { outline: 2px solid var(--text-dark); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tm__pause { display: none; }
  .tm__track { animation: none; }
  .tm__row { overflow-x: auto; scrollbar-width: none; touch-action: auto; }
}
@media (max-width: 720px) {
  .tm__wrap { --tm-dur: 38s; }
}
.tm-card {
  flex: 0 0 clamp(170px, 20vw, 300px);
  display: block;
  color: inherit;
  text-decoration: none;
}
.tm-card__media {
  display: block;
  isolation: isolate;
  border-radius: 18px;
  overflow: hidden;
  background: var(--primary-light);
  aspect-ratio: 4 / 4.6;
}
.tm-card__media picture { display: block; height: 100%; }
.tm-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* the photographs stand on white; multiplied with the mint frame the white
     becomes the frame and the rest stays almost as it was */
  mix-blend-mode: multiply;
  transition: transform 0.6s ease;
}
.tm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 0.2rem 0;
}
.tm-card__who { display: block; min-width: 0; text-align: left; }
.tm-card__who b {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-dark);
}
.tm-card__who span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-medium);
}
.tm-card__go {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #fff;
  transition: background 0.3s ease;
}
.tm-card__arr {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
}
.tm-card__arr--in { transform: translateX(-210%); }
@media (hover: hover) and (pointer: fine) {
  .tm-card:hover .tm-card__media img { transform: scale(1.04); }
  .tm-card:hover .tm-card__arr--out { transform: translateX(210%); }
  .tm-card:hover .tm-card__arr--in { transform: translateX(0); }
}
.tm__promise {
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0 20px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--text-dark);
}
.tm__promise .hl { color: var(--primary-dark); }
.tm__foot {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  text-align: center;
}
.tm__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.tm__cta-label {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--primary-dark);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 0.3s ease, background 0.3s ease;
}
.tm__cta-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-dark);
  color: #fff;
  transition: transform 0.3s ease;
}
.tm__cta-arrow svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .tm__cta:hover .tm__cta-label { transform: translateY(-2px); }
  .tm__cta:hover .tm__cta-arrow { transform: translate(2px, -2px); }
}
.tm__cta:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 999px; }

/* ===== CASES CORRIDOR ===== */
/* Two lanes of photographs come out of the depth towards the visitor. The
   perspective makes both the enlarging and the sideways drift; everything is in
   cqw (a percent of the section's width), so the shape is the same at any size.
   The cards are spread along the path by negative delays, so the corridor is full
   from the first frame. The section has no background of its own: three white
   veils fade the photographs into the page. */
.cstream-section { background: var(--white); }
.cstream {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  min-height: clamp(360px, 42vw, 560px);
  isolation: isolate;
}
.cstream__rails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 30cqw;
  perspective-origin: 50% 55%;
}
.cstream__space { position: absolute; inset: 0; transform-style: preserve-3d; }
.cstream__card {
  position: absolute;
  overflow: hidden;
  left: 50%;
  top: 55%;
  width: 18cqw;
  height: 25cqw;
  margin-left: -9cqw;
  margin-top: -12.5cqw;
  border-radius: 1.2cqw;
  backface-visibility: hidden;
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--d, 0s);
}
.cstream__card picture { display: block; width: 100%; height: 100%; }
.cstream__card img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
.cstream__card--r { animation-name: cases-stream-r; }
.cstream__card--l { animation-name: cases-stream-l; }

@keyframes cases-stream-r {
  0.00% { transform: translate3d(-11cqw, 0, -258.46cqw) rotateY(-6deg); }
  4.17% { transform: translate3d(-3.79cqw, 0, -225.92cqw) rotateY(-6.92deg); }
  8.33% { transform: translate3d(2.73cqw, 0, -197.04cqw) rotateY(-7.83deg); }
  12.50% { transform: translate3d(8.6cqw, 0, -171.43cqw) rotateY(-8.75deg); }
  16.67% { transform: translate3d(13.87cqw, 0, -148.7cqw) rotateY(-9.67deg); }
  20.83% { transform: translate3d(18.56cqw, 0, -128.54cqw) rotateY(-10.58deg); }
  25.00% { transform: translate3d(22.72cqw, 0, -110.65cqw) rotateY(-11.5deg); }
  29.17% { transform: translate3d(26.37cqw, 0, -94.78cqw) rotateY(-12.42deg); }
  33.33% { transform: translate3d(29.57cqw, 0, -80.7cqw) rotateY(-13.33deg); }
  37.50% { transform: translate3d(32.34cqw, 0, -68.21cqw) rotateY(-14.25deg); }
  41.67% { transform: translate3d(34.71cqw, 0, -57.13cqw) rotateY(-15.17deg); }
  45.83% { transform: translate3d(36.73cqw, 0, -47.3cqw) rotateY(-16.08deg); }
  50.00% { transform: translate3d(38.42cqw, 0, -38.58cqw) rotateY(-17deg); }
  54.17% { transform: translate3d(39.81cqw, 0, -30.84cqw) rotateY(-17.92deg); }
  58.33% { transform: translate3d(40.94cqw, 0, -23.98cqw) rotateY(-18.83deg); }
  62.50% { transform: translate3d(41.84cqw, 0, -17.89cqw) rotateY(-19.75deg); }
  66.67% { transform: translate3d(42.53cqw, 0, -12.48cqw) rotateY(-20.67deg); }
  70.83% { transform: translate3d(43.06cqw, 0, -7.69cqw) rotateY(-21.58deg); }
  75.00% { transform: translate3d(43.43cqw, 0, -3.44cqw) rotateY(-22.5deg); }
  79.17% { transform: translate3d(43.69cqw, 0, 0.33cqw) rotateY(-23.42deg); }
  83.33% { transform: translate3d(43.85cqw, 0, 3.68cqw) rotateY(-24.33deg); }
  87.50% { transform: translate3d(43.94cqw, 0, 6.65cqw) rotateY(-25.25deg); }
  91.67% { transform: translate3d(43.98cqw, 0, 9.28cqw) rotateY(-26.17deg); }
  95.83% { transform: translate3d(44cqw, 0, 11.62cqw) rotateY(-27.08deg); }
  100.00% { transform: translate3d(44cqw, 0, 13.7cqw) rotateY(-28deg); }
}

@keyframes cases-stream-l {
  0.00% { transform: translate3d(11cqw, 0, -258.46cqw) rotateY(6deg); }
  4.17% { transform: translate3d(3.79cqw, 0, -225.92cqw) rotateY(6.92deg); }
  8.33% { transform: translate3d(-2.73cqw, 0, -197.04cqw) rotateY(7.83deg); }
  12.50% { transform: translate3d(-8.6cqw, 0, -171.43cqw) rotateY(8.75deg); }
  16.67% { transform: translate3d(-13.87cqw, 0, -148.7cqw) rotateY(9.67deg); }
  20.83% { transform: translate3d(-18.56cqw, 0, -128.54cqw) rotateY(10.58deg); }
  25.00% { transform: translate3d(-22.72cqw, 0, -110.65cqw) rotateY(11.5deg); }
  29.17% { transform: translate3d(-26.37cqw, 0, -94.78cqw) rotateY(12.42deg); }
  33.33% { transform: translate3d(-29.57cqw, 0, -80.7cqw) rotateY(13.33deg); }
  37.50% { transform: translate3d(-32.34cqw, 0, -68.21cqw) rotateY(14.25deg); }
  41.67% { transform: translate3d(-34.71cqw, 0, -57.13cqw) rotateY(15.17deg); }
  45.83% { transform: translate3d(-36.73cqw, 0, -47.3cqw) rotateY(16.08deg); }
  50.00% { transform: translate3d(-38.42cqw, 0, -38.58cqw) rotateY(17deg); }
  54.17% { transform: translate3d(-39.81cqw, 0, -30.84cqw) rotateY(17.92deg); }
  58.33% { transform: translate3d(-40.94cqw, 0, -23.98cqw) rotateY(18.83deg); }
  62.50% { transform: translate3d(-41.84cqw, 0, -17.89cqw) rotateY(19.75deg); }
  66.67% { transform: translate3d(-42.53cqw, 0, -12.48cqw) rotateY(20.67deg); }
  70.83% { transform: translate3d(-43.06cqw, 0, -7.69cqw) rotateY(21.58deg); }
  75.00% { transform: translate3d(-43.43cqw, 0, -3.44cqw) rotateY(22.5deg); }
  79.17% { transform: translate3d(-43.69cqw, 0, 0.33cqw) rotateY(23.42deg); }
  83.33% { transform: translate3d(-43.85cqw, 0, 3.68cqw) rotateY(24.33deg); }
  87.50% { transform: translate3d(-43.94cqw, 0, 6.65cqw) rotateY(25.25deg); }
  91.67% { transform: translate3d(-43.98cqw, 0, 9.28cqw) rotateY(26.17deg); }
  95.83% { transform: translate3d(-44cqw, 0, 11.62cqw) rotateY(27.08deg); }
  100.00% { transform: translate3d(-44cqw, 0, 13.7cqw) rotateY(28deg); }
}

.cstream::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.2) 24%, rgba(255, 255, 255, 0.32) 64%, #fff 100%),
    radial-gradient(ellipse 54% 40% at 50% 55%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 74%),
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, #fff 100%);
}
.cstream__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: inherit;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.2rem, 4vw, 2.6rem);
  text-align: center;
}
.cstream__title { color: var(--text-dark); text-wrap: balance; margin: 0; }
.cstream__lead {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--text-medium);
  font-size: 0.9rem;
  line-height: 1.65;
  text-wrap: balance;
}
.cstream__btn { margin-top: 1.3rem; }
@media (prefers-reduced-motion: reduce) {
  .cstream__card { animation-play-state: paused; }
}
.cstream.is-offscreen .cstream__card { animation-play-state: paused; }
@media (max-width: 720px) {
  .cstream { min-height: 450px; }
  .cstream__card--r { animation-name: cases-stream-rm; }
  .cstream__card--l { animation-name: cases-stream-lm; }
  .cstream__lead { font-size: 0.9rem; }
  .cstream__body { padding-block: 2rem 1.8rem; }
  .cstream__rails { perspective-origin: 50% 42%; }
  .cstream__card { top: 42%; }
  .cstream::after {
    background:
      linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.08) 16%, rgba(255, 255, 255, 0.22) 40%, rgba(255, 255, 255, 0.82) 58%, #fff 100%),
      radial-gradient(ellipse 46% 28% at 50% 42%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 76%),
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, #fff 100%);
  }
}

@keyframes cases-stream-rm {
  0.00% { transform: translate3d(-8cqw, 0, -191.89cqw) rotateY(-6deg); }
  4.17% { transform: translate3d(-3.28cqw, 0, -164.69cqw) rotateY(-6.92deg); }
  8.33% { transform: translate3d(0.99cqw, 0, -140.82cqw) rotateY(-7.83deg); }
  12.50% { transform: translate3d(4.83cqw, 0, -119.88cqw) rotateY(-8.75deg); }
  16.67% { transform: translate3d(8.28cqw, 0, -101.51cqw) rotateY(-9.67deg); }
  20.83% { transform: translate3d(11.35cqw, 0, -85.38cqw) rotateY(-10.58deg); }
  25.00% { transform: translate3d(14.07cqw, 0, -71.24cqw) rotateY(-11.5deg); }
  29.17% { transform: translate3d(16.46cqw, 0, -58.83cqw) rotateY(-12.42deg); }
  33.33% { transform: translate3d(18.56cqw, 0, -47.94cqw) rotateY(-13.33deg); }
  37.50% { transform: translate3d(20.37cqw, 0, -38.38cqw) rotateY(-14.25deg); }
  41.67% { transform: translate3d(21.92cqw, 0, -30cqw) rotateY(-15.17deg); }
  45.83% { transform: translate3d(23.24cqw, 0, -22.64cqw) rotateY(-16.08deg); }
  50.00% { transform: translate3d(24.34cqw, 0, -16.19cqw) rotateY(-17deg); }
  54.17% { transform: translate3d(25.26cqw, 0, -10.53cqw) rotateY(-17.92deg); }
  58.33% { transform: translate3d(26cqw, 0, -5.56cqw) rotateY(-18.83deg); }
  62.50% { transform: translate3d(26.59cqw, 0, -1.2cqw) rotateY(-19.75deg); }
  66.67% { transform: translate3d(27.04cqw, 0, 2.62cqw) rotateY(-20.67deg); }
  70.83% { transform: translate3d(27.38cqw, 0, 5.98cqw) rotateY(-21.58deg); }
  75.00% { transform: translate3d(27.63cqw, 0, 8.93cqw) rotateY(-22.5deg); }
  79.17% { transform: translate3d(27.8cqw, 0, 11.51cqw) rotateY(-23.42deg); }
  83.33% { transform: translate3d(27.9cqw, 0, 13.78cqw) rotateY(-24.33deg); }
  87.50% { transform: translate3d(27.96cqw, 0, 15.76cqw) rotateY(-25.25deg); }
  91.67% { transform: translate3d(27.99cqw, 0, 17.51cqw) rotateY(-26.17deg); }
  95.83% { transform: translate3d(28cqw, 0, 19.04cqw) rotateY(-27.08deg); }
  100.00% { transform: translate3d(28cqw, 0, 20.38cqw) rotateY(-28deg); }
}

@keyframes cases-stream-lm {
  0.00% { transform: translate3d(8cqw, 0, -191.89cqw) rotateY(6deg); }
  4.17% { transform: translate3d(3.28cqw, 0, -164.69cqw) rotateY(6.92deg); }
  8.33% { transform: translate3d(-0.99cqw, 0, -140.82cqw) rotateY(7.83deg); }
  12.50% { transform: translate3d(-4.83cqw, 0, -119.88cqw) rotateY(8.75deg); }
  16.67% { transform: translate3d(-8.28cqw, 0, -101.51cqw) rotateY(9.67deg); }
  20.83% { transform: translate3d(-11.35cqw, 0, -85.38cqw) rotateY(10.58deg); }
  25.00% { transform: translate3d(-14.07cqw, 0, -71.24cqw) rotateY(11.5deg); }
  29.17% { transform: translate3d(-16.46cqw, 0, -58.83cqw) rotateY(12.42deg); }
  33.33% { transform: translate3d(-18.56cqw, 0, -47.94cqw) rotateY(13.33deg); }
  37.50% { transform: translate3d(-20.37cqw, 0, -38.38cqw) rotateY(14.25deg); }
  41.67% { transform: translate3d(-21.92cqw, 0, -30cqw) rotateY(15.17deg); }
  45.83% { transform: translate3d(-23.24cqw, 0, -22.64cqw) rotateY(16.08deg); }
  50.00% { transform: translate3d(-24.34cqw, 0, -16.19cqw) rotateY(17deg); }
  54.17% { transform: translate3d(-25.26cqw, 0, -10.53cqw) rotateY(17.92deg); }
  58.33% { transform: translate3d(-26cqw, 0, -5.56cqw) rotateY(18.83deg); }
  62.50% { transform: translate3d(-26.59cqw, 0, -1.2cqw) rotateY(19.75deg); }
  66.67% { transform: translate3d(-27.04cqw, 0, 2.62cqw) rotateY(20.67deg); }
  70.83% { transform: translate3d(-27.38cqw, 0, 5.98cqw) rotateY(21.58deg); }
  75.00% { transform: translate3d(-27.63cqw, 0, 8.93cqw) rotateY(22.5deg); }
  79.17% { transform: translate3d(-27.8cqw, 0, 11.51cqw) rotateY(23.42deg); }
  83.33% { transform: translate3d(-27.9cqw, 0, 13.78cqw) rotateY(24.33deg); }
  87.50% { transform: translate3d(-27.96cqw, 0, 15.76cqw) rotateY(25.25deg); }
  91.67% { transform: translate3d(-27.99cqw, 0, 17.51cqw) rotateY(26.17deg); }
  95.83% { transform: translate3d(-28cqw, 0, 19.04cqw) rotateY(27.08deg); }
  100.00% { transform: translate3d(-28cqw, 0, 20.38cqw) rotateY(28deg); }
}

/* the page of cases */
.cases-intro { padding: 56px 20px 20px; text-align: center; background: var(--white); }
.cases-intro h2 { margin: 0 auto 16px; max-width: 900px; }
.cases-intro p {
  max-width: 760px;
  margin: 0 auto 12px;
  color: var(--text-medium);
  font-size: 1.02rem;
  line-height: 1.7;
}
.cases-grid-section { padding: 28px 20px 56px; background: var(--white); }
.cases-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.case-card { margin: 0; }
.case-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.case-card__media picture { display: block; height: 100%; }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-card h3 { margin: 12px 0 2px; }
.case-card p { margin: 0; font-size: 0.9rem; color: var(--text-medium); line-height: 1.5; }
.case-card__soon { font-style: italic; }
.cases-cta { padding: 44px 20px; text-align: center; background: var(--bg-section); }
.cases-cta h2 { margin: 0 0 14px; }
.cases-cta p { max-width: 640px; margin: 0 auto 22px; color: var(--text-medium); line-height: 1.65; }
@media (max-width: 1000px) {
  .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cases-grid { grid-template-columns: 1fr; }
}
/* ===== /CASES CORRIDOR ===== */

/* ===== URGENCE: SELF-TRIAGE =====
   Two columns so somebody in pain can place their own symptom. Urgency is
   signalled by a heavier left border and the sage token, not by a second
   accent hue - the palette stays as it is. */
.triage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0 8px;
  text-align: left;
}
.triage-col {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.triage-now { border-left-color: var(--primary); }
.triage-col h3 {
  margin-bottom: 14px;
  color: var(--text-dark);
}
.triage-col ul { margin: 0; padding-left: 20px; }
.triage-col li {
  margin-bottom: 8px;
  color: var(--text-medium);
  line-height: 1.5;
}
.triage-call { margin-top: 18px; }
.triage-call a {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 13px 22px;
  border-radius: 6px;
  min-height: 44px;
  line-height: 1.4;
}
.triage-call a:hover { background: var(--primary-dark); }
.triage-call a:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .triage { grid-template-columns: 1fr; gap: 16px; }
  .triage-call a { display: block; text-align: center; }
}

/* ===== HEADER LOGO: SPANS BOTH ROWS =====
   The logo used to sit inside .header-main only, starting 8px below the
   contact line and overflowing 11px past the bottom of the header. Measured
   at 1422px: header 143px tall, contact line 54, nav row 54-143, logo
   62-154.

   Anchored to the bottom of .header-main instead of the top, so it settles
   between the two rows on its own when the header changes height: its base
   sits just above the nav baseline and its crown reaches into the contact
   line. Only above 1024px: below that the desktop nav is hidden, the header
   collapses to the contact line alone, and a logo anchored to its base would
   stick out above the page. Above 1024 but under 1100 the nav is still wide
   enough that a taller logo runs into CONSEILS, so the change starts at 1101. */
@media (min-width: 1101px) {
  /* The logo spans exactly from the top of the phone number to the bottom of
     the PRENDRE RDV button - the two edges Cezar named. It is measured off the
     header rather than guessed: .header-main stops being the containing block
     so the logo positions against .site-header, and the same 8px inset that
     sets the contact line's top sets the logo's. Change the padding above and
     the logo follows by itself. */
  .header-main { position: static; }
  .logo-center {
    /* 8px is the contact line's own top padding, so the logo starts where the
       phone number does. 18px is what sits below the PRENDRE RDV button: the
       row's 8px of padding and the 10px the button itself keeps clear. */
    top: 8px;
    bottom: 18px;
  }
  /* The height has to run down the whole chain or the image falls back to its
     intrinsic size and overshoots the header. */
  .logo-center a { height: 100%; }
  .logo-center img { height: 100%; width: auto; object-fit: contain; }
}

/* ===== ARTICLES ===== */
.articles-section { padding: 90px 0; background: #fff; }
.articles-section .section-title { color: var(--text-dark); }
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.article-card { background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s ease; }
.article-card:hover { box-shadow: var(--shadow-md); }
.article-img { aspect-ratio: 3/4; overflow: hidden; }
.article-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.article-card:hover .article-img img { transform: scale(1.05); }
.article-content { padding: 22px 24px 28px; }
.article-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 8px;
}
.article-content h3 {
  margin-bottom: 8px;
  color: var(--text-dark);
}
.article-date { font-size: 0.8rem; color: var(--text-light); }

/* ===== TEAM ===== */
.team-section { padding: 90px 0; background: var(--white); }
.team-section .section-title { color: var(--text-dark); }
.team-grid {
  display: grid;
    grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.team-card { text-align: center; }
.team-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 0 18px;
  overflow: hidden;
    border-radius: 0;
    border: none;
  box-shadow: var(--shadow-md);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { margin-bottom: 4px; }
.team-role {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.team-bio { font-size: 0.9rem; color: var(--text-medium); line-height: 1.7; }

/* Team card - hover overlay (Rhone Dental style) */
.team-card { position: relative; cursor: pointer; text-align: left; }
.team-photo { position: relative; }
.team-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: rgba(115, 139, 105, 0.88);
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.team-card:hover .team-overlay { opacity: 1; }
.team-overlay .team-overlay-name {
  margin-bottom: 10px;
  color: #fff;
}
.team-overlay .team-overlay-role {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
  margin: 0;
}
.team-card .team-card-info { display: none; }
.team-card h3 { display: none; }
.team-card .team-role { display: none; }
.team-card .team-bio { display: none; }
/* The name in the hover overlay is an h3, which the rule above hides along with
   the card's own text. Shown again, so the overlay carries name and role. */
.team-card .team-overlay h3 { display: block; }

/* Team modal */
.team-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.team-modal-overlay.active { display: flex; opacity: 1; }
.team-modal {
  background: #fff;
  max-width: 980px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  padding: 50px;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.team-modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 1.8rem;
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  z-index: 2;
}
.team-modal-close:hover { color: var(--primary); }
.team-modal-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.team-modal-body { display: flex; flex-direction: column; }
.team-modal-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.team-modal-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.team-modal-bio {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #2a2a2a;
  margin-bottom: 24px;
}
.team-modal-contact { display: flex; gap: 12px; margin-top: auto; }
.team-modal-contact a {
  width: 44px;
  height: 44px;
  border: 1px solid #ddd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2a2a2a;
  border-radius: 4px;
  transition: all 0.25s ease;
  font-size: 1.05rem;
}
.team-modal-contact a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
body.modal-open { overflow: hidden; }
@media (max-width: 768px) {
  .team-modal { grid-template-columns: 1fr; padding: 40px 24px; gap: 20px; }
  .team-modal-img { max-width: 320px; margin: 0 auto; }
  .team-modal-close { top: 10px; right: 14px; }
}

/* ===== CONTACT ===== */
.contact-section { padding: 90px 0; background: #fff; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.contact-info h2 {
  margin-bottom: 30px;
  color: var(--primary);
}
.contact-block { margin-bottom: 24px; }
.contact-block h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--text-medium);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.contact-block p, .contact-block a {
  display: block;
  font-size: 1.05rem;
  color: var(--text-dark);
  line-height: 1.6;
}
.contact-block a:hover { color: var(--primary); }
.contact-form-wrapper { background: var(--bg-section); padding: 36px 36px 30px; }
.contact-form-wrapper h3 {
  margin-bottom: 8px;
  color: var(--primary);
}
.contact-form-wrapper p { font-size: 0.9rem; color: var(--text-medium); margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-dark);
  transition: border-color 0.3s ease;
}
.form-control:focus { outline: none; border-color: var(--primary); }
textarea.form-control { resize: vertical; min-height: 110px; }
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-medium);
  margin: 16px 0 22px;
}
.form-checkbox input { margin-top: 4px; }


/* ===== TRUST BADGES ===== */
.trust-badges {
  background: var(--bg-section);
  padding: 50px 20px;
}
/* the strip under the banner on the homepage, and the services straight after it */
.hero + .trust-badges { padding: 34px 20px 0; }
.hero + .trust-badges + .services-section { padding-top: 46px; }
.trust-badges-wrap {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  flex-wrap: wrap;
}
.trust-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 110px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.trust-google .google-logo {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -1px;
  line-height: 1;
}
.trust-google-rating {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rating-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: #4b3a8a;
  font-family: 'Inter', sans-serif;
}
.rating-stars {
  color: #F5B400;
  font-size: 1.1rem;
  letter-spacing: 2px;
}
.rating-count {
  font-size: 0.9rem;
  color: #666;
  font-family: 'Inter', sans-serif;
}
.rating-cta {
  font-size: 1.1rem;
  font-weight: 700;
  color: #4b3a8a;
  font-family: 'Inter', sans-serif;
  display: block;
  margin-bottom: 4px;
}
.trust-follow {
  flex-direction: column;
  gap: 14px;
  padding: 22px 36px;
}
.follow-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #2a2a2a;
}
.follow-icons {
  display: flex;
  gap: 14px;
}
.follow-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.follow-icon:hover { transform: translateY(-2px); filter: brightness(1.1); }
.follow-icon.ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.follow-icon.fb { background: #1877F2; }
.follow-icon.li { background: #0A66C2; }

@media (max-width: 600px) {
  .trust-card { padding: 18px 22px; min-height: 0; }
  .trust-google .google-logo { font-size: 1.6rem; }
  .rating-number { font-size: 1.3rem; }
}


/* ===== TESTIMONIALS ===== */
.testimonials {
  background: var(--bg-section);
  padding: 42px 20px 56px;
}
.testimonials-title {
  text-align: center;
  color: #2a2a2a;
  margin-bottom: 28px;
}
.testimonials-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.review-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  padding: 20px 28px;
  position: relative;
}
.review-quote-mark {
  color: #c8d2e3;
  font-size: 1.2rem;
  display: block;
  margin-bottom: 6px;
}
.review-stars {
  color: #F5B400;
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.review-text {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  color: #2a2a2a;
  line-height: 1.5;
  font-size: 0.93rem;
  margin-bottom: 12px;
}
.review-author {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #2a2a2a;
  font-size: 0.92rem;
  margin: 0;
}
@media (max-width: 800px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .review-card { padding: 16px 18px; }
}

/* ===== FOOTER (Rhône Dental Clinic style) ===== */
.site-footer {
  background: #151012;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 0;
  margin-top: 80px;
}
.site-footer .sf-main {
  max-width: 1050px;
  margin: 0 auto;
  /* 70 above became 40. Nothing here moves sideways or changes order - the
     footer only gives back the air around its blocks. */
  padding: 40px 24px 0;
}
.site-footer .sf-logo-block {
  text-align: center;
  margin-bottom: 30px;
}
.site-footer .sf-logo img {
  height: 100px;
  width: auto;
  margin: 0 auto;
  display: inline-block;
  /* The logo is a transparent PNG in sage and grey, drawn for a light ground.
     On the dark footer it reads as a muddy smudge, so it is rendered flat
     white: brightness(0) takes every opaque pixel to black, invert(1) takes
     it to white. The transparent 90% of the file stays transparent. */
  filter: brightness(0) invert(1);
}
/* Matching the header logo, which grows at the same width. */
@media (min-width: 1101px) {
  /* Cezar asked for the two logos to be the same size. The header one is now
     framed between the contact line and the buttons, which makes it 105px, so
     this follows it down from 135. */
  .site-footer .sf-logo img { height: 105px; }
}
/* This logo used to be a WebGL canvas with a bloom pass, drawn by 250KB of
   three.js. The glow is the part worth keeping - as a halo behind the logo
   whose opacity animates, which the compositor handles on its own. Animating
   the image's filter instead repainted it on every frame, on every page. */
.site-footer .sf-logo {
  position: relative;
  /* The anchor is inline by default, so an absolutely positioned child would
     take its containing block from the footer's line box rather than from the
     100px logo, and the halo would sit low and flat. */
  display: inline-block;
  isolation: isolate;
}
.site-footer .sf-logo::after {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--primary), transparent);
  opacity: 0;
  pointer-events: none;
  animation: sf-logo-glow 6s ease-in-out infinite;
}
@keyframes sf-logo-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.32; }
}
/* Has to sit after the rule it cancels: a media query adds no specificity, so
   the reduced-motion block near the top of the file lost to the animation
   above it and never switched anything off. */
@media (prefers-reduced-motion: reduce) {
  .site-footer .sf-logo::after { animation: none; opacity: 0; }
}
.site-footer .sf-info {
  display: grid;
  grid-template-columns: 3fr 4fr 2fr 1fr;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 30px;
}
.site-footer .sf-col h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1.45px;
  line-height: 1.6;
  margin-bottom: 10px;
  text-transform: none;
}
.site-footer .sf-col a,
.site-footer .sf-col p {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}
.site-footer .sf-col a:hover { color: #b39d78; }
.site-footer .sf-sitemap p,
.site-footer .sf-schedule p { margin: 0; }
.site-footer .sf-address,
.site-footer .sf-phone,
.site-footer .sf-email {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.site-footer .sf-address i,
.site-footer .sf-phone i,
.site-footer .sf-email i { color: #b39d78; margin-top: 4px; min-width: 16px; }
.site-footer .sf-cta { margin-top: 18px; }
.site-footer .sf-cta a {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid #b39d78;
  padding-bottom: 4px;
}
/* Tap targets in the footer. Measured at 360: the phone number and the e-mail
   were 26px tall and PRENDRE RDV was 21px, against the 44px floor in
   design-quality.md. Most of this site's visitors arrive on a phone and the
   footer is where they reach for the number. */
@media (max-width: 768px) {
  .site-footer .sf-phone a,
  .site-footer .sf-email a,
  .site-footer .sf-sitemap a,
  .site-footer .sf-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer .sf-cta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
  }
}
.site-footer .sf-socials {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.site-footer .sf-socials a {
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b39d78;
  font-size: 1.5rem;
  margin-bottom: 0;
  transition: transform 0.2s ease;
}
.site-footer .sf-socials a:hover { transform: translateY(-2px); color: #fff; }
.site-footer .sf-newsletter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 0 30px;
}
.site-footer .sf-newsletter .nl-label {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.site-footer .sf-newsletter input[type="email"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-style: italic;
  /* 25px tall beside a 44px button, and under the tap-target floor. */
  height: 44px;
  padding: 4px 0;
  outline: none;
  width: 315px;
  min-width: 200px;
}
.site-footer .sf-newsletter input::placeholder { color: rgba(255,255,255,0.6); }
@media (max-width: 768px) {
  /* Same 16px floor as the other forms, so focusing it does not zoom iOS. */
  .site-footer .sf-newsletter input[type="email"] { font-size: 16px; }
}
.site-footer .sf-newsletter button {
  background: transparent;
  border: 1px solid #b39d78;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  padding: 0 18px;
  /* 30px is below the 44px floor the design rules set for tap targets. */
  height: 44px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.site-footer .sf-newsletter button:hover { background: #b39d78; color: #151012; }
.site-footer .sf-docs {
  border-top: 1px solid #b39d78;
  max-width: 1050px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer .sf-docs-links { display: flex; gap: 30px; }
.site-footer .sf-docs-links a {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.site-footer .sf-docs-links a:hover { color: #b39d78; }
.site-footer .sf-copyright {
  color: #fff;
  font-size: 12px;
  text-align: right;
}
@media (max-width: 768px) {
  .site-footer .sf-info { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .site-footer .sf-socials { flex-direction: row; justify-content: center; }
  .site-footer .sf-address, .site-footer .sf-phone, .site-footer .sf-email { justify-content: center; }
  .site-footer .sf-docs { flex-direction: column; text-align: center; }
  .site-footer .sf-copyright { text-align: center; }
}

/* ===== SCROLL TOP ===== */
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-md);
  z-index: 80;
  cursor: pointer;
  transition: background 0.3s ease;
}
.scroll-top:hover { background: var(--primary-dark); }
.scroll-top.visible { display: flex; }

/* ===== INTERIOR PAGES ===== */
.page-hero {
  padding: 80px 0;
  /* Read --hero-bg here too. The rule further down that reads it is guarded
     with .l-hero-banner, so carriere, conseils and specialites
     were setting a hero image that never reached the screen. Pages with no
     --hero-bg of their own keep the generic banner. */
  background: linear-gradient(rgba(40,50,40,0.6), rgba(40,50,40,0.7)),
              var(--hero-bg, url('images/bg-page-hero.webp')) center/cover;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-hero > .container { width: 100%; }
/* ===== HERO TITLE CLEARS THE HEADER =====
   The header is absolute over the banner and its logo now reaches down to
   139px. Measured at 1400px: the title sat at 90 on specialites and 115 on the
   treatment pages, so it crossed the emblem by 49px and 24px. Both now start
   at 170, the same distance below the logo on every page type.
   Under 769px the contact line is hidden and the header is short, so the
   existing paddings there are left alone. */
@media (min-width: 769px) {
  .page-hero { padding-top: 170px; padding-bottom: 50px; height: 420px; }
}
@media (max-width: 768px) {
  .page-hero { padding: 90px 0 50px; height: 340px; }
}
.page-hero h1 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  word-spacing: 0.3em;
  font-size: clamp(1.8rem, 4vw, 3rem);
}
.page-content { padding: 80px 0; }
.page-content h2 {
  text-align: center;
  margin-bottom: 40px;
  color: var(--primary);
}

/* ===== TARIFS TABLE ===== */
.tarifs-table {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tarifs-table th, .tarifs-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.tarifs-table th {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.tarifs-table tr:nth-child(even) { background: var(--bg-light); }
.tarifs-table .price-col { text-align: right; font-weight: 600; color: var(--primary-dark); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .header-main { grid-template-columns: auto 1fr auto; padding: 0 20px 14px; }
  /* Hide the menus, keep their containers. `.nav-right` holds the hamburger,
     so hiding it hid the button too — a child cannot show through a
     display:none parent — and every page lost its navigation below 1024px.
     `.header-main` is flex with space-between, so the empty `.nav-left` is
     what keeps the hamburger on the right and the logo centred. This mirrors
     the 900px block, which had it right. */
  .nav-left .main-nav, .nav-right .main-nav { display: none; }
  .nav-right { justify-content: flex-end; }
  .mobile-menu-toggle { display: block; }
  .header-top { padding: 12px 20px 8px; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .articles-grid, .gallery-grid, .offers-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .header-top { display: none; }
  .logo-center img { height: 60px; }
  /* No top padding: .hero-slide is absolute inset:0 inside the slider, so
     padding here pushed the photograph down and left a white band under the
     transparent header instead of letting the image run to the top. */
  .hero { height: auto; min-height: 480px; padding: 0; }
  .hero-title { font-size: 0.9rem !important; }
  .welcome-section, .services-section, .articles-section, .team-section, .contact-section { padding: 60px 0; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid, .gallery-grid, .offers-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .footer-social { justify-content: center; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .floating-side .floating-btn { padding: 10px 6px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn { width: 100%; max-width: 280px; }
      .team-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-form-wrapper { padding: 24px 20px; }
}

/* ===== MOBILE NAV OVERLAY ===== */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }
/* Parked off-screen with a transform, not with right: -100%.
   overflow-x: hidden on body does not clip a position: fixed child, so the
   parked panel stretched the document to about 1008px on a 412px screen -
   the sideways scroll and the white strip down the right of every page.
   Animating transform instead of right also keeps it off the layout path. */
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 86%;
  max-width: 380px;
  height: 100vh;
  background: #fff;
  padding: 28px 24px;
  z-index: 201;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-nav-panel.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}
.mobile-nav-close {
  position: absolute;
  top: 18px;
  right: 18px;
  /* 44px minim: e prima tinta pe care o atinge un deget pe telefon. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--text-dark);
}
.mobile-nav-panel ul { margin-top: 40px; }
.mobile-nav-panel ul li { border-bottom: 1px solid var(--border); }
.mobile-nav-panel ul li a {
  display: block;
  padding: 14px 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mobile-nav-panel ul li a:hover { color: var(--primary); }
/* The two numbers live in .header-top, which is hidden below 768px. Without
   this there is no tappable phone number anywhere on a phone above the footer,
   on a dental practice site. */
.mobile-nav-call {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mobile-nav-panel ul li.mobile-nav-call a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 4px;
  color: var(--primary-dark);
  text-transform: none;
  letter-spacing: 0.5px;
}
.mobile-nav-panel ul li.mobile-nav-call a i { width: 18px; text-align: center; }
.mobile-nav-panel .submenu {
  padding-left: 16px;
  background: var(--bg-light);
}
.mobile-nav-panel .submenu li a {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.88rem;
}

/* ===== HEADER LAYOUT FIX (desktop) ===== */
.site-header { background:#fff; }
/* 8 rather than 14: the contact line is 42px tall now instead of 54. The bar
   only shows above 1100px - below that the mobile header hides it. */
.header-top { padding:8px 40px; }
.header-top-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:nowrap;
}
.header-contact-left,
.header-contact-right {
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  font-size:0.92rem;
  color:#000;
}
.header-contact-right { justify-content:flex-end; }
.header-contact-left a,
.header-contact-right a {
  color:#000;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.header-contact-left a:hover,
.header-contact-right a:hover { color:#738b69; }
.logo img { max-height:70px; width:auto; display:block; }
.main-nav { padding:10px 0; }
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.nav-list {
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.nav-list > li {
  position:relative;
  list-style:none;
}
.nav-list > li > a {
  color:#212529;
  text-decoration:none;
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:8px 0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color 0.2s;
}
.nav-list > li > a:hover { color:#738b69; }
.nav-list .btn-rdv {
  background:#738b69;
  color:#fff !important;
  padding:10px 22px !important;
  border-radius:4px;
  transition:background 0.2s;
}
.nav-list .btn-rdv:hover { background:#5a6c52; }
.has-submenu { position:relative; }
.has-submenu .submenu {
  position:absolute;
  top:100%;
  left:0;
  background:#f5f6f3;
  border:1px solid #d8e6cf;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  min-width:240px;
  padding:10px 0;
  list-style:none;
  margin:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s, visibility 0.2s;
  z-index:200;
}
.has-submenu:hover .submenu,
.has-submenu.open .submenu {
  opacity:1;
  visibility:visible;
}
.has-submenu .submenu li { list-style:none; }
.has-submenu .submenu a {
  display:block;
  padding:9px 20px;
  color:#1a1a1a;
  text-decoration:none;
  font-size:0.88rem;
  text-transform:none;
  letter-spacing:normal;
  font-weight:500;
}
.has-submenu .submenu a:hover {
  background:#d8e6cf;
  color:#738b69;
}
.mobile-menu-toggle {
  display:none;
  background:none;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  color:#212529;
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
}

/* Mobile responsive */
@media (max-width:980px) {
  .header-contact-left,
  .header-contact-right { display:none; }
  .header-top-inner { justify-content:center; }
  .nav-list { display:none !important; }
  .mobile-menu-toggle { display:block; }
  .nav-inner { justify-content:center; min-height:50px; }
}

/* The homepage photograph on a phone. The image is landscape, the viewport is
   portrait, so `cover` always shows its full height and crops the sides - which
   means background-position cannot move the subject up or down. What it can do
   is start the photograph below the header: the slide is inset: 0, so its top
   edge sat under the fixed bar and the top of the hat went with it, while the
   title landed across her mouth. Starting it at 72px puts the whole face on
   the screen and the title below the chin. ===== */
@media (max-width: 1100px) {
  /* The title goes back onto the photograph, at its foot, between her chin and
     the bottom edge - and the black band under it is gone.

     What makes it safe this time is that only the title is on the picture. The
     image is landscape and the viewport portrait, so `cover` always shows its
     full height: her chin is at 69% of the photograph, whatever the phone. A
     title needs the last 74px, so it clears 69% on any frame taller than
     240px. The two buttons, which needed 193px and could not fit, sit below
     the photograph on the page's own cream. */
  body.home .hero { background: var(--bg-light); }
  /* html body.home for the weight: `body.home .hero-slide { height: 100%
     !important }` sits two thousand lines further down, so an equally weighted
     rule up here loses on source order. One more element in the selector wins
     it outright. */
  html body.home .hero-slide {
    top: 72px;
    /* Room below for the title, the two buttons and the fixed action bar. */
    /* Room below for the two buttons and the fixed action bar. */
    bottom: 200px;
    height: auto !important;
    padding-bottom: 0;
    align-items: flex-end;
  }
  /* A scrim at the foot of the picture only, so the title reads without
     dimming her face. */
  body.home .hero-slide::before {
    display: block;
    background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,0.78) 100%);
  }
  body.home .hero-content {
    position: static;
    padding-bottom: 26px;
  }
  body.home .hero-title { margin-bottom: 0 !important; }
  /* Out from under the title and below the photograph. The slide is the
     nearest positioned ancestor, so 100% is its bottom edge. */
  body.home .hero-buttons {
    position: absolute;
    top: calc(100% + 22px);
    left: 0;
    right: 0;
    padding: 0 24px;
  }
}

/* Photographs get the same 8px corner as the buttons. Square corners next to
   rounded ones is the detail that makes a page feel colder than it is; this is
   every picture container on the site, each with overflow hidden so the image
   inside is clipped to the same shape.

   Deliberately not here: the logos, the icons, the flags in the language
   switcher, and the booking widget's iframe. */
.content-image,
.content-image img,
.gallery-item,
.gallery-item img,
.service-media,
.team-photo,
.about-clinic__media,
.about-clinic__gallery-item,
.specialty-card-media,
.quote-band__media,
.quote-band__media img,
.blog-card-media,
.actualites-section .service-media {
  border-radius: 8px;
  overflow: hidden;
}

/* The menu items carry 8px of their own padding, so CABINET starts 8px in
   from the row's edge while the phone number started flush against it - the
   character of difference Cezar spotted. */
@media (min-width: 1101px) {
  .header-contact-left { padding-left: 8px; }
  .header-contact-right { padding-right: 8px; }
}

/* ===== THE FIGURES BAND =====
   It used to be written with style="" on the section, the grid and every
   element inside - four hard-coded columns. Inline styles beat the stylesheet,
   so on a phone the four columns stayed four columns inside 360px and
   Orthodontistes, the fourth, sat off the screen entirely.

   The desktop keeps the look it had: white, 80px of padding, four columns,
   64px sage numerals. ===== */
.stats-band {
  background: #ffffff;
  color: #000000;
  padding: 80px 20px;
}
.stats-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Six figures: three across reads as two even rows, where four left a
     widowed pair on the second. */
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: left;
}
.stat-number {
  font-size: 64px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 16px;
}
.stat-label {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin: 0 0 8px 0;
}
.stat-desc {
  font-size: 15px;
  color: #000000;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  /* Two by two, so all four are on the screen, and the sentence under each
     one goes: the number and its label already say it. The band drops from
     four screens of nothing much to under one. */
  .stats-band { padding: 34px 18px; }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    text-align: center;
  }
  .stat-number { font-size: 40px; margin-bottom: 6px; }
  .stat-label { font-size: 0.95rem; }
  .stat-desc { display: none; }
}

/* ===== MOBILE HEADER =====
   The shape Cezar asked for, from the Rhône Dental Clinic screenshots: a solid
   dark bar that stays put, the language as a button on the left, the logo
   centred, the menu in a ring on the right. Phones and tablets only - above
   1100px the desktop header is untouched.

   Solid rather than transparent over the photograph: on the homepage the
   header carries no scrim, and a bar that is always the same colour is one
   less thing to read around. ===== */
@media (max-width: 1100px) {
  /* Two legacy rules hold this header transparent with !important - one for
     body.home, one for every other page - and a third repaints it white with
     !important once .scrolled lands. Specificity cannot beat !important, so
     these four declarations carry it too. The alternative was moving two long
     legacy blocks behind a desktop media query, which is the riskier edit.
     Nothing is added above 1100px. */
  html body[class] header.site-header,
  html body[class] header.site-header.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #1a1d17 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
    border-top: none !important;
    z-index: 100 !important;
  }
  /* The header no longer hangs over the hero, so the page starts below it. */
  html body[class]:not(.home) main { padding-top: 72px; }

  html body[class] header.site-header::before { display: none; }
  .header-top { display: none; }

  .header-main {
    padding: 8px 14px;
    justify-content: space-between;
  }

  /* The logo stays centred on the bar, whatever sits either side of it. */
  .logo-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
  }
  .logo-center img { height: 56px; }

  /* ---- the language picker ---- */
  .lang-pick {
    position: relative;
    z-index: 2;
  }
  .lang-pick summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
  }
  .lang-pick summary::-webkit-details-marker { display: none; }
  /* The chevron, drawn rather than fetched as an icon. */
  .lang-pick summary::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
  }
  .lang-pick[open] summary::after { transform: rotate(180deg); }
  .lang-pick summary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

  .lang-pick__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 92px;
    background: #1a1d17;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  }
  .lang-pick__item {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
  }
  .lang-pick__item:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
  .lang-pick__item.is-current { color: var(--primary); }
}

@media (min-width: 1101px) {
  /* The .header-top bar already carries the full switcher on a desktop. */
  .lang-pick { display: none; }
}

/* ===== THE MOBILE MENU BUTTON =====
   Measured at 360: the button sat at top -15px and its first bar at -2, so the
   top line of the three was off the screen - the menu read as two lines.

   The cause is above it. On a phone the nav is hidden and the logo is
   absolutely positioned, so .header-main had nothing left in flow and
   collapsed to the 14px of its own bottom padding. The button centres itself
   on that with top: 50% and a translate, which put it half above the page. A
   real height on the row is what fixes it.

   The bars were #2a2a2a over a photograph with a dark scrim over it, which is
   the other half of why the menu did not read. They are white there, and dark
   again once .scrolled turns the header into a near-opaque white bar. ===== */
@media (max-width: 1100px) {
  .header-main {
    min-height: 72px;
    align-items: center;
  }
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* A ring, as in the screenshots. The header behind it is solid dark now,
       so the bars no longer need a ground of their own - the ring is there to
       say "button", not to carry contrast. */
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    margin-left: auto;
    position: static;
    transform: none;
  }
  .mobile-menu-toggle span {
    margin: 0;
    width: 26px;
    height: 3px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  /* The bar stays dark on a phone whether or not the page has scrolled, so
     .scrolled no longer needs to repaint the button. */
  .site-header.scrolled .mobile-menu-toggle span {
    background: #ffffff;
    box-shadow: none;
  }
  .mobile-menu-toggle span { box-shadow: none; }
  .mobile-menu-toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
}



/* ===== LEGAL CONTENT (Mentions Légales) ===== */
.legal-content { padding: 60px 0 80px; background: #fff; }
.legal-content .container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.legal-article h2 { color: #738b69; margin: 48px 0 20px; padding-bottom: 0; border-bottom: none; }
.legal-article h2:first-child { margin-top: 0; }
.legal-article p { color: #212529; line-height: 1.75; margin-bottom: 14px; font-size: 1rem; text-align: justify; }
.legal-article a { color: #738b69; text-decoration: underline; transition: color .3s; }
.legal-article a:hover { color: #5a6c52; }
.legal-article .legal-list { list-style: none; padding-left: 0; margin: 14px 0 24px; background: #f7f7f5; border-left: 4px solid #738b69; padding: 18px 24px; border-radius: 4px; }
.legal-article .legal-list li { padding: 4px 0; line-height: 1.6; color: #212529; }
.legal-article .legal-update { margin-top: 50px; padding-top: 20px; border-top: 1px solid #e8e2d5; color: #777; font-size: .95rem; text-align: right; }
@media (max-width: 768px) {
  .legal-content { padding: 40px 0 60px; }
  .legal-article p { text-align: left; }
}

.legal-article h3 { color: #212529; margin: 24px 0 10px; }


/* ========================================================
   ABOUT CLINIC SECTION (Rhone-style, two-block layout)
   ======================================================== */
.about-clinic {
  background: var(--white);
  padding: 100px 0;
  color: var(--text-dark);
}
.about-clinic__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.about-clinic__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: stretch;
  margin-bottom: 100px;
}
.about-clinic__row:last-of-type {
  margin-bottom: 0;
}
.about-clinic__row--reverse .about-clinic__media {
  order: 2;
}
.about-clinic__media {
  position: relative;
  align-self: stretch;
  /* A grid item's automatic minimum is its min-content width. The DÉCOUVREZ
     NOTRE CABINET DENTAIRE button does not wrap, so its 376px pushed the track
     wider than the 312px row at 360. min-width: 0 keeps the track on the row. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* 16, not the 8 the buttons use, and that is the point rather than an
     inconsistency. 8px on a 180px button is a clear curve; the same 8px on
     this 538px photograph measures identically and reads as a square corner,
     which is what Cezar saw when he asked a second time for it to be
     rounded. The curve is scaled to the element so it looks the same. */
  border-radius: 16px;
}
.about-clinic__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
/* The portrait of Dr Caro leaves 45px of white above the hair. Centred in a
   landscape box, cover cut the top of the head; anchored to the top it stays. */
.about-clinic--surgery .about-clinic__media img { object-position: center top; }
.about-clinic__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.about-clinic__title {
  color: var(--text-dark);
  margin-bottom: 18px;
}
.about-clinic__divider {
  display: none;
}
.about-clinic__content p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-medium);
  margin-bottom: 12px;
}
/* --primary on white measures 3.73:1, below the 4.5:1 body text needs, and a
   link that differs from its paragraph only by hue is invisible to a reader
   who cannot see the hue. --primary-dark and an underline fix both. */
.about-clinic__content p a {
  color: var(--primary-dark);
  text-decoration: underline;
}
.about-clinic__content p a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}
.about-clinic__highlight {
  font-style: italic;
  color: var(--text-dark) !important;
  font-weight: 600;
  margin-top: 6px !important;
  margin-bottom: 26px !important;
}
.about-clinic__cta {
  align-self: flex-start;
  margin-top: 18px;
}
/* Filled in the practice's green, not a white box with a near-black outline.
   The name is now a half-truth, but renaming it would mean touching index.html
   and the four homepages generated from it for no gain. */
.btn-outline-dark {
  background: var(--primary);
  color: var(--white);
  border: 1.5px solid var(--primary);
  padding: 14px 36px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-outline-dark:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* Gallery row under the two blocks */
.about-clinic__gallery {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.about-clinic__gallery-item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.about-clinic__gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.about-clinic__gallery-item:hover img {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 900px) {
  .about-clinic {
    padding: 70px 0;
  }
  .about-clinic__row {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 60px;
  }
  .about-clinic__row--reverse .about-clinic__media {
    order: 0;
  }
  /* In one column the media has no sibling to take its height from, and its
     only child is absolutely positioned - so it collapsed to zero and the
     three clinic photographs did not appear on a phone at all. */
  .about-clinic__media {
    aspect-ratio: 3 / 2;
  }
  .about-clinic__media img {
    max-height: 380px;
  }
  /* The button shrank to fit its label, and the label is one unbreakable line
     of 376px - wider than the 312px column at 360, so it ran off the screen.
     Full width and centred, it wraps. */
  .about-clinic__cta {
    align-self: stretch;
  }
  .about-clinic__cta.btn-outline-dark {
    padding: 14px 18px;
    justify-content: center;
    text-align: center;
  }
  .about-clinic__gallery {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
  }
  .about-clinic__gallery-item img {
    height: 180px;
  }
}
/* ===== THE ABOUT SECTION, TIGHTER =====
   The photograph fills its row, so it is exactly as tall as the text beside
   it - which is how it read before, and how Cezar wants it. The two rows came
   out 563 and 650 because the second text was a paragraph longer; that
   paragraph only repeated the button under it, so it is gone and the two rows
   now match.

   The rest is air: 100px of section padding and 100px between the rows became
   64 and 56, the gap between column and picture 70 became 56, and the space
   under each paragraph 12 became 10. The section reads the same and is about
   a fifth shorter. ===== */
@media (min-width: 901px) {
  .about-clinic { padding: 64px 0; }
  .about-clinic__row {
    gap: 56px;
    margin-bottom: 56px;
  }
  /* No aspect-ratio and no align-self: the picture stretches to the row, which
     is what makes it the same height as its text. */
  /* .about-clinic__row hides its overflow - it is what keeps the reveal from
     spilling sideways - and the button's bottom border sat exactly on that
     edge, so the outline came out open at the foot. Four pixels of room. */
  .about-clinic__content { padding-bottom: 4px; }
  .about-clinic__title { margin-bottom: 14px; }
  .about-clinic__content p { margin-bottom: 10px; }
  .about-clinic__cta { margin-top: 14px; }
}

/* The four-photo grid under the about section, off on a phone and a tablet.
   The clinic is already shown by the two large photographs in the rows above
   it and by the gallery further down, so on a small screen it was the same
   rooms a third time. It stays on a desktop, where it costs nothing to scroll
   past. It has to sit after the rule that declares display: grid, two hundred
   lines up, or it loses on source order. The images are loading="lazy", so
   hidden here they are never fetched. */
@media (max-width: 1100px) {
  .about-clinic__gallery { display: none; }

  /* The children's corner photograph in the row below it - the dolls and the
     wooden toys - was hidden here at the practice's request. On 2026-10-07 the
     practice noticed it missing on a phone and wanted it back, so the rule is
     gone: under 901px the row is one column and the picture takes the 3 / 2
     frame declared higher up. */
}

/* ===== CITATION DRE. POPESCU (quote-band) ===== */
.quote-band { background: #ffffff; padding: 80px 0; overflow: hidden; }
.quote-band__inner { position: relative; max-width: 1280px; margin: 0 auto; min-height: 577px; display: block; }
/* 16, like the card beside it: the two sit side by side, so one curve has to
   answer the other. This beats the 8px picture-corner rule higher up the file
   by sitting below it. */
.quote-band__media { position: absolute; top: -28px; left: 47%; right: 0; width: auto; height: 100%; overflow: hidden; z-index: 1; border-radius: 16px; }
/* width: auto, not 100%. With width: 100% and object-fit: contain the element
   stayed 678px wide while the photograph inside it painted at 507 - the 616 x
   701 portrait scaled to the 577px height - so the box carried 85px of empty
   space on each side. border-radius clips the box, so the rounded corners were
   out there in the empty space and the photograph itself kept four square
   corners. That is what Cezar saw twice.

   Letting the height drive the width makes the element the same size as the
   photograph it shows, and the radius lands on the photograph. Auto margins
   keep it where it was, centred in the half it occupies. */
.quote-band__media img { width: auto; max-width: 100%; height: 100%; margin: 0 auto; object-fit: contain; display: block; filter: none; border-radius: 16px; }
/* The quote card had no radius at all, so it was the one square shape in a
   band whose photograph is rounded. 16 to match the photograph beside it. */
.quote-band__text { position: absolute; top: 96px; bottom: 136px; left: 0; width: calc(50% + 38px); background: var(--primary-light); color: var(--text-dark); padding: 70px 80px; display: flex; flex-direction: column; justify-content: center; z-index: 2; box-shadow: 0 20px 60px rgba(0,0,0,0.25); border-radius: 16px; }
.quote-band__quote { font-size: 1rem; line-height: 1.8; color: var(--text-dark); margin: 0 0 40px 0; font-weight: 300; font-style: italic; letter-spacing: 0.01em; }
.quote-band__signature { font-family: 'Inter', sans-serif; font-style: italic; font-size: 1.5rem; color: var(--text-dark); text-align: right; margin: 0; font-weight: 500; }
@media (max-width: 900px) {
.quote-band { padding: 0; }
.quote-band__inner { min-height: auto; }
.quote-band__media { position: relative; left: auto; right: auto; width: 100%; height: 320px; }
.quote-band__text { position: relative; top: auto; bottom: auto; width: 92%; margin: -60px auto 30px; padding: 40px 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.quote-band__quote { font-size: 1rem; }
.quote-band__signature { font-size: 1.35rem; text-align: center; }
}

/* Portrait first, then what she says. On a desktop the two sit side by side
   and the order on the page does not read as an order at all; stacked on a
   phone it did, and the words arrived before anyone knew whose they were.
   Only the order on screen changes - the document order is untouched. */
@media (max-width: 900px) {
  .quote-band__inner {
    display: flex;
    flex-direction: column;
  }
  .quote-band__media { order: 1; }
  .quote-band__text { order: 2; }
}

@media (max-width: 900px) {
  /* The portrait, 80px taller - about a centimetre at each end. It is
     object-fit: contain, so nothing of her was ever cropped; the frame was
     simply small, and the quote card overlapped the lower part of it. Taller
     frame, and the card reaches a little less far up. */
  .quote-band__media { height: 400px; }
  .quote-band__text { margin-top: -40px; }
}

/* The same band on "Notre équipe", one per person. The homepage text is one
   short quotation; a biography is twice as long, so the card gets less padding
   and its lower edge is raised from 136px to 96px. The
   role sits under the name where the homepage band has nothing. */
.quote-band__role { font-family: 'Inter', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--text-dark); opacity: 0.75; text-align: right; margin: 6px 0 0; }
@media (min-width: 901px) {
  .quote-band--team { padding: 56px 0 24px; }
  .quote-band--team .quote-band__text { bottom: 96px; padding: 48px 64px; }
  .quote-band--team .quote-band__quote { margin-bottom: 26px; }
}
@media (max-width: 900px) {
  .quote-band--team { padding-bottom: 24px; }
  .quote-band__role { text-align: center; }
}

@media (max-width: 1100px) {
  /* The OFFRES DE BIENVENUE band was 336px tall to hold 162px of content:
     sixty of padding above, sixty below, and thirty-two under its title. Now
     fourteen, fourteen and fourteen - 336 down to 230, a little over two and a
     half centimetres returned to the scroll. */
  .offers-band { padding: 14px 0; }
  .offers-band-title { margin-bottom: 14px; }
}


/* ===== JOIN US (Carrière) - dentalgroup.ch style ===== */
.career-form-section {
  position: relative;
  background: #ffffff;
  padding: 100px 20px 120px;
  overflow: hidden;
}
.career-form-section::before,
.career-form-section::after {
  content: none;
}
.join-us-container {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.join-us-left h2 {
  color: #1a1a1a;
  margin-bottom: 22px;
}
.join-us-left p {
  font-family: 'Inter', sans-serif;
  color: #2a2a2a;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.join-us-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.join-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.join-field label {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: #1a1a1a;
}
/* Every field in the block, not only text and email. The contact form's
   telephone input and its message textarea matched nothing here and rendered
   as browser defaults: 19px and 13px tall against the 45px of the fields above
   them. select and date are listed so the next field added is styled too. */
.join-field input[type="text"],
.join-field input[type="email"],
.join-field input[type="tel"],
.join-field input[type="number"],
.join-field input[type="date"],
.join-field select,
.join-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease;
}
.join-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}
/* iOS Safari zooms the whole page when it focuses a field whose text is under
   16px, and every field here is 0.95rem - 15.2px, just under the line. */
@media (max-width: 768px) {
  /* [type] carries the same specificity as the [type="text"] rule above, which
     a bare `.join-field input` loses to - a media query adds none of its own. */
  .join-field input[type],
  .join-field select,
  .join-field textarea { font-size: 16px; }
}
.join-field input::placeholder,
.join-field textarea::placeholder {
  color: #b5b5b5;
}
.join-field input:focus,
.join-field select:focus,
.join-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26,26,26,0.15);
}
.join-field input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  background: #e0dccf;
  border: none;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: #1a1a1a;
  cursor: pointer;
}
.join-field input[type="file"]::file-selector-button {
  background: #1a1a1a;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.join-field input[type="file"]::file-selector-button:hover {
  background: #333;
}
.btn-send-application {
  margin-top: 10px;
  align-self: flex-start;
  background: #1a1a1a;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  padding: 16px 26px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background 0.25s ease, transform 0.2s ease;
}
.btn-send-application:hover {
  background: #333;
  transform: translateX(2px);
}
.btn-send-application i {
  transition: transform 0.25s ease;
}
.btn-send-application:hover i {
  transform: translateX(4px);
}

/* Warm touch on career intro section if present */
.career-intro {
  background: #ffffff;
  padding: 70px 20px 40px;
  text-align: center;
}
.career-intro h2 {
  color: #3a2818;
  margin-bottom: 18px;
}
.career-intro p {
  max-width: 720px;
  margin: 0 auto 12px;
  font-family: 'Inter', sans-serif;
  color: #5a4636;
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .career-form-section { padding: 60px 20px 80px; }
  .join-us-container { grid-template-columns: 1fr; gap: 40px; }
}


/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-top-grid {
  background: #ffffff;
  padding: 60px 20px;
}
.contact-top-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.contact-card {
  background: #f4f8fc; /* soft blue-tinted background like reference site */
  border-radius: 16px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}
.contact-card h2 {
  color: #2a5db0;
  margin-bottom: 16px;
}
.contact-card h3 {
  color: #1a1a1a;
  margin-top: 22px;
  margin-bottom: 10px;
}
.contact-card h4 {
  color: #1a1a1a;
  margin-top: 18px;
  margin-bottom: 6px;
}
.contact-card p {
  font-family: 'Inter', sans-serif;
  color: #2a2a2a;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 8px;
}
.contact-card a { color: #2a5db0; }
.contact-card a:hover { color: #1e4a8a; text-decoration: underline; }

.contact-card-address { margin-bottom: 22px !important; }
.contact-line { margin-bottom: 6px !important; }
.contact-label { display: inline-block; min-width: 92px; color: #555; }

.contact-card-buttons {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn-contact-primary {
  display: inline-block;
  text-align: center;
  background: #2a5db0;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 22px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.25s ease, transform 0.2s ease;
}
.btn-contact-primary:hover { background: #1e4a8a; color: #fff !important; text-decoration: none !important; }
.btn-contact-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 22px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.25s ease;
}
.btn-contact-whatsapp:hover { background: #1ebe57; color: #fff !important; text-decoration: none !important; }
.btn-contact-whatsapp i { font-size: 1.2rem; }

.contact-map-frame {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.contact-map-frame iframe { display: block; }

.hours-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: #2a2a2a;
  padding: 6px 0;
  border-bottom: 1px solid rgba(42, 93, 176, 0.08);
}
.hours-list li:last-child { border-bottom: none; }
.hours-list li span:first-child { font-weight: 500; }

/* Contact form */
.contact-form-section {
  background: var(--bg-section);
  padding: 80px 20px 100px;
}
.contact-form-container {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 70px;
  align-items: start;
}
.contact-form-left h2 {
  color: #1a1a1a;
  margin-bottom: 18px;
}
.contact-form-left p {
  font-family: 'Inter', sans-serif;
  color: #2a2a2a;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 12px;
}
.contact-form-modern {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field label {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1a1a1a;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #1a1a1a;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: #2a5db0;
  box-shadow: 0 0 0 3px rgba(42, 93, 176, 0.12);
}
.cf-field textarea { resize: vertical; min-height: 110px; font-family: 'Inter', sans-serif; }
.cf-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #4a4a4a;
  line-height: 1.5;
  margin-top: 4px;
}
.cf-consent input[type="checkbox"] { margin-top: 3px; accent-color: #2a5db0; }
.btn-send-contact {
  margin-top: 8px;
  align-self: flex-start;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 16px 26px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background 0.25s ease;
}
.btn-send-contact:hover { background: #2a5db0; }
.btn-send-contact i { transition: transform 0.25s ease; }
.btn-send-contact:hover i { transform: translateX(4px); }

@media (max-width: 980px) {
  .contact-top-container { grid-template-columns: 1fr; }
  .contact-form-container { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .cf-row { grid-template-columns: 1fr; }
}


/* ============================================
   CONTACT PAGE — RICH SECTIONS
   ============================================ */
.how-to-come,
.parkings-section,
.neighborhood-section,
.good-to-know {
  padding: 70px 20px;
}
.how-to-come { background: #ffffff; }
.parkings-section { background: var(--bg-section); }
.neighborhood-section { background: #ffffff; }
.good-to-know { background: var(--bg-section); }

.how-header {
  max-width: 800px;
  margin: 0 auto 44px;
  text-align: center;
}
.how-header h2 {
  color: #1a1a1a;
  margin-bottom: 14px;
}
.how-header p {
  font-family: 'Inter', sans-serif;
  color: #4a4a4a;
  font-size: 1rem;
  line-height: 1.65;
}

/* ===== HOW TO COME (3 cards) ===== */
.how-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.how-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.how-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.how-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e5e5e5;
}
.how-photo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.how-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(26,26,26,0.85);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}
.how-tag i { font-size: 0.75rem; }
.how-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.how-body h3 {
  color: #1a1a1a;
  margin-bottom: 12px;
}
.how-body p {
  font-family: 'Inter', sans-serif;
  color: #2a2a2a;
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 12px;
}
.how-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.how-list li {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #2a2a2a;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.how-list li i {
  color: #2a5db0;
  width: 18px;
  font-size: 0.9rem;
}
.how-link {
  margin-top: auto;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #2a5db0 !important;
  text-decoration: none !important;
  align-self: flex-start;
  padding-top: 8px;
}
.how-link:hover { color: #1e4a8a !important; text-decoration: underline !important; }

/* Bus lines styling */
.bus-lines {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.bus-lines li {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #2a2a2a;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.bus-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 26px;
  border-radius: 4px;
  background: #d6271e;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0 8px;
}
.bus-35 { background: #d6271e; }
.bus-56 { background: #f39200; }
.bus-58 { background: #009ee2; }
.bus-702 { background: #ffd400; color: #1a1a1a; }
.bus-736 { background: #4a4a4a; }

/* ===== PARKINGS GRID ===== */
.parkings-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.parking-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.parking-card:hover { transform: translateY(-3px); }
.parking-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e5e5e5;
}
.parking-photo iframe { width: 100%; height: 100%; border: 0; display: block; }
.parking-info {
  padding: 18px 18px 20px;
  position: relative;
}
.parking-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.badge-free { background: #e6f6ed; color: #1a7d3a; }
.badge-paid { background: #fff1d6; color: #a85e00; }
.parking-info h4 {
  color: #1a1a1a;
  margin-bottom: 8px;
}
.parking-info p {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #4a4a4a;
  line-height: 1.55;
  margin-bottom: 6px;
}
.parking-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem !important;
  color: #666 !important;
  margin-top: 6px;
}
.parking-meta i { color: #2a5db0; }

/* ===== NEIGHBORHOOD ===== */
.neighborhood-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 320px;
  gap: 18px;
}
.hood-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.hood-tile iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.hood-caption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(26,26,26,0.85);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* ===== GOOD TO KNOW (tips) ===== */
.tips-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tip-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px 26px;
  border: 1px solid rgba(42, 93, 176, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
.tip-icon {
  font-size: 1.5rem;
  color: #2a5db0;
  margin-bottom: 14px;
  display: block;
}
.tip-card h4 {
  color: #1a1a1a;
  margin-bottom: 10px;
}
.tip-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: #2a2a2a;
  line-height: 1.6;
}
.tip-card a { color: #2a5db0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .how-grid { grid-template-columns: 1fr 1fr; }
  .parkings-grid { grid-template-columns: 1fr 1fr; }
  .neighborhood-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 260px;
  }
  .hood-large { grid-column: 1 / -1; }
  .tips-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .how-grid,
  .parkings-grid,
  .tips-grid {
    grid-template-columns: 1fr;
  }
  .neighborhood-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 260px 260px 260px;
  }
  .hood-large { grid-column: 1; }
}


/* ============================================
   SPÉCIALITÉS HUB (specialites.html)
   ============================================ */
.specialties-hub {
  padding: 60px 0 80px;
}
.specialties-hub .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.specialties-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 1100px) {
  .specialties-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .specialties-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .specialties-grid { grid-template-columns: 1fr; }
}
.specialty-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  color: inherit;
}
.specialty-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.specialty-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f4f4;
}
.specialty-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.specialty-card:hover .specialty-card-media img {
  transform: scale(1.05);
}
.specialty-card-body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.specialty-card-body h3 {
  margin: 0 0 10px;
  color: #1f3a3d;
}
.specialty-card-body p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
  flex: 1;
}
.specialty-card-body .card-cta {
  font-weight: 600;
  color: #2f6b6b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.specialty-card:hover .card-cta {
  color: #1f3a3d;
}

/* ============================================
   SPECIALITY DETAIL PAGE (specialite-*.html)
   ============================================ */
.spec-detail-hero {
  position: relative;
  padding: 90px 20px 70px;
  background: linear-gradient(rgba(31,58,61,.55), rgba(31,58,61,.55)), #1f3a3d;
  color: #fff;
  text-align: center;
}
.spec-detail-hero h1 {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  margin: 0 0 12px;
}
.spec-detail-hero .lead {
  font-size: 1.1rem;
  opacity: .95;
  max-width: 720px;
  margin: 0 auto;
}
.spec-detail-body {
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 20px;
}
.spec-detail-media {
  margin: 0 0 32px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f4f4f4;
}
.spec-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spec-detail-body h2 {
  color: #1f3a3d;
  margin: 32px 0 12px;
}
.spec-detail-body p {
  line-height: 1.7;
  color: #333;
  margin: 0 0 14px;
}
.spec-faq {
  margin: 32px 0;
}
.spec-faq details {
  border-bottom: 1px solid #e6e6e6;
  padding: 14px 0;
}
.spec-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #1f3a3d;
  list-style: none;
  padding-right: 20px;
  position: relative;
}
.spec-faq summary::-webkit-details-marker { display: none; }
.spec-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  color: #2f6b6b;
}
.spec-faq details[open] summary::after {
  content: "−";
}
.spec-faq details[open] summary {
  margin-bottom: 10px;
}
.spec-cta-block {
  background: #f7faf9;
  border-radius: 14px;
  padding: 28px;
  text-align: center;
  margin-top: 28px;
}
.spec-cta-block p {
  margin: 0 0 14px;
}
.spec-cta-block .btn-primary,
.spec-cta-block .btn-rdv {
  display: inline-block;
  margin-top: 4px;
}

/* Back link */
.spec-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  text-decoration: none;
  color: #2f6b6b;
  font-weight: 600;
  font-size: 0.95rem;
}
.spec-back-link:hover { color: #1f3a3d; }

/* ===== ACTUALITES MEDICALES - THE TEAM'S BAND =====
   The news slide with the component of the team band (.tm__wrap, .tm-card): same
   speed, direction, pause and card width. Here the picture is landscape, with no
   frame behind it, and the section spans the page on white. */
section.actualites-section {
  max-width: none;
  margin: 0;
  padding: 90px 0;
  background: var(--white);
}
.tm-card--news .tm-card__media {
  aspect-ratio: 4 / 3;
  background: none;
}
.tm-card--news .tm-card__media img { mix-blend-mode: normal; object-position: center; }
.tm-card--news .tm-card__who b { white-space: normal; }



/* ===== Align RDV buttons across specialty cards (equal-height row) ===== */
.specialties-grid {
    align-items: stretch;
}
.specialty-card-wrap {
    height: 100%;
}
.specialty-card-wrap .specialty-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 0;
}
.specialty-card-wrap .specialty-card .specialty-card-body,
.specialty-card-wrap .specialty-card .card-body,
.specialty-card-wrap .specialty-card > div:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.specialty-card-wrap .btn-rdv-card {
    margin-top: auto;
}

/* ===== PAGE BANNER (non-homepage interior pages) ===== */
.page-banner {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 2400 / 500;
  max-height: 360px;
  min-height: 200px;
}
.page-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
@media (max-width: 768px) {
  .page-banner {
    aspect-ratio: 16 / 9;
    min-height: 140px;
    max-height: 240px;
  }
}
.rdv-badge {
  display: inline-block;
  background: var(--primary-light, #e8f0e3);
  color: var(--primary, #738b69);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 22px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.rdv-intro h1 {
  color: #212529;
  margin: 0 0 18px;
}
.rdv-intro p {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: #4a5568;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}
.rdv-widget-section {
  background: #ffffff;
  padding: 30px 20px 100px;
}
.rdv-widget-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
/* White, and the rows inside the widget stay the grey the vendor draws.

   Cezar asked four times for those rows in the practice's pale green with the
   page behind them left white. It cannot be done from this repository, and
   each of the three plausible routes was tried and measured:

   - a stylesheet cannot enter a cross-origin iframe. Never could.
   - the pale green behind the frame does reach the rows, because the widget
     paints no background of its own and draws them at rgba(0,0,0,.04). But it
     reaches the page too, and the rows end up only 4% darker than it. That is
     the version he rejected.
   - an SVG filter can select on that alpha and repaint only the rows. It does
     exactly that on a local mock - row #f5f5f5 to #e8f0e4, page and progress
     bar untouched - and Chrome ignores it entirely on the iframe. A probe that
     should have erased everything except the rows left the widget looking
     normal. Chrome allows the shorthand filter functions on cross-origin
     content, invert() among them, and refuses filter: url(). A custom filter
     could be used to read pixels the page is not allowed to see.

   So the remaining route is the vendor's, not ours. The account already
   carries a brand colour - the widget's progress bar measures exactly
   #738b69 - it simply does not extend to the row backgrounds. */
.rdv-widget-frame {
  background: #ffffff;
  border: 1px solid #e6ebe2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(115, 139, 105, 0.10);
}
.rdv-widget-frame iframe {
  display: block;
  width: 100%;
  min-height: 900px;
  border: 0;
}
.rdv-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 100px;
}
.rdv-aside-card {
  background: #ffffff;
  border: 1px solid #e6ebe2;
  border-radius: 14px;
  padding: 22px 22px 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.rdv-aside-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-light, #e8f0e3);
  color: var(--primary, #738b69);
  font-size: 1rem;
  margin-bottom: 12px;
}
.rdv-aside-card h3 {
  color: #212529;
  margin: 0 0 10px;
}
.rdv-aside-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: #5a6072;
  line-height: 1.55;
  margin: 0 0 12px;
}
.rdv-aside-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--primary, #738b69);
  text-decoration: none;
  margin-top: 6px;
  transition: color 0.2s ease;
}
@media (max-width: 768px) {
  /* 25px tall, and these are the page's phone numbers. */
  .rdv-aside-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0;
  }
}
.rdv-aside-link:hover {
  color: var(--primary-dark, #5a6c52);
}
.rdv-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
}
.rdv-hours li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #f0f3ed;
  color: #4a5568;
}
.rdv-hours li:last-child { border-bottom: none; }
.rdv-hours li span:last-child {
  font-weight: 600;
  color: #212529;
}
.btn-primary.active {
  background: var(--primary-dark, #5a6c52);
}
@media (max-width: 980px) {
  .rdv-widget-container {
    grid-template-columns: 1fr;
  }
  .rdv-aside {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}
@media (max-width: 600px) {
  .rdv-intro { padding: 60px 18px 30px; }
  .rdv-widget-section { padding: 20px 14px 70px; }
  .rdv-widget-frame iframe { min-height: 760px; }
  .rdv-aside { grid-template-columns: 1fr; }
}



/* ===== subpage transparent/blurred header (all pages except homepage) ===== */
body:not(.home) .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 1px 12px rgba(0,0,0,0.05);
}
body:not(.home) {
  position: relative;
}
/* Pages without a banner/hero need top padding so content is not hidden under the absolute header */
body.l-banner {
  padding-top: 162px;
}
@media (max-width: 768px) {
  body.l-banner {
    padding-top: 110px;
  }
}


/* ===== Header behavior: transparent on home, solid white on inner pages ===== */
/* Homepage: transparent header over hero (matches dentiste-cote-gare-bussigny.ch) */
body.home .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-top: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 20;
}
body.home {
    position: relative;
}
/* Make sure hero starts at the very top on home */
body.home .hero,
body.home .hero-section,
body.home .home-hero,
body.home .banner {
    margin-top: 0;
}

/* Inner pages: solid white sticky header */
body:not(.home) .site-header {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-top: 4px solid #c9c1ad;
    z-index: 100;
}
body:not(.home) {
    position: static;
}
/* Remove the special padding-top compensation for inner pages now that the header is sticky and takes space */
body.l-banner {
    padding-top: 0;
}

/* ===== Homepage header turns white on scroll ===== */
body.home .site-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}
body.home .site-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    border-top: 4px solid #c9c1ad !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 1000;
}


/* ===== RAPPEL POPUP ===== */
.btn-rappel {
  background: transparent;
  border: 1.5px solid #c9a86b;
  color: #c9a86b;
  transition: all 0.25s ease;
  margin-right: 8px;
}
.btn-rappel:hover {
  background: #c9a86b;
  color: #fff;
  border-color: #c9a86b;
}

.rappel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}
.rappel-overlay.active {
  display: flex;
  opacity: 1;
}
.rappel-modal {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  padding: 50px 50px 40px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.rappel-overlay.active .rappel-modal {
  transform: translateY(0);
}
.rappel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: #333;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
  transition: color 0.2s ease;
}
.rappel-close:hover {
  color: #c9a86b;
}
.rappel-title {
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 30px;
}
.rappel-form .rappel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}
.rappel-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
  font-family: var(--font-body);
}
.rappel-field .req {
  color: #c9a86b;
  margin-left: 2px;
}
.rappel-field input,
.rappel-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: #333;
  background: #fff;
  transition: border-color 0.2s ease;
}
@media (max-width: 768px) {
  .rappel-field input,
  .rappel-field select { font-size: 16px; padding: 12px; }
}
.rappel-field input:focus,
.rappel-field select:focus {
  outline: none;
  border-color: #c9a86b;
}
.rappel-submit-wrap {
  text-align: center;
  margin-top: 26px;
}
.rappel-submit {
  background: #c9a86b;
  color: #fff;
  border: none;
  padding: 12px 36px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background 0.25s ease;
  font-family: var(--font-body);
}
.rappel-submit:hover {
  background: #b0915a;
}
.rappel-success {
  text-align: center;
  margin-top: 18px;
  color: #2a7a4a;
  font-weight: 500;
}
@media (max-width: 600px) {
  .rappel-modal {
    padding: 40px 25px 30px;
  }
  .rappel-form .rappel-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .btn-rappel {
    display: none;
  }
}

/* ===== ACTUALITES MEDICALES section ===== */
.actualites-section {
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 20px;
}
.actualites-header {
    text-align: center;
    margin-bottom: 50px;
}
.actualites-title {
    color: #2a2a2a;
    margin: 0 0 18px;
}
.actualites-divider {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: #c9c1ad;
    margin: 0 auto 20px;
}
.actualites-subtitle {
    font-size: 1rem;
    color: #555;
    max-width: 720px;
    margin: 0 auto;
}
.actualites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 30px;
}
.actualite-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.actualite-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.actualite-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.actualite-card:hover img {
    transform: scale(1.06);
}
.actualite-btn {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 12px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    white-space: nowrap;
    text-transform: uppercase;
    transition: background 0.3s ease;
}
.actualite-card:hover .actualite-btn {
    background: #738b69;
}
@media (max-width: 900px) {
    .actualites-grid { grid-template-columns: 1fr; gap: 18px; }
    .actualites-section { margin: 50px auto; }
}

/* ===== Transparent / blurred header for non-homepage pages ===== */
body:not(.home) .site-header {
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    border-top: 4px solid rgba(201, 193, 173, 0.85);
}
body:not(.home) .site-header .header-top {
    background: transparent;
}
body:not(.home) .site-header .header-main {
    background: transparent;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    body:not(.home) .site-header {
          background: rgba(255, 255, 255, 0.85);
    }
}

/* ===== FORCE transparent + blurred header on non-homepage pages (override earlier white !important rules) ===== */
html body:not(.home) .site-header {
    background: rgba(255, 255, 255, 0.30) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
    backdrop-filter: saturate(160%) blur(14px) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
    border-top: 4px solid rgba(201, 193, 173, 0.85) !important;
}
html body:not(.home) .site-header .header-top,
html body:not(.home) .site-header .header-main {
    background: transparent !important;
}
html body:not(.home) .site-header.scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    /* No blur once the header is fixed: see the .scrolled rule further down. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    html body:not(.home) .site-header {
          background: rgba(255, 255, 255, 0.85) !important;
    }
}

/* ===== FINAL: Header overlay style (like /tarifs) on all non-homepage pages =====
   - Header fully transparent, positioned absolute over a hero banner
   - Hero banner image injected via body::before on subpages without their own banner
   - Vertical pipe separators between nav links
*/

/* 1) Body becomes positioning context and reserves space for the hero banner */
html body:not(.home) {
    position: relative !important;
    padding-top: 0 !important; /* override earlier 162px rule */
}

/* 2) Inject a default hero banner via ::before on subpages that don't already have one */
html body.l-banner::before {
    content: '';
    display: block;
    width: 100%;
    height: 380px;
    background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), url('tarifs-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
}

/* 3) Header: fully transparent, absolute over the banner */
html body:not(.home) .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-top: none !important;
    z-index: 20 !important;
}
html body:not(.home) .site-header .header-top,
html body:not(.home) .site-header .header-main {
    background: transparent !important;
    box-shadow: none !important;
}

/* 4) When sticky/scrolled, give it a translucent backing for readability */
/* Fixed + backdrop-filter is the expensive combination: the browser re-reads,
   saturates and blurs the full-width strip behind this header on every scroll
   frame. This was the only header state that still reached a blur - the
   un-scrolled subpage header is overridden to `backdrop-filter: none` a few
   rules above. The background here is near opaque anyway, so a 14px blur
   behind 96% white buys almost nothing visible. The homepage header
   already did exactly this. */
html body:not(.home) .site-header.scrolled {
    position: fixed !important;
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* 5) Vertical pipe separators between main-nav links on subpages.
   Desktop only. Without the guard the display:flex here outranked the rule at
   line ~1448 that hides .main-nav below 1024px - it is later in the file and
   more specific - so every page except the homepage rendered the full desktop
   nav on a phone, wider than the screen. That was the horizontal scroll and
   the white strip down the side. */
@media (min-width: 1101px) {
  html body .site-header .main-nav {
      display: flex;
      align-items: center;
      gap: 0;
  }
  html body .site-header .main-nav > a + a,
  html body .site-header .main-nav > .has-submenu + a,
  html body .site-header .main-nav > a + .has-submenu,
  html body .site-header .main-nav > .has-submenu + .has-submenu {
      border-left: 1px solid rgba(60, 60, 60, 0.35);
  }
}
html body .site-header .main-nav > a,
html body .site-header .main-nav > .has-submenu > a {
    padding-left: 18px;
    padding-right: 18px;
}
/* Same band as the one near the top of the file. */
@media (min-width: 1101px) {
  html body .site-header .main-nav > a,
  html body .site-header .main-nav > .has-submenu > a {
      padding-left: 8px;
      padding-right: 8px;
  }
}
/* Don't put a left border on the PRENDRE RDV button */
html body .site-header .main-nav > a.btn,
html body .site-header .main-nav > a.btn-primary {
    border-left: none !important;
    margin-left: 12px;
}

/* 6) The tarifs page has its own banner now (section.page-hero), so no ::before is injected there either */

@media (max-width: 900px) {
    html body.l-banner::before {
          height: 260px;
    }
}
@media (max-width: 600px) {
    html body.l-banner::before {
          height: 200px;
    }
}

/* ===== Homepage hero takes the full viewport on load ===== */
body.home .hero {
    height: 100vh !important;
    min-height: 100vh !important;
}
body.home .hero-slider,
body.home .hero-slide {
    height: 100% !important;
}
/* On small screens, keep a sensible minimum so content remains readable */
@media (max-width: 600px) {
    body.home .hero {
          min-height: 560px !important;
    }
}


/* ===== SPECIALTY PAGES REDESIGN (Rhône-style: dark hero banner + centered clean content) ===== */

/* Hero banner: dark background with image overlay, centered white title */
html body section.page-hero.l-hero-banner {
  position: relative !important;
  background: #2a2a2a !important;
  color: #ffffff !important;
  padding: 170px 20px 50px !important;
  text-align: center !important;
  height: 420px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
html body section.page-hero.l-hero-banner::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(20,20,20,0.55), rgba(20,20,20,0.55)), var(--hero-bg, none);
  background-size: cover !important;
  background-position: center !important;
  z-index: 0 !important;
}
html body section.page-hero.l-hero-banner::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
html body section.page-hero.l-hero-banner .container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1100px !important;
  text-align: center !important;
}
html body section.page-hero.l-hero-banner h1 {
  font-family: var(--font-display) !important;
  font-size: var(--hero-h1, clamp(2rem, 4.2vw, 3.2rem)) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  word-spacing: 0.3em;
  color: #ffffff !important;
  margin: 0 0 18px !important;
  text-align: center !important;
}
html body section.page-hero.l-hero-banner h1::after {
  content: "" !important;
  display: block !important;
  width: 70px !important;
  height: 2px !important;
  background: #c9a86b !important;
  margin: 22px auto 0 !important;
}
html body section.page-hero.l-hero-banner p,
html body section.page-hero.l-hero-banner .lead {
  color: #e8e2d6 !important;
  font-size: 1.05rem !important;
  margin: 0 auto !important;
  max-width: 720px !important;
  text-align: center !important;
}

/* Content section: light cream background, centered narrow column */
body.l-content section.page-content {
  background: #f7f3ec !important;
  padding: 70px 20px 90px !important;
}
body.l-content section.page-content .container {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Breadcrumb / back link */
body.l-content .back-link,
body.l-content a[href="specialites.html"] {
  display: inline-block !important;
  margin: 0 0 36px !important;
  font-size: 0.9rem !important;
  color: #7a6a4a !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}
body.l-content .back-link:hover {
  color: #c9a86b !important;
}

/* Inline image: moderate size, centered, with soft shadow */
body.l-content .content-image {
  margin: 0 auto 40px !important;
  max-width: 720px !important;
  /* 8, like the buttons - see the picture-corner rule further up. */
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(40, 30, 15, 0.12) !important;
}
body.l-content .content-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 6px !important;
}

/* Section headings: centered uppercase, gold underline */
body.l-content .page-content h2 {
  font-family: var(--font-heading) !important;
  font-size: var(--h2-size) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #1a1a1a !important;
  text-align: center !important;
  margin: 56px auto 10px !important;
  position: relative !important;
}
body.l-content .page-content h2::after {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 2px !important;
  background: #c9a86b !important;
  margin: 14px auto 24px !important;
}

/* Paragraphs: centered, comfortable reading width */
body.l-content .page-content p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: #3a3a3a !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 18px !important;
}

/* Lists: centered with subtle bullets */
body.l-content .page-content ul,
body.l-content .page-content ol {
  max-width: 640px !important;
  margin: 0 auto 24px !important;
  padding-left: 0 !important;
  list-style: none !important;
  text-align: left !important;
}
body.l-content .page-content ul li,
body.l-content .page-content ol li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 10px !important;
  color: #3a3a3a !important;
  line-height: 1.7 !important;
}
body.l-content .page-content ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 11px !important;
  width: 6px !important;
  height: 6px !important;
  background: #c9a86b !important;
  border-radius: 50% !important;
}

/* FAQ details/accordion */
body.l-content .page-content details {
  max-width: 720px !important;
  margin: 0 auto 14px !important;
  background: #ffffff !important;
  border: 1px solid #ece4d3 !important;
  border-radius: 6px !important;
  padding: 0 !important;
  text-align: left !important;
}
body.l-content .page-content details summary {
  padding: 18px 22px !important;
  cursor: pointer !important;
  font-size: var(--h3-size);
  font-weight: 600 !important;
  color: #1a1a1a !important;
  list-style: none !important;
  position: relative !important;
  padding-right: 50px !important;
}
body.l-content .page-content details summary::-webkit-details-marker {
  display: none !important;
}
body.l-content .page-content details summary::after {
  content: "+" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50%;
  transform: translateY(-50%) !important;
  color: #c9a86b !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
}
body.l-content .page-content details[open] summary::after {
  content: "−" !important;
}
body.l-content .page-content details p {
  padding: 0 22px 18px !important;
  margin: 0 !important;
  text-align: left !important;
}

/* CTA block at bottom: centered, separated */
body.l-content .page-cta {
  margin: 60px auto 0 !important;
  padding: 40px 20px 0 !important;
  border-top: 1px solid #e3d9c4 !important;
  text-align: center !important;
  max-width: 720px !important;
}
body.l-content .page-cta h2 {
  margin-top: 0 !important;
}
body.l-content .page-cta .btn,
body.l-content .page-cta a.button {
  display: inline-block !important;
  margin-top: 10px !important;
}

/* Responsive */
@media (max-width: 768px) {
  html body section.page-hero.l-hero-banner {
    padding: 90px 18px 50px !important;
    height: 340px !important;
  }
  html body section.page-hero.l-hero-banner h1 {
    font-size: var(--hero-h1-m, 1.8rem) !important;
  }
  body.l-content section.page-content {
    padding: 50px 18px 70px !important;
  }
  body.l-content .content-image {
    margin-bottom: 30px !important;
  }
  body.l-content .content-image img {
    max-height: 260px !important;
  }
  body.l-content .page-content h2 {
    margin-top: 44px !important;
  }
}

/* ===== Header nav text size to match rhone-dental-clinic.ch (18px) ===== */
.main-nav > a, .has-submenu > a, .nav-list > li > a { font-size: 18px !important; }
/* ===== RDV buttons rounded corners ===== */

.btn, .btn-primary, .btn-outline, .btn-rdv, .nav-list .btn-rdv, .main-nav .btn-primary, .main-nav a.btn, .btn-rdv-card, .btn-send-application, .btn-send-contact, .btn-contact-primary, .btn-contact-whatsapp, .spec-cta-block .btn-rdv, .about-clinic__cta, a.btn-primary, a.btn { border-radius: 8px !important; }



/* === Per-page hero banners (overrides default ::before banner image) === */
html body[data-page="specialites"].l-banner::before{background-image:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),url('images/hero-specialites.jpg')!important;background-position:center 35%!important;}
html body[data-page="conseils"].l-banner::before{background-image:linear-gradient(rgba(255,255,255,0.08),rgba(255,255,255,0.08)),url('images/hero-conseils.jpg')!important;background-position:center 40%!important;}
html body[data-page="carriere"].l-banner::before{background-image:linear-gradient(rgba(255,255,255,0.08),rgba(255,255,255,0.08)),url('images/hero-carriere.jpg')!important;background-position:center 30%!important;}



/* ============================================
   BLOG / ACTUALITÉS — Page Conseils
   ============================================ */
.blog-section {
  background: #f7f5f2;
  padding: 72px 0 96px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(40, 50, 40, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(40, 50, 40, 0.14);
}

.blog-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e9e6df;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.06);
}

.blog-card-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(115, 139, 105, 0.95);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.blog-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-meta {
  font-size: 0.82rem;
  color: #8a8a7e;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.blog-card-meta i {
  margin-right: 6px;
  color: #738b69;
}

.blog-card-body h3 {
  color: #2c3a2c;
  margin: 0 0 10px;
}

.blog-card-body p {
  color: #5b6258;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}

.blog-card-body .read-more {
  display: inline-flex;
  align-items: center;
  /* 24px tall was under the 44px tap floor, and this is the card's only link. */
  min-height: 44px;
  gap: 8px;
  color: #738b69;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  letter-spacing: 0.02em;
  align-self: flex-start;
  position: relative;
  transition: color 0.25s ease, gap 0.25s ease;
}

.blog-card-body .read-more i {
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}

.blog-card-body .read-more:hover {
  color: #5a7252;
  gap: 12px;
}

.blog-card-body .read-more:hover i {
  transform: translateX(3px);
}

/* Tablet */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .blog-section {
    padding: 48px 0 64px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 0 18px;
  }
  .blog-card-body {
    padding: 20px 20px 24px;
  }
}


/* The advice articles carry SEO titles of up to 80 characters; a smaller title keeps
   them inside the banner height every page now has. */
body.l-article { --hero-h1: clamp(1.4rem, 2.8vw, 2.2rem); --hero-h1-m: 1.35rem; }



/* ============================================
   HERO BANNERS — Per-page background images
   ============================================ */

body[data-page="mentions-legales"] section.page-hero,
body[data-page="politique-de-confidentialite"] section.page-hero { --hero-bg: url('images/bg-page-hero.webp'); }

/* Specialty hub page */
body[data-page="specialites"] section.page-hero { --hero-bg: url('images/hero-specialites.jpg'); }

/* Conseils / blog */
body[data-page="conseils"] section.page-hero { --hero-bg: url('images/salle-de-soins.jpg'); }

/* Tarifs */
body[data-page="tarifs"] section.page-hero { --hero-bg: url('tarifs-banner.jpg'); }
body[data-page="prendre-rdv"] section.page-hero { --hero-bg: url('tarifs-banner.jpg'); }
/* Contact */
body[data-page="contact"] section.page-hero { --hero-bg: url('images/hero-contact.jpg'); }

/* Carriere */
body[data-page="carriere"] section.page-hero { --hero-bg: url('images/cabinet-05-second-room.jpg'); }

/* CABINET submenu — pages that used to declare their own hero inline. Their
   photographs are reattached here so the canonical .l-hero-banner rules paint
   them. See tools/normalise-bespoke-heroes.js. */
body[data-page="le-cabinet"] section.page-hero { --hero-bg: url('cabinet-accueil.jpg'); }
body[data-page="notre-histoire"] section.page-hero { --hero-bg: url('cabinet-salle-3.jpg'); }
body[data-page="notre-equipe"] section.page-hero { --hero-bg: url('images/salle-de-soins.jpg'); }
body[data-page="notre-cabinet"] section.page-hero { --hero-bg: url('images/salle-de-soins.jpg'); }
body[data-page="excellence"] section.page-hero { --hero-bg: url('images/cabinet-04-sterilization.jpg'); }

/* Individual specialty pages — selected via the content-image src */
body[data-hero="service-01-hygiene"] section.page-hero { --hero-bg: url('images/service-01-hygiene.jpg'); }
body[data-hero="service-02-implantologie"] section.page-hero { --hero-bg: url('images/service-02-implantologie.jpg'); }
body[data-hero="service-03-facettes"] section.page-hero { --hero-bg: url('images/service-03-facettes.jpg'); }
body[data-hero="service-04-urgences"] section.page-hero { --hero-bg: url('images/service-04-urgences.jpg'); }
body[data-hero="service-05-sure-smile"] section.page-hero { --hero-bg: url('images/service-05-sure-smile.jpg'); }
body[data-hero="service-06-prophylactiques"] section.page-hero { --hero-bg: url('images/service-06-prophylactiques.jpg'); }
body[data-hero="service-07-protheses"] section.page-hero { --hero-bg: url('images/service-07-protheses.jpg'); }
body[data-hero="service-08-orthodontie"] section.page-hero { --hero-bg: url('images/service-08-orthodontie.jpg'); }
body[data-hero="service-09-endodontie"] section.page-hero { --hero-bg: url('images/service-09-endodontie.jpg'); }
body[data-hero="service-10-parodontologie"] section.page-hero { --hero-bg: url('images/service-10-parodontologie.jpg'); }
body[data-hero="service-11-pedodontie"] section.page-hero { --hero-bg: url('images/service-11-pedodontie.jpg'); }
body[data-hero="service-12-blanchiment"] section.page-hero { --hero-bg: url('images/service-12-blanchiment.jpg'); }
body[data-hero="service-13-couronnes"] section.page-hero { --hero-bg: url('images/service-13-couronnes.jpg'); }
body[data-hero="service-14-chirurgie"] section.page-hero { --hero-bg: url('images/service-14-chirurgie.jpg'); }
body[data-hero="service-15-soins-conservateurs"] section.page-hero { --hero-bg: url('images/service-15-soins-conservateurs.jpg'); }
body[data-hero="service-16-radiologie"] section.page-hero { --hero-bg: url('images/radiologie-salle.jpg'); }
/* the room is taller than the band: show the machine, not the floor */
html body[data-hero="service-16-radiologie"] section.page-hero.l-hero-banner::before { background-position: center 30% !important; }
body[data-hero="service-17-inlays"] section.page-hero { --hero-bg: url('images/service-17-inlays.jpg'); }
body[data-hero="service-18-bruxisme"] section.page-hero { --hero-bg: url('images/service-18-bruxisme.jpg'); }
body[data-hero="service-19-detartrage"] section.page-hero { --hero-bg: url('images/service-19-detartrage.jpg'); }
body[data-hero="service-20-esthetique"] section.page-hero { --hero-bg: url('images/service-20-esthetique.jpg'); }


/* Stronger hero overlay to ensure title readability on bright images and consistent header contrast */
html body section.page-hero.l-hero-banner::before {
  background-image: linear-gradient(rgba(15,20,18,0.55), rgba(15,25,20,0.82)), var(--hero-bg, none) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Make hero title pop on any background */
html body section.page-hero.l-hero-banner h1 {
  text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
}
html body section.page-hero.l-hero-banner p,
html body section.page-hero.l-hero-banner .lead {
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}


/* The CABINET submenu heroes used to be normalized here by hand, at
   110px of top padding, which left the title crossing the header logo. They now
   carry page-hero l-hero-banner and take the canonical rules above. */

/* =============================================================
   Header contrast fix on pages with a banner
   Adds a soft dark gradient strip behind the absolute header
   and forces white nav text + subtle text-shadow so links are
   always readable over any banner image (light or dark).
   Scoped via body.l-hero so the homepage (no banner) is untouched.
============================================================= */
html body.l-hero header.site-header {
  position: absolute;
  z-index: 50;
}
html body.l-hero header.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: -1;
}
/* Make header content readable over the banner: white text + soft shadow.
   Only while the header sits over the image. Once .scrolled lands it becomes
   a near-opaque white bar, and white text on it measured 1:1 - invisible. */
html body.l-hero header.site-header:not(.scrolled) .header-top a,
html body.l-hero header.site-header:not(.scrolled) .header-main .main-nav > a:not(.btn):not(.cta):not(.btn-rdv):not(.prendre-rdv),
html body.l-hero header.site-header:not(.scrolled) .header-main .has-submenu > a {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
/* Hover state: warm accent gold instead of muddy color */
html body.l-hero header.site-header:not(.scrolled) .header-main .main-nav > a:hover,
html body.l-hero header.site-header:not(.scrolled) .header-main .has-submenu > a:hover {
  color: #d9c089 !important;
}
/* Icons inside header links (phone, envelope) match white */
html body.l-hero header.site-header:not(.scrolled) .header-top i {
  color: #ffffff !important;
  opacity: 0.9;
}

/* ===== SELECTEUR DE LANGUE ===== */
/* Trois emplacements, parce que .header-top disparait sous 768px :
   la barre du haut, le panneau mobile, et le bouton flottant lateral. */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: 18px;
}
.lang-switcher__item {
  display: inline-block;
  padding: 3px 7px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #555;
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.2s ease, background 0.2s ease;
}
.lang-switcher__item:hover { color: var(--primary-dark); background: var(--primary-light); }
.lang-switcher__item.is-current {
  color: var(--white);
  background: var(--primary);
}
.lang-switcher__item.is-current:hover { background: var(--primary-dark); color: var(--white); }
@media (max-width: 980px) {
  .lang-switcher { margin-left: 0; margin-inline: auto; }
}

/* Panneau mobile : le seul selecteur visible sous 768px. */
.mobile-nav-panel ul li.mobile-lang {
  border-bottom: none;
  padding: 18px 4px 4px;
}
.mobile-lang__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}
.mobile-lang__items { display: flex; flex-wrap: wrap; gap: 6px; }
.mobile-nav-panel ul li.mobile-lang a.mobile-lang__item {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dark);
}
.mobile-nav-panel ul li.mobile-lang a.mobile-lang__item.is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.lang-dropdown a.is-current { background: var(--primary-light); font-weight: 700; }

/* Les pages a hero forcent `.header-top a { color:#fff !important }` pour rester
   lisibles sur l'image. Ca atteint aussi le selecteur : sans ces trois regles,
   le survol donne du blanc sur vert pale, illisible. */
.lang-switcher__item:hover { color: var(--primary-dark) !important; }
.lang-switcher__item.is-current,
.lang-switcher__item.is-current:hover { color: var(--white) !important; }

/* Onze pages n'ont pas de panneau de navigation mobile : les six pages locales,
   404, excellence, notre-cabinet, prendre-rdv, blanchiment. Sous 768px leur
   .header-top est masque, donc le selecteur y disparaitrait completement. On le
   remonte, seul, dans une bande compacte. Les pages qui ont un panneau gardent
   le comportement d'origine, le selecteur y vivant dans le menu burger. */
@media (max-width: 768px) {
  body:not(.l-mobilenav) .site-header .header-top {
    display: flex;
    justify-content: center;
    padding: 6px 16px 0;
  }
  body:not(.l-mobilenav) .site-header .header-top > *:not(.lang-switcher) {
    display: none;
  }
}


/* A small lift on the main buttons, only where there is a pointer to hover
   with, and not for visitors who asked for less motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.btn-primary, a.btn-rdv { transition: transform .25s ease, background-color .3s ease, box-shadow .25s ease; }
  a.btn-primary:hover, a.btn-rdv:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
}

/* === WebP backgrounds (generated by tools/optimize-css-and-preload.js) === */
@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  html body.l-banner::before { background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), image-set(url('tarifs-banner.webp') type('image/webp'), url('tarifs-banner.jpg') type('image/jpeg')); }
  html body[data-page="specialites"].l-banner::before{background-image:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),image-set(url('images/hero-specialites.webp') type('image/webp'), url('images/hero-specialites.jpg') type('image/jpeg'))!important;background-position:center 35%!important;}
  html body[data-page="conseils"].l-banner::before{background-image:linear-gradient(rgba(255,255,255,0.08),rgba(255,255,255,0.08)),image-set(url('images/hero-conseils.webp') type('image/webp'), url('images/hero-conseils.jpg') type('image/jpeg'))!important;background-position:center 40%!important;}
  html body[data-page="carriere"].l-banner::before{background-image:linear-gradient(rgba(255,255,255,0.08),rgba(255,255,255,0.08)),image-set(url('images/hero-carriere.webp') type('image/webp'), url('images/hero-carriere.jpg') type('image/jpeg'))!important;background-position:center 30%!important;}
  body[data-page="specialites"] section.page-hero { --hero-bg: image-set(url('images/hero-specialites.webp') type('image/webp'), url('images/hero-specialites.jpg') type('image/jpeg')); }
  body[data-page="conseils"] section.page-hero { --hero-bg: image-set(url('images/salle-de-soins.webp') type('image/webp'), url('images/salle-de-soins.jpg') type('image/jpeg')); }
  body[data-page="tarifs"] section.page-hero { --hero-bg: image-set(url('tarifs-banner.webp') type('image/webp'), url('tarifs-banner.jpg') type('image/jpeg')); }
  body[data-page="prendre-rdv"] section.page-hero { --hero-bg: image-set(url('tarifs-banner.webp') type('image/webp'), url('tarifs-banner.jpg') type('image/jpeg')); }
  body[data-page="contact"] section.page-hero { --hero-bg: image-set(url('images/hero-contact.webp') type('image/webp'), url('images/hero-contact.jpg') type('image/jpeg')); }
  body[data-page="carriere"] section.page-hero { --hero-bg: image-set(url('images/cabinet-05-second-room.webp') type('image/webp'), url('images/cabinet-05-second-room.jpg') type('image/jpeg')); }
  body[data-page="le-cabinet"] section.page-hero { --hero-bg: image-set(url('cabinet-accueil.webp') type('image/webp'), url('cabinet-accueil.jpg') type('image/jpeg')); }
  body[data-page="notre-histoire"] section.page-hero { --hero-bg: image-set(url('cabinet-salle-3.webp') type('image/webp'), url('cabinet-salle-3.jpg') type('image/jpeg')); }
  body[data-page="notre-equipe"] section.page-hero { --hero-bg: image-set(url('images/salle-de-soins.webp') type('image/webp'), url('images/salle-de-soins.jpg') type('image/jpeg')); }
  body[data-page="notre-cabinet"] section.page-hero { --hero-bg: image-set(url('images/salle-de-soins.webp') type('image/webp'), url('images/salle-de-soins.jpg') type('image/jpeg')); }
  body[data-page="excellence"] section.page-hero { --hero-bg: image-set(url('images/cabinet-04-sterilization.webp') type('image/webp'), url('images/cabinet-04-sterilization.jpg') type('image/jpeg')); }
  body[data-hero="service-01-hygiene"] section.page-hero { --hero-bg: image-set(url('images/service-01-hygiene.webp') type('image/webp'), url('images/service-01-hygiene.jpg') type('image/jpeg')); }
  body[data-hero="service-02-implantologie"] section.page-hero { --hero-bg: image-set(url('images/service-02-implantologie.webp') type('image/webp'), url('images/service-02-implantologie.jpg') type('image/jpeg')); }
  body[data-hero="service-03-facettes"] section.page-hero { --hero-bg: image-set(url('images/service-03-facettes.webp') type('image/webp'), url('images/service-03-facettes.jpg') type('image/jpeg')); }
  body[data-hero="service-04-urgences"] section.page-hero { --hero-bg: image-set(url('images/service-04-urgences.webp') type('image/webp'), url('images/service-04-urgences.jpg') type('image/jpeg')); }
  body[data-hero="service-05-sure-smile"] section.page-hero { --hero-bg: image-set(url('images/service-05-sure-smile.webp') type('image/webp'), url('images/service-05-sure-smile.jpg') type('image/jpeg')); }
  body[data-hero="service-06-prophylactiques"] section.page-hero { --hero-bg: image-set(url('images/service-06-prophylactiques.webp') type('image/webp'), url('images/service-06-prophylactiques.jpg') type('image/jpeg')); }
  body[data-hero="service-07-protheses"] section.page-hero { --hero-bg: image-set(url('images/service-07-protheses.webp') type('image/webp'), url('images/service-07-protheses.jpg') type('image/jpeg')); }
  body[data-hero="service-08-orthodontie"] section.page-hero { --hero-bg: image-set(url('images/service-08-orthodontie.webp') type('image/webp'), url('images/service-08-orthodontie.jpg') type('image/jpeg')); }
  body[data-hero="service-09-endodontie"] section.page-hero { --hero-bg: image-set(url('images/service-09-endodontie.webp') type('image/webp'), url('images/service-09-endodontie.jpg') type('image/jpeg')); }
  body[data-hero="service-10-parodontologie"] section.page-hero { --hero-bg: image-set(url('images/service-10-parodontologie.webp') type('image/webp'), url('images/service-10-parodontologie.jpg') type('image/jpeg')); }
  body[data-hero="service-11-pedodontie"] section.page-hero { --hero-bg: image-set(url('images/service-11-pedodontie.webp') type('image/webp'), url('images/service-11-pedodontie.jpg') type('image/jpeg')); }
  body[data-hero="service-12-blanchiment"] section.page-hero { --hero-bg: image-set(url('images/service-12-blanchiment.webp') type('image/webp'), url('images/service-12-blanchiment.jpg') type('image/jpeg')); }
  body[data-hero="service-13-couronnes"] section.page-hero { --hero-bg: image-set(url('images/service-13-couronnes.webp') type('image/webp'), url('images/service-13-couronnes.jpg') type('image/jpeg')); }
  body[data-hero="service-14-chirurgie"] section.page-hero { --hero-bg: image-set(url('images/service-14-chirurgie.webp') type('image/webp'), url('images/service-14-chirurgie.jpg') type('image/jpeg')); }
  body[data-hero="service-15-soins-conservateurs"] section.page-hero { --hero-bg: image-set(url('images/service-15-soins-conservateurs.webp') type('image/webp'), url('images/service-15-soins-conservateurs.jpg') type('image/jpeg')); }
  body[data-hero="service-16-radiologie"] section.page-hero { --hero-bg: image-set(url('images/radiologie-salle.webp') type('image/webp'), url('images/radiologie-salle.jpg') type('image/jpeg')); }
  body[data-hero="service-17-inlays"] section.page-hero { --hero-bg: image-set(url('images/service-17-inlays.webp') type('image/webp'), url('images/service-17-inlays.jpg') type('image/jpeg')); }
  body[data-hero="service-18-bruxisme"] section.page-hero { --hero-bg: image-set(url('images/service-18-bruxisme.webp') type('image/webp'), url('images/service-18-bruxisme.jpg') type('image/jpeg')); }
  body[data-hero="service-19-detartrage"] section.page-hero { --hero-bg: image-set(url('images/service-19-detartrage.webp') type('image/webp'), url('images/service-19-detartrage.jpg') type('image/jpeg')); }
  body[data-hero="service-20-esthetique"] section.page-hero { --hero-bg: image-set(url('images/service-20-esthetique.webp') type('image/webp'), url('images/service-20-esthetique.jpg') type('image/jpeg')); }
}