/* =========================================================================
   DN Audition — Polish layer
   Loaded LAST. Homepage visual refinements + dedicated guide category pages.
   Brand: --primary #636947 / --secondary #7a8450 / --accent #8b9a5c
   ========================================================================= */

:root {
  --ahi-ink: #1f2937;
  --ahi-muted: #6b7280;
  --ahi-line: #e7e5df;
  --ahi-sand: #f6f5f1;
  --ahi-card-radius: 20px;
  --ahi-shadow-soft: 0 1px 2px rgba(31,41,55,.04), 0 8px 24px -12px rgba(31,41,55,.12);
  --ahi-shadow-hover: 0 12px 40px -16px rgba(99,105,71,.35);
  --ahi-ease: cubic-bezier(.22,1,.36,1);
}

/* -------------------------------------------------------------------------
   1. HOMEPAGE — section rhythm & eyebrow consistency
   ------------------------------------------------------------------------- */

/* Consistent vertical rhythm between major home sections */
.site-main > .reveal > section,
.site-main > section {
  scroll-margin-top: 90px;
}

/* Section eyebrows (NOS SERVICES, TECHNOLOGIES…) — unify into pills */
.section-badge,
.services-badge,
.tech-badge,
.engagements-badge,
.why-us-badge,
.testimonials-badge,
.deroulement-badge,
.gallery-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .72rem;
  color: var(--primary-color, #636947);
  background: color-mix(in srgb, var(--primary-color, #636947) 9%, #fff);
  padding: .5em 1em;
  border-radius: 999px;
  line-height: 1;
}

/* Tighten section titles */
.section-title,
.services-section h2,
.tech-section h2,
.why-us-section h2,
.testimonials-section h2 {
  letter-spacing: -.02em;
}

/* -------------------------------------------------------------------------
   2. HOMEPAGE — cards (services, tech, why-us, patients) refinement
   ------------------------------------------------------------------------- */
.service-card,
.tech-card,
.why-us-card,
.patient-card,
.engagement-card {
  border-radius: var(--ahi-card-radius) !important;
  border: 1px solid var(--ahi-line);
  box-shadow: var(--ahi-shadow-soft);
  transition: transform .45s var(--ahi-ease), box-shadow .45s var(--ahi-ease), border-color .45s var(--ahi-ease);
}
.service-card:hover,
.tech-card:hover,
.why-us-card:hover,
.patient-card:hover,
.engagement-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ahi-shadow-hover);
  border-color: color-mix(in srgb, var(--primary-color, #636947) 35%, #fff);
}

/* Card icon chips — soft brand tint instead of flat */
.service-icon,
.tech-icon,
.why-us-icon {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color, #636947) 14%, #fff),
    color-mix(in srgb, var(--secondary-color, #7a8450) 8%, #fff)) !important;
  color: var(--primary-color, #636947);
}

/* Gallery images — uniform aspect + subtle zoom */
.gallery-item,
.gallery-item img {
  border-radius: var(--ahi-card-radius);
}
.gallery-item {
  overflow: hidden;
}
.gallery-item img {
  transition: transform .7s var(--ahi-ease);
}
.gallery-item:hover img {
  transform: scale(1.06);
}

/* Trust / stats divider polish in hero */
.hero-stats {
  border-radius: var(--ahi-card-radius);
}

/* Primary buttons — slightly richer */
.btn-primary {
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary-color, #636947) 70%, transparent);
}
.btn-primary:hover {
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--primary-color, #636947) 75%, transparent);
}

/* -------------------------------------------------------------------------
   3. GUIDE INDEX — category cards are now links: make them feel clickable
   ------------------------------------------------------------------------- */
.guide-category-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.guide-category-card .guide-category-topline span:last-child {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.guide-category-card:hover .guide-category-topline span:last-child {
  color: var(--primary-color, #636947);
}

/* -------------------------------------------------------------------------
   4. GUIDE CATEGORY PAGE — dedicated /guide-auditif/c/{slug}/
   ------------------------------------------------------------------------- */
.ahi-guide-category {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* Breadcrumb */
.guide-cat-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--ahi-muted);
  padding: clamp(20px, 4vw, 36px) 0 4px;
}
.guide-cat-breadcrumb a {
  color: var(--ahi-muted);
  text-decoration: none;
  transition: color .2s;
}
.guide-cat-breadcrumb a:hover { color: var(--primary-color, #636947); }
.guide-cat-breadcrumb .is-current { color: var(--ahi-ink); font-weight: 600; }
.guide-cat-breadcrumb span[aria-hidden] { opacity: .5; }

/* Hero */
.guide-cat-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  margin: 16px 0 clamp(32px, 5vw, 52px);
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background-image: var(--guide-cat-image);
  background-size: cover;
  background-position: center;
  color: #fff;
  isolation: isolate;
}
.guide-cat-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(31,38,24,.15) 0%, rgba(31,38,24,.55) 55%, rgba(31,38,24,.88) 100%),
    linear-gradient(115deg, color-mix(in srgb, var(--primary-color,#636947) 55%, transparent), transparent 60%);
  z-index: -1;
}
.guide-cat-hero__inner {
  padding: clamp(28px, 5vw, 48px);
  max-width: 720px;
}
.guide-cat-hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 700;
  padding: .45em .9em;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28);
  margin-bottom: 1rem;
}
.guide-cat-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
  color: #fff;
}
.guide-cat-hero__desc {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  margin: 0 0 1.4rem;
  max-width: 56ch;
}
.guide-cat-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.guide-cat-hero__count {
  font-weight: 700;
  font-size: .95rem;
  padding: .55em 1.1em;
  border-radius: 999px;
  background: #fff;
  color: var(--primary-color, #636947);
}
.guide-cat-hero__back {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  opacity: .92;
  transition: opacity .2s, transform .2s var(--ahi-ease);
}
.guide-cat-hero__back:hover { opacity: 1; transform: translateX(-3px); }

/* Article grid */
.guide-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 30px);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.guide-cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ahi-line);
  border-radius: var(--ahi-card-radius);
  overflow: hidden;
  box-shadow: var(--ahi-shadow-soft);
  transition: transform .45s var(--ahi-ease), box-shadow .45s var(--ahi-ease), border-color .45s var(--ahi-ease);
}
.guide-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ahi-shadow-hover);
  border-color: color-mix(in srgb, var(--primary-color,#636947) 35%, #fff);
}
.guide-cat-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ahi-sand);
}
.guide-cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ahi-ease);
}
.guide-cat-card:hover .guide-cat-card__media img { transform: scale(1.07); }
.guide-cat-card__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 22px 22px 20px;
  flex: 1;
}
.guide-cat-card__tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary-color, #636947);
  background: color-mix(in srgb, var(--primary-color,#636947) 10%, #fff);
  padding: .4em .8em;
  border-radius: 999px;
}
.guide-cat-card__title {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.guide-cat-card__title a {
  color: var(--ahi-ink);
  text-decoration: none;
  transition: color .2s;
}
.guide-cat-card__title a:hover { color: var(--primary-color, #636947); }
.guide-cat-card__excerpt {
  margin: 0;
  color: var(--ahi-muted);
  font-size: .92rem;
  line-height: 1.55;
  flex: 1;
}
.guide-cat-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .4rem;
  padding-top: .85rem;
  border-top: 1px solid var(--ahi-line);
  font-size: .82rem;
  color: var(--ahi-muted);
}
.guide-cat-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--primary-color, #636947);
  text-decoration: none;
  white-space: nowrap;
}
.guide-cat-card__link svg { transition: transform .25s var(--ahi-ease); }
.guide-cat-card:hover .guide-cat-card__link svg { transform: translateX(3px); }

/* Explore other categories */
.guide-cat-explore {
  border-top: 1px solid var(--ahi-line);
  padding: clamp(32px, 5vw, 52px) 0 clamp(48px, 6vw, 72px);
}
.guide-cat-explore__head span {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--primary-color, #636947);
}
.guide-cat-explore__head h2 {
  margin: .35rem 0 1.6rem;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  letter-spacing: -.02em;
}
.guide-cat-explore__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.guide-cat-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--ahi-line);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: var(--ahi-ink);
  transition: transform .3s var(--ahi-ease), box-shadow .3s var(--ahi-ease), border-color .3s var(--ahi-ease);
}
.guide-cat-chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--ahi-shadow-soft);
  border-color: color-mix(in srgb, var(--primary-color,#636947) 40%, #fff);
}
.guide-cat-chip__media {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
}
.guide-cat-chip__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.guide-cat-chip__text strong { font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; }
.guide-cat-chip__text small { color: var(--ahi-muted); font-size: .8rem; }
.guide-cat-chip__arrow { color: var(--primary-color, #636947); flex: 0 0 auto; transition: transform .25s var(--ahi-ease); }
.guide-cat-chip:hover .guide-cat-chip__arrow { transform: translateX(3px); }

@media (max-width: 640px) {
  .guide-cat-hero { min-height: 240px; border-radius: 20px; }
  .guide-cat-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   5. SECTION DÉROULEMENT — banner (Gemini) + step illustrations (Recraft SVG)
   ------------------------------------------------------------------------- */
.deroulement-banner {
  position: relative;
  margin: 0 0 clamp(32px, 5vw, 52px);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--ahi-shadow-soft);
  aspect-ratio: 1600 / 560;
}
.deroulement-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.deroulement-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary-color,#636947) 30%, transparent) 0%,
    transparent 45%);
  pointer-events: none;
}
.deroulement-banner__badge {
  position: absolute;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .85rem;
  font-weight: 700;
  color: var(--primary-color, #636947);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  padding: .65em 1.1em;
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(31,41,55,.4);
  z-index: 2;
}

/* Step cards: anchor illustration, refine look */
.deroulement-step {
  position: relative;
  border: 1px solid var(--ahi-line);
  box-shadow: var(--ahi-shadow-soft);
  overflow: hidden;
}
.deroulement-step:hover {
  box-shadow: var(--ahi-shadow-hover) !important;
  border-color: color-mix(in srgb, var(--primary-color,#636947) 30%, #fff);
}
.step-illu {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 64px;
  height: 64px;
  opacity: .9;
  pointer-events: none;
}
.step-illu img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* keep text clear of the illustration on the right */
.deroulement-step .step-content { padding-right: 58px; }

/* Suivi block illustration uses generated SVG instead of inline stroke svg */
.deroulement-suivi .suivi-icon img {
  width: 64px;
  height: 64px;
  /* white-tint the olive SVG so it reads on the green gradient block */
  filter: brightness(0) invert(1);
  opacity: .95;
}

@media (max-width: 640px) {
  .deroulement-banner { aspect-ratio: 16 / 11; border-radius: 18px; }
  .step-illu { width: 48px; height: 48px; top: 12px; right: 12px; }
  .deroulement-step .step-content { padding-right: 0; }
}

/* =========================================================================
   PART 6 — EDITORIAL DESIGN-SYSTEM ELEVATION (loaded last, wins cascade)
   Art direction: Editorial medical premium — warm ivory canvas, Fraunces
   display serif + Manrope workhorse, single olive accent, hairline borders,
   mono labels, generous vertical rhythm. Self-hosted fonts (no extra cost).
   ========================================================================= */

:root {
  --ds-ink: #232a1c;            /* deep olive-tinted near-black (not pure) */
  --ds-ink-soft: #4b513f;
  --ds-muted: #7c8170;
  --ds-olive: #636947;
  --ds-olive-deep: #4d522f;
  --ds-sage: #7a8450;
  --ds-canvas: #faf8f3;         /* warm ivory */
  --ds-canvas-2: #f3f1e8;       /* alt band */
  --ds-line: #e6e3d8;           /* hairline, tinted */
  --ds-line-strong: #d6d3c4;
  --ds-gold: #b08d57;           /* restrained warm accent, used sparingly */
  --ds-r-sm: 12px;
  --ds-r: 18px;
  --ds-r-lg: 26px;
  --ds-shadow: 0 1px 2px rgba(35,42,28,.04), 0 12px 30px -16px rgba(35,42,28,.18);
  --ds-shadow-lift: 0 18px 50px -22px rgba(77,82,47,.4);
  --ds-ease: cubic-bezier(.22,1,.36,1);
}

/* ---- Canvas: warm ivory instead of flat white ---- */
body { background: var(--ds-canvas); color: var(--ds-ink); }
.section, .services-section, .gallery-section, .engagements-section,
.technologies-section, .why-us-section, .deroulement-section,
.testimonials-section, .patients-section, .pourquoi-section, .faq-section,
.contact-section {
  background: transparent;
}
/* alternate band rhythm: every other section gets the slightly deeper ivory */
.gallery-section, .technologies-section, .deroulement-section,
.patients-section, .faq-section {
  background: var(--ds-canvas-2);
}

/* -------------------------------------------------------------------------
   TYPOGRAPHY — the main lever. Fraunces display, Manrope body, mono labels.
   ------------------------------------------------------------------------- */
.section-title,
.hero-content h1, .hero-slide-title,
.cta-section h2, .contact-section h2,
.deroulement-suivi h3, .guide-cat-hero__title,
.guide-cat-explore__head h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.06 !important;
  color: var(--ds-ink);
}
.section-title { font-size: clamp(1.9rem, 3.4vw, 3rem) !important; }
.hero-content h1, .hero-slide-title { font-size: clamp(2.4rem, 5vw, 4rem) !important; }

/* Section eyebrow → mono uppercase, no pill, with a leading rule */
.section-label {
  font-family: 'Manrope', sans-serif !important;
  font-feature-settings: "tnum" 1;
  display: inline-flex !important;
  align-items: center;
  gap: .6em;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ds-olive) !important;
  background: none !important;
  padding: 0 !important;
}
.section-label::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--ds-olive);
  display: inline-block;
}
/* the old divider line under labels: hide, the eyebrow rule replaces it */
.section-header .section-divider { display: none !important; }

.section-header { max-width: 760px; }
.section-subtitle {
  font-family: 'Manrope', sans-serif;
  color: var(--ds-muted) !important;
  font-size: clamp(1rem, 1.4vw, 1.12rem) !important;
  line-height: 1.6 !important;
  max-width: 60ch;
}

/* Card titles in Fraunces for editorial tension */
.service-card h3, .why-us-card h3, .tech-card h3,
.patient-card h3, .guide-cat-card__title, .faq-question span {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ds-ink);
}

/* -------------------------------------------------------------------------
   BUTTONS — refined, hairline secondary, confident primary
   ------------------------------------------------------------------------- */
.btn-primary {
  background: var(--ds-olive) !important;
  border: 1px solid var(--ds-olive) !important;
  box-shadow: 0 8px 20px -10px rgba(77,82,47,.6) !important;
  transition: transform .2s var(--ds-ease), box-shadow .25s var(--ds-ease), background .2s !important;
}
.btn-primary:hover {
  background: var(--ds-olive-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(77,82,47,.7) !important;
}
.btn-secondary, .btn-outline {
  background: transparent !important;
  border: 1px solid var(--ds-line-strong) !important;
  color: var(--ds-ink) !important;
  transition: border-color .2s, background .2s, transform .2s var(--ds-ease) !important;
}
.btn-secondary:hover, .btn-outline:hover {
  border-color: var(--ds-olive) !important;
  background: color-mix(in srgb, var(--ds-olive) 6%, transparent) !important;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   CARDS — hairline borders over fuzzy shadows; tight directional lift
   ------------------------------------------------------------------------- */
.service-card, .tech-card, .why-us-card, .patient-card,
.engagement-card, .guide-cat-card, .faq-item {
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r) !important;
  box-shadow: none !important;
  transition: transform .35s var(--ds-ease), box-shadow .35s var(--ds-ease), border-color .35s var(--ds-ease) !important;
}
.service-card:hover, .tech-card:hover, .why-us-card:hover,
.patient-card:hover, .engagement-card:hover, .guide-cat-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--ds-shadow-lift) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 30%, var(--ds-line)) !important;
}

/* Icon chips — soft tonal, single hue */
.service-icon, .tech-icon, .why-us-icon {
  background: color-mix(in srgb, var(--ds-olive) 10%, #fffdf8) !important;
  color: var(--ds-olive) !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 16%, transparent);
  border-radius: 14px !important;
}

/* Service feature ticks → olive */
.service-features li::marker { color: var(--ds-olive); }

/* -------------------------------------------------------------------------
   FAQ — make it an editorial accordion (hairline rows, serif questions)
   ------------------------------------------------------------------------- */
.faq-item { overflow: hidden; }
.faq-question {
  font-size: 1.08rem;
  padding: 1.35rem 1.5rem !important;
}
.faq-question[aria-expanded="true"] { color: var(--ds-olive); }
.faq-icon { transition: transform .3s var(--ds-ease); color: var(--ds-olive); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }

/* -------------------------------------------------------------------------
   CTA — deep olive editorial band with serif headline
   ------------------------------------------------------------------------- */
.cta-section {
  background: linear-gradient(160deg, var(--ds-olive) 0%, var(--ds-olive-deep) 100%) !important;
}
.cta-section h2 { color: #fff !important; }
.cta-section p { color: rgba(255,255,255,.86) !important; }
.cta-section .btn-primary {
  background: #fff !important; color: var(--ds-olive-deep) !important; border-color:#fff !important;
}
.cta-section .btn-primary:hover { background: var(--ds-canvas) !important; }
.cta-section .btn-secondary { border-color: rgba(255,255,255,.4) !important; color:#fff !important; }
.cta-section .btn-secondary:hover { background: rgba(255,255,255,.12) !important; border-color:#fff !important; }
.cta-feature { color: rgba(255,255,255,.92) !important; }
.cta-feature svg { color: #fff; }

/* -------------------------------------------------------------------------
   REASSURANCE BAR — hairline divider strip
   ------------------------------------------------------------------------- */
.reassurance-bar {
  background: #fffdf8 !important;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
}

/* -------------------------------------------------------------------------
   MOTION — gentle upward settle when the theme JS adds `.active`. Content is
   NEVER hidden by opacity (avoids blank-until-scroll on fast scroll / no-JS /
   crawlers); we only animate a small translate that self-heals to none.
   ------------------------------------------------------------------------- */
html.js .reveal:not(.active) { transform: translateY(14px); }
.reveal { transition: transform .55s var(--ds-ease); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Focus-visible — accessible, on-brand */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, .faq-question:focus-visible {
  outline: 2px solid var(--ds-olive);
  outline-offset: 2px;
  border-radius: 6px;
}

/* -------------------------------------------------------------------------
   PART 7 — FINISHING DETAILS
   ------------------------------------------------------------------------- */

/* Hero stats numbers → Fraunces, with mono labels */
.hero-stats .stat-number, .hero-stat-number,
.hero-stats strong, .hero-stats .stat-value {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  color: var(--ds-olive-deep) !important;
}
.hero-stats .stat-label, .hero-stat-label {
  font-size: .7rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--ds-muted) !important;
}

/* Primary nav — refined tracking + understated olive hover with underline grow */
.main-nav a, .nav-menu a, .primary-menu a, .site-nav a {
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
  transition: color .2s var(--ds-ease);
}
.main-nav a::after, .nav-menu a::after, .primary-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--ds-olive);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ds-ease);
}
.main-nav a:hover, .nav-menu a:hover, .primary-menu a:hover { color: var(--ds-olive) !important; }
.main-nav a:hover::after, .nav-menu a:hover::after, .primary-menu a:hover::after { transform: scaleX(1); }

/* Stat numbers anywhere in stats blocks (reassurance/why-us counters) */
.stat-number, .counter-number, .reassurance-number {
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -.02em;
  color: var(--ds-olive-deep) !important;
}

/* Google review pill — refine */
.trust-badge, .google-rating-badge, .reviews-google-badge {
  border: 1px solid var(--ds-line) !important;
  box-shadow: var(--ds-shadow) !important;
  background: #fffdf8 !important;
}

/* Patients section card titles in serif, names readable */
.patient-card .patient-name, .patient-card h3, .patient-card h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ds-ink);
}

/* Section title — add a tiny optical refinement: tighter on very large */
@media (min-width: 1024px) {
  .section-title { line-height: 1.04 !important; }
}

/* Links inside body copy → olive, underline offset */
.section-subtitle a, .article-content a, .faq-answer a {
  color: var(--ds-olive);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Footer subtle warm tint already dark — ensure headings use Fraunces */
.site-footer h3, .site-footer h4, footer h3, footer h4 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -.01em;
}

/* Gallery: unify treatment — consistent ratio + gentle desaturate that warms on hover */
.gallery-item img {
  filter: saturate(.92) contrast(1.02);
  transition: transform .7s var(--ds-ease), filter .5s var(--ds-ease);
}
.gallery-item:hover img { filter: saturate(1.05) contrast(1.04); }

/* Engagement cards icon tint consistency */
.engagement-card .engagement-icon, .engagement-icon {
  color: var(--ds-olive) !important;
}

/* =========================================================================
   PART 8 — BOLD HERO + HIGH-IMPACT UPGRADES (make the difference obvious)
   ========================================================================= */

/* --- Hero canvas: rich layered gradient + soft grain, full presence --- */
.hero-section {
  position: relative;
  background:
    radial-gradient(1200px 600px at 78% 8%, color-mix(in srgb, var(--ds-sage) 22%, transparent), transparent 60%),
    radial-gradient(900px 700px at 12% 90%, color-mix(in srgb, var(--ds-olive) 14%, transparent), transparent 55%),
    linear-gradient(180deg, #fbfaf5 0%, #f1efe4 100%) !important;
  overflow: hidden;
}
/* decorative oversized DNA-tinted rings */
.hero-section::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  right: -160px; top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--ds-sage) 30%, transparent), transparent 70%);
  filter: blur(8px);
  opacity: .55;
  pointer-events: none;
}
.hero-desktop .hero-inner { padding: 130px 0 96px !important; gap: 5rem !important; max-width: 1180px !important; }

/* --- Headline: bigger, solid tonal highlight line --- */
.hero-content h1 { font-size: clamp(2.8rem, 5.6vw, 4.6rem) !important; line-height: 1.02 !important; }
.hero-title-line { color: var(--ds-ink) !important; }
.hero-title-highlight {
  color: var(--ds-olive-deep) !important;
}
@keyframes ahiSheen { 0%,100%{background-position:0% center} 50%{background-position:100% center} }
@media (prefers-reduced-motion: reduce){ .hero-title-highlight{ animation:none } }

.hero-description { font-size: clamp(1.05rem, 1.5vw, 1.22rem) !important; color: var(--ds-ink-soft) !important; max-width: 30rem; }

/* --- Hero image: bold framed photo with depth + floating live badge --- */
.hero-image-wrapper {
  border-radius: 28px !important;
  overflow: visible !important;
  box-shadow: 0 40px 80px -30px rgba(77,82,47,.55), 0 8px 24px -12px rgba(35,42,28,.3) !important;
  position: relative;
}
.hero-image-wrapper img {
  border-radius: 26px !important;
  filter: saturate(1.03) contrast(1.03);
}
/* ring frame */
.hero-image-wrapper::after {
  content:"";
  position:absolute; inset:-12px;
  border-radius: 34px;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 30%, transparent);
  pointer-events:none;
}
/* floating "live" badge bottom-left of image */
.hero-image-wrapper::before {
  content: "● Centre ouvert · RDV sous 48h";
  position: absolute;
  left: 16px; bottom: -16px;
  z-index: 3;
  font-family: 'Manrope', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ds-olive-deep);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ds-line);
  padding: .7em 1.05em;
  border-radius: 999px;
  box-shadow: 0 14px 30px -14px rgba(35,42,28,.4);
  white-space: nowrap;
}

/* --- Hero stats card: lift it, hairline dividers, serif numbers already set --- */
.hero-stats {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--ds-line) !important;
  box-shadow: 0 20px 50px -28px rgba(35,42,28,.4) !important;
  padding: 1.4rem 1.6rem !important;
}

/* --- Hero CTA primary: bigger, confident, micro-lift --- */
.hero-buttons .btn-primary { padding: 1rem 1.9rem !important; font-size: 1.02rem !important; }

/* --- Reassurance badges row under hero: pill chips with hairline --- */
.hero-reassurance-badges .reassurance-badge {
  background: rgba(255,255,255,.65) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 14px !important;
}

/* =========================================================================
   SECTION HEADERS — make them unmistakably editorial (centered, big, framed)
   ========================================================================= */
.section-header { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-header .section-label { justify-content: center; }
.section-title { margin: .6rem auto .8rem !important; }
.section-subtitle { margin-left: auto; margin-right: auto; }

/* Bigger section breathing room */
.section { padding-top: clamp(4rem, 8vw, 7rem) !important; padding-bottom: clamp(4rem, 8vw, 7rem) !important; }

/* Card titles a touch larger for hierarchy */
.service-card h3, .why-us-card h3, .tech-card h3 { font-size: 1.3rem !important; }

/* Service icon chips bigger + bolder olive */
.service-icon, .tech-icon, .why-us-icon {
  width: 60px !important; height: 60px !important;
}
.service-icon svg, .tech-icon svg, .why-us-icon svg { width: 28px; height: 28px; }

/* ============ PART 9 — WORKFLOW-VERIFIED SECTION REDESIGN ============ */


/* =========================================================================
   PART 9 — HERO PERFECTION (desktop ≥768px). Appended last, wins cascade.
   Refines PART 8: composition balance, decoupled floating badge + ring,
   optically aligned stats, tasteful title sheen, impeccable secondary CTA,
   trust row + reassurance chips. Mobile (.hero-slider-mobile) untouched.
   ========================================================================= */
@media (min-width: 768px) {

  /* ---- Composition: align columns to top, give copy a calm measure ---- */
  .hero-desktop .hero-inner {
    align-items: center !important;
    gap: clamp(3rem, 6vw, 5.5rem) !important;
  }
  .hero-desktop .hero-content {
    max-width: 33rem !important;
  }
  .hero-desktop .hero-image {
    max-width: 540px !important;
    flex: 0 1 540px !important;
  }

  /* ---- Headline: tasteful tonal sheen, deeper olive, safe fallback ---- */
  .hero-desktop .hero-title-line {
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    color: var(--ds-ink) !important;
    margin-bottom: .12em !important;
  }
  .hero-desktop .hero-title-highlight {
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    /* solid colour: the line is ALWAYS visible if clip is unsupported */
    color: var(--ds-olive) !important;
    margin-bottom: .55em !important;
  }
  @keyframes ahiHeroSheen {
    0%, 100% { background-position: 0% center; }
    50%      { background-position: 100% center; }
  }

  .hero-desktop .hero-description {
    font-size: clamp(1.05rem, 1.4vw, 1.18rem) !important;
    color: var(--ds-ink-soft) !important;
    line-height: 1.62 !important;
    max-width: 30rem !important;
    margin-bottom: 2.25rem !important;
  }

  /* ---- Buttons: confident primary, impeccable hairline secondary ---- */
  .hero-desktop .hero-buttons {
    gap: 14px !important;
    margin-bottom: 2.5rem !important;
    align-items: stretch !important;
  }
  .hero-desktop .hero-buttons .btn {
    padding: 1rem 1.85rem !important;
    transition: transform .18s var(--ds-ease),
                box-shadow .22s var(--ds-ease),
                background .2s var(--ds-ease),
                border-color .2s var(--ds-ease) !important;
  }
  .hero-desktop .hero-buttons .btn-primary {
    background: linear-gradient(135deg, var(--ds-olive) 0%, var(--ds-olive-deep) 100%) !important;
    border: 1px solid var(--ds-olive-deep) !important;
    box-shadow: 0 12px 26px -12px rgba(77,82,47,.65) !important;
  }
  .hero-desktop .hero-buttons .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 34px -14px rgba(77,82,47,.72) !important;
  }
  .hero-desktop .hero-buttons .btn-secondary {
    background: rgba(255,255,255,.6) !important;
    border: 1px solid var(--ds-line-strong) !important;
    color: var(--ds-ink) !important;
    box-shadow: none !important;
  }
  .hero-desktop .hero-buttons .btn-secondary:hover {
    transform: translateY(-2px) !important;
    border-color: var(--ds-olive) !important;
    background: color-mix(in srgb, var(--ds-olive) 7%, #fff) !important;
    color: var(--ds-olive-deep) !important;
    box-shadow: 0 10px 22px -16px rgba(35,42,28,.4) !important;
  }
  .hero-desktop .hero-buttons .btn:focus-visible {
    outline: 2px solid var(--ds-olive) !important;
    outline-offset: 3px !important;
  }

  /* ---- Stats: optical alignment, tnum figures, short centred dividers ---- */
  .hero-desktop .hero-stats {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-r) !important;
    box-shadow: 0 18px 46px -28px rgba(35,42,28,.38) !important;
    padding: 1.35rem 1.5rem !important;
    margin-bottom: 2rem !important;
    align-items: stretch !important;
  }
  .hero-desktop .hero-stats > .stat-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: .35rem !important;
    padding: .1rem 1.25rem !important;
    /* replace hard full-height rule with a centred hairline divider */
    border-right: 0 !important;
    position: relative !important;
  }
  .hero-desktop .hero-stats > .stat-item + .stat-item::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 2.4em !important;
    background: var(--ds-line-strong) !important;
  }
  .hero-desktop .hero-stats .stat-number {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.9rem, 2.4vw, 2.25rem) !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
    letter-spacing: -.02em !important;
    line-height: 1 !important;
    color: var(--ds-olive-deep) !important;
    margin-bottom: 0 !important;
  }
  .hero-desktop .hero-stats .stat-label {
    font-family: 'Manrope', sans-serif !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--ds-muted) !important;
    line-height: 1.3 !important;
  }

  /* ---- Trust row (Google rating): clean hairline, optically aligned ---- */
  .hero-desktop .hero-trust {
    display: inline-flex !important;
    align-items: center !important;
    gap: .85rem !important;
    padding: .7rem 1.05rem !important;
    margin-bottom: 2rem !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: 999px !important;
    background: #fffdf8 !important;
    box-shadow: 0 1px 2px rgba(35,42,28,.04) !important;
    width: auto !important;
  }
  .hero-desktop .hero-trust .trust-google-logo {
    display: inline-flex !important;
    align-items: center !important;
  }
  .hero-desktop .hero-trust .google-logo-img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .hero-desktop .hero-trust .trust-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
  }
  .hero-desktop .hero-trust .trust-stars {
    color: var(--ds-gold) !important;
    font-size: .9rem !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
  }
  .hero-desktop .hero-trust .trust-text > span {
    font-family: 'Manrope', sans-serif !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--ds-ink-soft) !important;
    line-height: 1 !important;
  }

  /* ---- Reassurance chips: hairline cards, single olive icon, real hover -- */
  .hero-desktop .hero-reassurance-badges {
    gap: 12px !important;
  }
  .hero-desktop .reassurance-badge {
    align-items: center !important;
    gap: .7rem !important;
    padding: .7rem .85rem !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-r-sm) !important;
    background: #fffdf8 !important;
    transition: border-color .2s var(--ds-ease),
                transform .2s var(--ds-ease),
                box-shadow .2s var(--ds-ease) !important;
  }
  .hero-desktop .reassurance-badge:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--ds-olive) 30%, var(--ds-line)) !important;
    box-shadow: 0 10px 22px -16px rgba(35,42,28,.4) !important;
  }
  .hero-desktop .reassurance-badge svg {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 0 !important;
    color: var(--ds-olive) !important;
  }
  .hero-desktop .reassurance-badge strong {
    font-family: 'Manrope', sans-serif !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: var(--ds-ink) !important;
    line-height: 1.25 !important;
  }
  .hero-desktop .reassurance-badge em {
    font-size: .8rem !important;
    color: var(--ds-muted) !important;
    line-height: 1.3 !important;
  }

  /* ---- Image: tasteful tilt, hairline frame over fuzzy stack ---- */
  .hero-desktop .hero-image-wrapper {
    border: 1px solid var(--ds-line) !important;
    border-radius: 26px !important;
    overflow: visible !important;
    box-shadow: 0 36px 72px -34px rgba(77,82,47,.5),
                0 4px 14px -8px rgba(35,42,28,.22) !important;
    transform: perspective(1200px) rotateY(-4deg) translateY(-6px) !important;
  }
  .hero-desktop .hero-image-wrapper:hover {
    transform: perspective(1200px) rotateY(0deg) translateY(-8px) !important;
  }
  .hero-desktop .hero-image-wrapper img {
    border-radius: 25px !important;
    filter: saturate(1.02) contrast(1.02) !important;
  }
  /* hairline ring frame — kept flat with the photo (rides the same tilt) */
  .hero-desktop .hero-image-wrapper::after {
    content: "" !important;
    position: absolute !important;
    inset: -10px !important;
    border-radius: 32px !important;
    border: 1px solid color-mix(in srgb, var(--ds-olive) 26%, transparent) !important;
    pointer-events: none !important;
  }
  /* floating status pill — decoupled from the 3D tilt so it reads flat,
     non-redundant copy (centre status only; RDV delay lives in chips) */
  .hero-desktop .hero-image-wrapper::before {
    content: "● Centre ouvert aujourd'hui" !important;
    position: absolute !important;
    left: 18px !important;
    bottom: -18px !important;
    z-index: 4 !important;
    transform: perspective(1200px) rotateY(4deg) !important;
    transform-origin: left center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    color: var(--ds-olive-deep) !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid var(--ds-line) !important;
    padding: .65em 1em !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 30px -16px rgba(35,42,28,.42) !important;
    white-space: nowrap !important;
  }
  .hero-desktop .hero-image-wrapper:hover::before {
    transform: perspective(1200px) rotateY(0deg) !important;
  }

  /* gentle entrance: pill settles up once (no opacity on .reveal anywhere) */
  @media (prefers-reduced-motion: reduce) {
    .hero-desktop .hero-title-highlight { animation: none !important; }
    .hero-desktop .hero-image-wrapper,
    .hero-desktop .hero-image-wrapper::before { transition: none !important; }
  }
}

/* =========================================================================
   PART 9 — GALLERY: MAGAZINE-GRADE BENTO (editorial medical premium)
   Unified warm grade, hairline frames, single olive accent, olive-tinted
   overlay gradients (no pure black), real hover/focus states, SVG features.
   Loaded LAST — wins the cascade over custom.css.
   NOTE: all feature-* rules are scoped under .gallery-features because the
   bare .feature-icon class is ALSO used in the #engagements section.
   ========================================================================= */

/* ---- Bento rhythm: consistent gaps, unified radii ---- */
.gallery-showcase {
  gap: clamp(1rem, 1.6vw, 1.5rem) !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
}
.gallery-grid-side { gap: clamp(.85rem, 1.4vw, 1rem) !important; }

/* Unified frame treatment: hairline ring + isolation for clean overlays */
.gallery-featured,
.gallery-item-mini {
  border-radius: var(--ds-r-lg) !important;
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-canvas-2);
  border: 1px solid var(--ds-line) !important;
  box-shadow: var(--ds-shadow) !important;
  transition: transform .26s var(--ds-ease), box-shadow .26s var(--ds-ease),
              border-color .26s var(--ds-ease) !important;
}
.gallery-item-mini { border-radius: var(--ds-r) !important; }

.gallery-featured:hover,
.gallery-item-mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-lift) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 32%, var(--ds-line)) !important;
}

/* Hairline inner frame so the image never touches the radius edge raw.
   z-index:1 → sits above the image but BELOW the overlays (z-index:2) so it
   never paints over the overlay title/badge/caption text. */
.gallery-featured::after,
.gallery-item-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events: none;
  z-index: 1;
}

/* ---- Unified warm image grade (calm at rest, gentle warm bloom on hover) ---- */
.gallery-featured img,
.gallery-item-mini img {
  filter: saturate(.9) contrast(1.03) brightness(1.01);
  transition: transform .5s var(--ds-ease), filter .4s var(--ds-ease) !important;
}
.gallery-featured:hover img { transform: scale(1.045) !important; filter: saturate(1.02) contrast(1.04); }
.gallery-item-mini:hover img { transform: scale(1.06) !important; filter: saturate(1.02) contrast(1.04); }

/* ---- Overlay gradients: olive-tinted ink, never pure black ---- */
.gallery-featured-overlay {
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
  background: linear-gradient(
    to top,
    rgba(23,28,17,.86) 0%,
    rgba(23,28,17,.52) 42%,
    rgba(23,28,17,.10) 72%,
    transparent 100%) !important;
  z-index: 2;
}
.mini-overlay {
  padding: .9rem 1rem !important;
  background: linear-gradient(
    to top,
    rgba(23,28,17,.78) 0%,
    rgba(23,28,17,.18) 65%,
    transparent 100%) !important;
  z-index: 2;
}

/* Featured badge → on-brand pill (kept olive, hairline edge) */
.featured-badge {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  backdrop-filter: blur(6px);
  color: #fff !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
  margin-bottom: 1.1rem !important;
}

/* Overlay typography: Fraunces title, Manrope body */
.gallery-featured-overlay h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem) !important;
  color: #fff !important;
}
.gallery-featured-overlay p {
  font-family: 'Manrope', sans-serif !important;
  color: rgba(255,255,255,.9) !important;
}
.mini-overlay span {
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(23,28,17,.5);
}

/* =========================================================================
   GALLERY FEATURES STRIP — quiet hairline card, SVG icon chips
   All selectors SCOPED under .gallery-features so the shared .feature-icon /
   .feature-item / .feature-text classes used in #engagements are untouched.
   ========================================================================= */
.gallery-features {
  gap: clamp(1rem, 2vw, 1.75rem) !important;
  padding: clamp(1.4rem, 2.5vw, 2rem) !important;
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-shadow) !important;
}

.gallery-features .feature-item {
  gap: .95rem !important;
  align-items: center;
  padding: .35rem .25rem;
  position: relative;
}
/* hairline vertical dividers between columns (desktop) */
@media (min-width: 769px) {
  .gallery-features .feature-item + .feature-item::before {
    content: "";
    position: absolute;
    left: calc(clamp(1rem, 2vw, 1.75rem) / -2);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 64%;
    background: var(--ds-line);
  }
}

/* Icon chip — soft tonal olive, single hue, hairline edge */
.gallery-features .feature-icon {
  flex: 0 0 auto;
  width: 50px !important;
  height: 50px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;            /* collapse any leftover emoji glyph */
  line-height: 0 !important;
  border-radius: 14px;
  color: var(--ds-olive);
  background: color-mix(in srgb, var(--ds-olive) 10%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 18%, transparent);
  transition: background .2s var(--ds-ease), color .2s var(--ds-ease),
              border-color .2s var(--ds-ease), transform .2s var(--ds-ease);
}
.gallery-features .feature-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke: currentColor;
  fill: none;
}
.gallery-features .feature-item:hover .feature-icon {
  background: var(--ds-olive);
  color: #fff;
  border-color: var(--ds-olive);
  transform: translateY(-2px);
}

.gallery-features .feature-text strong {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--ds-ink) !important;
  font-size: 1.02rem !important;
}
.gallery-features .feature-text span {
  font-family: 'Manrope', sans-serif !important;
  color: var(--ds-muted) !important;
}

/* ---- Focus-visible on interactive tiles (if wrapped in <a>) ---- */
.gallery-featured a:focus-visible,
.gallery-item-mini a:focus-visible,
a.gallery-featured:focus-visible,
a.gallery-item-mini:focus-visible {
  outline: 2px solid var(--ds-olive);
  outline-offset: 3px;
}

/* ---- Mobile: keep bento safe, full image presence ---- */
@media (max-width: 768px) {
  .gallery-item-mini { min-height: 150px; }
  .gallery-features .feature-item { gap: .8rem !important; }
  .gallery-features .feature-icon { width: 46px !important; height: 46px !important; }
}

/* ---- Reduced motion: still hide the costly transforms/zoom ---- */
@media (prefers-reduced-motion: reduce) {
  .gallery-featured img, .gallery-item-mini img,
  .gallery-featured, .gallery-item-mini, .gallery-features .feature-icon {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================================
   PART 9 — TECHNOLOGIES + BRANDS (editorial-medical-premium)
   Crisp hairline tech cards (left-aligned, serif titles, mono micro-label),
   then a premium "trusted by" brand strip: grayscale -> color on hover,
   even spacing, hairline divider above, mono section label.
   Appended last; beats custom.css with targeted !important.
   ========================================================================= */

/* ---- Tech grid: tighter editorial rhythm, even columns ---- */
.technologies-section .tech-grid {
  gap: clamp(1.1rem, 1.8vw, 1.6rem) !important;
  max-width: 1180px !important;
}

/* ---- Tech card: crisp hairline panel, left-aligned editorial layout ---- */
.technologies-section .tech-card {
  position: relative !important; /* anchor decorative ::before to the card, never the viewport */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: .55rem !important;
  padding: clamp(1.5rem, 2.4vw, 2rem) !important;
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: transform .22s var(--ds-ease),
              box-shadow .22s var(--ds-ease),
              border-color .22s var(--ds-ease) !important;
}
.technologies-section .tech-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ds-shadow-lift) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 32%, var(--ds-line)) !important;
  background: #fffdf8 !important;
}

/* Hairline accent rule that draws across the top edge on hover */
.technologies-section .tech-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 2px !important;
  background: linear-gradient(90deg, var(--ds-olive), var(--ds-sage)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .26s var(--ds-ease) !important;
  opacity: 1 !important;
}
.technologies-section .tech-card:hover::before { transform: scaleX(1) !important; }

/* ---- Tech icon: square tonal chip, hairline, single olive hue ---- */
.technologies-section .tech-icon {
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 .35rem !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--ds-olive) 9%, #fffdf8) !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 18%, transparent) !important;
  color: var(--ds-olive) !important;
  transition: background .22s var(--ds-ease),
              color .22s var(--ds-ease),
              transform .22s var(--ds-ease),
              border-color .22s var(--ds-ease) !important;
}
.technologies-section .tech-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.7 !important;
}
.technologies-section .tech-card:hover .tech-icon {
  background: var(--ds-olive) !important;
  border-color: var(--ds-olive) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ---- Tech card type: Fraunces title, Manrope body, optical sizing ---- */
.technologies-section .tech-card h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.18rem !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--ds-ink) !important;
  margin: 0 !important;
}
.technologies-section .tech-card p {
  font-family: 'Manrope', sans-serif !important;
  font-size: .94rem !important;
  line-height: 1.55 !important;
  color: var(--ds-muted) !important;
  margin: 0 !important;
  max-width: 28ch;
}

/* =========================================================================
   BRANDS — premium "trusted by" strip
   ========================================================================= */

/* Container: hairline divider above, generous rhythm */
.technologies-section .brands-section {
  margin-top: clamp(3rem, 6vw, 5rem) !important;
  padding: clamp(2.4rem, 4vw, 3.2rem) 0 0 !important;
  border-top: 1px solid var(--ds-line) !important;
  text-align: center;
}

/* "Nos marques partenaires" -> mono uppercase micro-label, centered rule */
.technologies-section .brands-section > h3 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ds-muted) !important;
  margin: 0 auto clamp(1.8rem, 3vw, 2.4rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .7em !important;
}
.technologies-section .brands-section > h3::before,
.technologies-section .brands-section > h3::after {
  content: "" !important;
  width: 26px;
  height: 1px;
  background: var(--ds-line-strong);
  display: inline-block;
}

/* Even, airy grid; each cell is a quiet hairline-free slot */
.technologies-section .brands-grid {
  display: grid !important; /* self-contained: do not rely on custom.css display surviving */
  grid-template-columns: repeat(5, 1fr) !important;
  gap: clamp(.5rem, 2vw, 1.5rem) !important;
  max-width: 1040px;
  margin: 0 auto !important;
  align-items: stretch !important;
}

/* Brand cell */
.technologies-section .brand-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .5rem !important;
  padding: clamp(1rem, 1.6vw, 1.3rem) .5rem !important;
  position: relative;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: transform .2s var(--ds-ease) !important;
}
.technologies-section .brand-item:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Logo: grayscale + muted at rest, full color + crisp on hover/focus */
.technologies-section .brand-logo {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.technologies-section .brand-logo-img {
  max-height: 30px !important;
  height: 30px !important;
  max-width: 130px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(1) opacity(.55) !important;
  transition: filter .22s var(--ds-ease), transform .22s var(--ds-ease) !important;
}
.technologies-section .brand-item:hover .brand-logo-img,
.technologies-section .brand-item:focus-within .brand-logo-img {
  filter: grayscale(0) opacity(1) !important;
  transform: scale(1.04) !important;
}

/* Brand tagline (Innovation suisse, etc.) -> tiny mono caption, reveals on hover */
.technologies-section .brand-item > span {
  font-family: 'Manrope', sans-serif !important;
  font-size: .66rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ds-muted) !important;
  opacity: .65;
  transition: opacity .22s var(--ds-ease), color .22s var(--ds-ease) !important;
}
.technologies-section .brand-item:hover > span,
.technologies-section .brand-item:focus-within > span {
  opacity: 1;
  color: var(--ds-olive) !important;
}

/* Make brand cell keyboard-reachable hover-state via focus on its link/img wrapper */
.technologies-section .brand-item:focus-visible {
  outline: 2px solid var(--ds-olive);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ---- Mobile safety: keep logos legible and grid balanced ---- */
@media (max-width: 768px) {
  .technologies-section .brands-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .technologies-section .tech-card { text-align: left !important; }
}
@media (max-width: 480px) {
  .technologies-section .brands-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .technologies-section .brand-logo-img {
    /* on small touch screens there is no hover: show full color */
    filter: grayscale(0) opacity(1) !important;
  }
  .technologies-section .brand-item > span { opacity: 1; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .technologies-section .tech-card,
  .technologies-section .tech-icon,
  .technologies-section .brand-logo-img,
  .technologies-section .brand-item > span { transition: none !important; }
  .technologies-section .tech-card:hover { transform: none !important; }
  .technologies-section .tech-card::before { transition: none !important; }
}


/* =========================================================================
   PART 9 — ENGAGEMENTS + WHY-US: editorial rhythm (distinct from Services)
   Engagements  -> "lead panel + 2 supporting cards" magazine layout
   Why-us       -> numbered editorial ledger (Fraunces numerals, hairline)
   Loaded LAST. Markup confirmed live: .engagements-3cols(1.5fr 1fr 1fr) with
   .engagement-col / .engagement-col-main / .engagement-feature / .feature-icon
   / .engagement-icon-large ; .why-us-grid(4) of .why-us-card with
   .why-us-icon + .why-us-number + h3 + p ; trailing .why-us-cta.
   ========================================================================= */

/* -------------------------------------------------------------------------
   9.1  ENGAGEMENTS — kill the 3 identical white drop-shadow boxes.
   The asymmetric 1.5/1/1 grid already exists; turn col-main into a tinted
   editorial "manifesto" panel and cols 2/3 into clean hairline cards.
   ------------------------------------------------------------------------- */
.engagements-3cols {
  gap: clamp(1.25rem, 2.4vw, 2rem) !important;
  align-items: stretch !important;
}

/* All three columns: hairline, no fuzzy shadow, editorial radius */
.engagements-3cols .engagement-col {
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r) !important;
  box-shadow: none !important;
  padding: clamp(1.75rem, 2.6vw, 2.4rem) !important;
  transition: transform .22s var(--ds-ease),
              box-shadow .26s var(--ds-ease),
              border-color .22s var(--ds-ease) !important;
}
.engagements-3cols .engagement-col:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ds-shadow-lift) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 30%, var(--ds-line)) !important;
}

/* --- Lead panel: warm tinted, left-anchored, olive edge rule --- */
.engagements-3cols .engagement-col-main {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ds-olive) 7%, #fffdf8),
      color-mix(in srgb, var(--ds-olive) 3%, #fffdf8)) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 18%, var(--ds-line)) !important;
  overflow: hidden;
}
/* olive accent rule down the leading edge */
.engagements-3cols .engagement-col-main::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ds-olive), var(--ds-olive-deep));
}
.engagements-3cols .engagement-col-main h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em !important;
  color: var(--ds-ink) !important;
  margin-bottom: 1.4rem !important;
  max-width: 28ch;
}

/* feature list -> 2-column hairline checklist inside the lead panel */
.engagement-features {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.4rem !important;
}
.engagement-feature {
  align-items: center !important;
  gap: .7rem !important;
  padding: .55rem 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--ds-olive) 12%, transparent);
}
/* first row of each column has no top rule (cleaner ledger) */
.engagement-features .engagement-feature:nth-child(1),
.engagement-features .engagement-feature:nth-child(2) {
  border-top: 0;
}
.engagement-feature span {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: .92rem !important;
  line-height: 1.3 !important;
  color: var(--ds-ink-soft) !important;
}

/* feature icon: gradient circle -> olive squared hairline chip */
.engagement-col-main .feature-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--ds-olive) 11%, #fffdf8) !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 22%, transparent) !important;
  color: var(--ds-olive) !important;
}
.engagement-col-main .feature-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2;
}
.engagement-feature:hover .feature-icon {
  background: var(--ds-olive) !important;
  color: #fff !important;
  border-color: var(--ds-olive) !important;
}

/* --- Supporting cards (cols 2 & 3): top-anchored, serif title, chip icon --- */
.engagements-3cols .engagement-col:not(.engagement-col-main) {
  align-items: flex-start !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
.engagements-3cols .engagement-col:not(.engagement-col-main) h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em !important;
  color: var(--ds-ink) !important;
  margin: 0 !important;
}

/* icon-large: 80px gradient circle -> 56px squared olive hairline chip */
.engagement-icon-large {
  width: 56px !important;
  height: 56px !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--ds-olive) 10%, #fffdf8) !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 18%, transparent) !important;
  color: var(--ds-olive) !important;
  margin-bottom: 1.15rem !important;
  transition: transform .22s var(--ds-ease), background .22s var(--ds-ease), color .22s var(--ds-ease);
}
.engagement-icon-large svg {
  width: 26px !important;
  height: 26px !important;
  color: inherit !important;
  stroke-width: 1.8;
}
.engagements-3cols .engagement-col:not(.engagement-col-main):hover .engagement-icon-large {
  background: var(--ds-olive) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   9.2  WHY-US — numbered editorial ledger (NOT another centered card row).
   Promote 01–04 to a Fraunces display numeral, left-align, top hairline that
   grows to olive on hover. Reads as a ledger -> rhythm vs centered Services.
   ------------------------------------------------------------------------- */
.why-us-grid {
  gap: clamp(1rem, 2vw, 1.6rem) !important;
}

.why-us-card {
  position: relative;
  text-align: left !important;
  padding: clamp(1.6rem, 2.2vw, 2.1rem) clamp(1.4rem, 1.8vw, 1.8rem) !important;
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r) !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: transform .22s var(--ds-ease),
              box-shadow .26s var(--ds-ease),
              border-color .22s var(--ds-ease) !important;
}
/* top hairline accent that grows from olive on hover */
.why-us-card::before {
  content: "";
  position: absolute;
  left: clamp(1.4rem, 1.8vw, 1.8rem);
  right: clamp(1.4rem, 1.8vw, 1.8rem);
  top: 0;
  height: 2px;
  background: var(--ds-olive);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ds-ease);
}
.why-us-card:hover {
  background: #fffdf8 !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--ds-shadow-lift) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 30%, var(--ds-line)) !important;
}
.why-us-card:hover::before { transform: scaleX(1); }

/* the 01–04 numeral: from 8% watermark -> real Fraunces lead figure */
.why-us-card .why-us-number {
  position: static !important;
  display: block !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  line-height: 1 !important;
  opacity: 1 !important;
  color: var(--ds-olive) !important;
  letter-spacing: -.02em;
  margin-bottom: .9rem !important;
  font-feature-settings: "tnum" 1;
}

/* icon chip: small, inline, squared olive hairline (override PART 7 60px) */
.why-us-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 1rem !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--ds-olive) 10%, #fffdf8) !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 16%, transparent) !important;
}
.why-us-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--ds-olive) !important;
}
.why-us-card:hover .why-us-icon {
  transform: none !important;          /* kill base scale(1.1) rotate(5deg) */
  background: var(--ds-olive) !important;
  border-color: var(--ds-olive) !important;
}
.why-us-card:hover .why-us-icon svg { color: #fff !important; }

.why-us-card h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.18rem !important;
  letter-spacing: -.01em !important;
  color: var(--ds-ink) !important;
  margin: 0 0 .55rem !important;
}
.why-us-card p {
  font-family: 'Manrope', sans-serif !important;
  color: var(--ds-muted) !important;
  font-size: .92rem !important;
  line-height: 1.6 !important;
}

/* -------------------------------------------------------------------------
   9.3  WHY-US CTA strip — hairline editorial bar + fix the 📞 emoji.
   Neutralize the raw emoji glyph and draw an on-brand olive phone chip via
   a CSS mask (no PHP needed); PHP swap noted as the cleaner long-term route.
   ------------------------------------------------------------------------- */
.why-us-cta {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ds-olive) 6%, #fffdf8),
      #fffdf8) !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 18%, var(--ds-line)) !important;
  border-radius: var(--ds-r-lg) !important;
  padding: clamp(1.6rem, 2.4vw, 2.2rem) clamp(1.6rem, 3vw, 3rem) !important;
}
.why-us-cta .cta-content { gap: 1.25rem !important; }

/* olive chip; hide the emoji glyph, paint a stroked phone via mask */
.why-us-cta .cta-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--ds-olive) 11%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 20%, transparent);
  font-size: 0 !important;            /* collapse the 📞 glyph */
  line-height: 0 !important;          /* also collapse its line-box (no wobble) */
  color: transparent !important;
  position: relative;
}
.why-us-cta .cta-icon::after {
  content: "";
  width: 26px; height: 26px;
  background: var(--ds-olive);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.why-us-cta .cta-text h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--ds-ink) !important;
}
.why-us-cta .cta-text p {
  font-family: 'Manrope', sans-serif !important;
  color: var(--ds-muted) !important;
}

/* -------------------------------------------------------------------------
   9.4  Reduced-motion + mobile safety
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .engagements-3cols .engagement-col,
  .engagement-icon-large,
  .why-us-card,
  .why-us-card::before,
  .why-us-icon { transition: none !important; }
}

/* Mobile: lead panel becomes single-column checklist, ledger reads naturally.
   Base CSS already collapses .engagements-3cols & .why-us-grid to 1fr <768px. */
@media (max-width: 600px) {
  .engagement-features { grid-template-columns: 1fr !important; }
  .engagement-features .engagement-feature:nth-child(2) {
    border-top: 1px solid color-mix(in srgb, var(--ds-olive) 12%, transparent);
  }
  .why-us-cta { text-align: left; }
  .why-us-cta .cta-content { align-items: flex-start; }
}

/* =========================================================================
   PART 9 — TESTIMONIALS (Google reviews) + PATIENTS (portrait cards)
   Editorial-medical-premium. Hairline borders over fuzzy shadows, single
   olive accent, refined warm-gold stars, Fraunces names, fast ease-out motion.
   Appended last → wins cascade. Live markup confirmed via rendered HTML.
   ========================================================================= */

/* -------------------------------------------------------------------------
   9.1  GOOGLE REVIEWS BADGE — premium trust pill (hairline, no fuzzy shadow)
   ------------------------------------------------------------------------- */
.testimonials-section .google-reviews-badge {
  gap: .85rem !important;
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 16px !important;
  padding: .7rem 1.2rem !important;
  box-shadow: 0 1px 2px rgba(35,42,28,.04), 0 14px 34px -22px rgba(35,42,28,.28) !important;
  margin-top: 1.4rem !important;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem) !important;
  transition: border-color .2s var(--ds-ease), box-shadow .2s var(--ds-ease), transform .2s var(--ds-ease);
}
.testimonials-section .google-reviews-badge:hover {
  border-color: color-mix(in srgb, var(--ds-olive) 28%, var(--ds-line)) !important;
  box-shadow: 0 1px 2px rgba(35,42,28,.04), 0 18px 40px -22px rgba(35,42,28,.34) !important;
  transform: translateY(-1px);
}
.testimonials-section .google-reviews-badge .google-logo { width: 26px; height: 26px; }
.testimonials-section .google-reviews-badge .google-rating { gap: .55rem !important; }
.testimonials-section .google-reviews-badge .google-rating strong {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.18rem !important;
  letter-spacing: -.02em;
  color: var(--ds-ink) !important;
}
.testimonials-section .google-reviews-badge .reviews-count {
  color: var(--ds-muted) !important;
  font-size: .82rem !important;
  font-weight: 600;
  letter-spacing: .01em;
  border-left: 1px solid var(--ds-line) !important;
}

/* Refined warm-gold stars (not harsh orange). Slight optical kerning. */
.testimonials-section .rating-stars,
.testimonials-section .review-stars {
  color: #c79a3e !important;            /* warm restrained gold */
  letter-spacing: .06em !important;
  text-shadow: none;
}
.testimonials-section .google-reviews-badge .rating-stars { font-size: 1.02rem !important; }

/* -------------------------------------------------------------------------
   9.2  REVIEW CARDS — editorial quotation, hairline, tactile lift
   ------------------------------------------------------------------------- */
.google-reviews-carousel { margin-top: clamp(1.6rem, 3vw, 2.4rem) !important; }

.google-review-card {
  position: relative;
  flex-basis: 360px !important;
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r) !important;
  padding: 1.7rem 1.6rem 1.55rem !important;
  box-shadow: none !important;
  transition: transform .22s var(--ds-ease), box-shadow .22s var(--ds-ease), border-color .22s var(--ds-ease) !important;
}
.google-review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-lift) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 26%, var(--ds-line)) !important;
}
/* Editorial opening quote mark, top-right, in olive — real social-proof feel */
.google-review-card::before {
  content: "\201C";
  position: absolute;
  top: .15rem;
  right: 1.1rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--ds-olive) 22%, transparent);
  pointer-events: none;
}

.google-review-card .review-header { margin-bottom: 14px !important; gap: 14px !important; }

/* Avatar: keep the colored initial but ground it with a hairline ring */
.google-review-card .review-avatar {
  width: 44px !important;
  height: 44px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 0 1px rgba(35,42,28,.06);
}
.google-review-card .review-name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.02rem !important;
  letter-spacing: -.01em;
  color: var(--ds-ink) !important;
}
.google-review-card .review-meta {
  color: var(--ds-muted) !important;
  font-size: .78rem !important;
  letter-spacing: .01em;
}
.google-review-card .review-stars {
  font-size: 1.02rem !important;
  margin-bottom: 12px !important;
}
.google-review-card .review-text {
  color: var(--ds-ink-soft) !important;
  font-size: .94rem !important;
  line-height: 1.62 !important;
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   9.3  CAROUSEL ARROWS — hairline, olive on hover, focus-visible
   ------------------------------------------------------------------------- */
.google-reviews-carousel .carousel-arrow {
  width: 46px !important;
  height: 46px !important;
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  color: var(--ds-ink-soft) !important;
  box-shadow: 0 1px 2px rgba(35,42,28,.04), 0 10px 22px -16px rgba(35,42,28,.3) !important;
  transition: background .18s var(--ds-ease), border-color .18s var(--ds-ease), color .18s var(--ds-ease), transform .18s var(--ds-ease) !important;
}
.google-reviews-carousel .carousel-arrow:hover {
  background: var(--ds-olive) !important;
  border-color: var(--ds-olive) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.google-reviews-carousel .carousel-arrow:hover svg { stroke: #fff !important; }
.google-reviews-carousel .carousel-arrow:active { transform: translateY(0) scale(.97); }
.google-reviews-carousel .carousel-arrow:focus-visible {
  outline: 2px solid var(--ds-olive);
  outline-offset: 2px;
}
/* Soft fade hint at the carousel edges so cards feel like a flowing rail */
.google-reviews-carousel .carousel-container {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* -------------------------------------------------------------------------
   9.4  PATIENTS — portrait cards: unified photo grade, hairline frame
   ------------------------------------------------------------------------- */
.patients-section .patient-card {
  border-radius: var(--ds-r) !important;
  border: 1px solid var(--ds-line) !important;
  background: #fffdf8 !important;
  box-shadow: none !important;
  isolation: isolate;
  transition: transform .24s var(--ds-ease), box-shadow .24s var(--ds-ease), border-color .24s var(--ds-ease) !important;
}
.patients-section .patient-card:hover {
  transform: translateY(-5px) !important;          /* no scale wobble */
  box-shadow: var(--ds-shadow-lift) !important;
  border-color: color-mix(in srgb, var(--ds-olive) 30%, var(--ds-line)) !important;
}

/* Unified portrait grade: warm, calm, consistent across mixed source photos */
.patients-section .patient-image { overflow: hidden; }
.patients-section .patient-image img {
  height: clamp(300px, 34vw, 360px) !important;
  filter: saturate(.9) contrast(1.03) brightness(1.01) !important;
  transition: transform .5s var(--ds-ease), filter .4s var(--ds-ease) !important;
}
.patients-section .patient-card:hover .patient-image img {
  transform: scale(1.045) !important;
  filter: saturate(1.0) contrast(1.04) brightness(1.02) !important;
}

/* Overlay: refined olive-tinted scrim by default, deepen on hover */
.patients-section .patient-overlay {
  padding: 1.6rem 1.4rem 1.3rem !important;
  background: linear-gradient(to top,
    rgba(31,38,24,.86) 0%,
    rgba(31,38,24,.42) 48%,
    rgba(31,38,24,0) 100%) !important;
  transition: background .24s var(--ds-ease) !important;
}
.patients-section .patient-card:hover .patient-overlay {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ds-olive-deep) 92%, transparent) 0%,
    color-mix(in srgb, var(--ds-olive) 50%, transparent) 50%,
    rgba(31,38,24,0) 100%) !important;
}

/* Name → Fraunces, elegant caption hierarchy */
.patients-section .patient-name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.08rem !important;
  letter-spacing: -.01em !important;
  color: #fff !important;
  margin-bottom: .6rem !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Badge → refined glass chip with hairline + leading dot (replaces ✓ emoji) */
.patients-section .patient-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5em;
  font-family: 'Manrope', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: .5em .85em !important;
  border-radius: 999px !important;
}
.patients-section .patient-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ds-sage) 70%, #fff);
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   9.5  MOBILE SAFETY + REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .google-review-card { flex-basis: 84vw !important; }
  .patients-section .patient-image img { height: clamp(260px, 64vw, 320px) !important; }
  .google-review-card::before { font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .google-review-card,
  .google-review-card:hover,
  .patients-section .patient-card,
  .patients-section .patient-card:hover,
  .patients-section .patient-card:hover .patient-image img,
  .google-reviews-carousel .carousel-arrow:hover {
    transform: none !important;
  }
  .google-review-card,
  .patients-section .patient-image img,
  .patients-section .patient-overlay {
    transition: none !important;
  }
}

/* =========================================================================
   PART 9 — FAQ · CTA · CONTACT  (editorial-medical-premium, appended last)
   Hairline accordion · stunning deep-olive band · refined form.
   Uses --ds-* tokens. Single olive accent. Fast ease-out motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   9.1  FAQ — editorial hairline accordion (no card boxes, serif questions)
   ------------------------------------------------------------------------- */
.faq-list {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Dissolve the boxed cards into a single hairline-divided column */
.faq-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ds-line) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background .2s var(--ds-ease) !important;
}
.faq-list .faq-item:last-child {
  border-bottom: 1px solid var(--ds-line) !important;
}
/* subtle warm wash on hover/open — no fuzzy shadow */
.faq-item:hover {
  background: color-mix(in srgb, var(--ds-olive) 4%, transparent) !important;
}
.faq-item.active {
  background: color-mix(in srgb, var(--ds-olive) 5%, transparent) !important;
}

/* Question row: serif, generous, button reset */
.faq-question {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  text-align: left;
  background: none !important;
  border: 0 !important;
  cursor: pointer;
  padding: clamp(1.35rem, 2.4vw, 1.7rem) clamp(.5rem, 1.5vw, 1rem) !important;
  color: var(--ds-ink) !important;
  transition: color .18s var(--ds-ease) !important;
}
.faq-question span {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem) !important;
  line-height: 1.32 !important;
  letter-spacing: -.01em !important;
  color: inherit;
}
.faq-item:hover .faq-question,
.faq-question:hover { color: var(--ds-olive) !important; }
.faq-question[aria-expanded="true"] { color: var(--ds-olive-deep) !important; }

/* Icon → circular hairline chip with a chevron; smooth rotation */
.faq-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  border: 1px solid var(--ds-line);
  background: #fffdf8;
  color: var(--ds-olive) !important;
  stroke-width: 2;
  transition: transform .26s var(--ds-ease), background .2s var(--ds-ease),
              border-color .2s var(--ds-ease), color .2s var(--ds-ease) !important;
}
.faq-item:hover .faq-icon {
  border-color: color-mix(in srgb, var(--ds-olive) 35%, var(--ds-line));
}
.faq-question[aria-expanded="true"] .faq-icon,
.faq-item.active .faq-icon {
  transform: rotate(180deg);
  background: var(--ds-olive);
  border-color: var(--ds-olive);
  color: #fff !important;
}

/* Answer copy — readable measure, serene rhythm (don't touch max-height JS) */
.faq-answer-inner {
  padding: 0 clamp(.5rem, 1.5vw, 1rem) clamp(1.3rem, 2.2vw, 1.6rem) !important;
}
.faq-answer-inner p,
.faq-answer p {
  font-family: 'Manrope', sans-serif;
  color: var(--ds-ink-soft) !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
  max-width: 64ch;
  margin: 0;
}
/* Clip guard: the open-state max-height in the theme base is capped at 500px.
   The richer line-height/padding above is safe for current copy, but raise the
   open cap defensively so longer answers can never be clipped by overflow:hidden.
   Keyed on the SAME .faq-item.active state the theme JS toggles — animation feel
   is unchanged (the transition is on .faq-answer in the base sheets). */
.faq-item.active .faq-answer { max-height: 1500px !important; }

/* -------------------------------------------------------------------------
   9.2  CTA — stunning deep-olive band (texture, serif headline, white button)
   ------------------------------------------------------------------------- */
.cta-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 85% -10%, color-mix(in srgb, var(--ds-sage) 55%, transparent) 0%, transparent 55%),
    radial-gradient(120% 130% at 0% 115%, color-mix(in srgb, #000 22%, transparent) 0%, transparent 50%),
    linear-gradient(155deg, var(--ds-olive) 0%, var(--ds-olive-deep) 100%) !important;
  color: #fff;
}

.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 100%);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
  pointer-events: none;
}
/* Layered texture: fine hairline weave + soft vignette, fully behind content.
   .cta-bg-pattern already has position:absolute in the base sheet, so z-index
   applies; content wrapper sits at z-index:2 above it. */
.cta-bg-pattern {
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.10) 0%, transparent 45%),
    radial-gradient(circle at 82% 70%, rgba(255,255,255,.07) 0%, transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px) !important;
  opacity: .9;
  z-index: 0 !important;
}
.cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 100%),
    radial-gradient(80% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.28) 100%);
  background-size: 72px 100%, auto;
  pointer-events: none;
}
.cta-content-wrapper { position: relative; z-index: 2; }

/* Icon chip — glass ring, white glyph (kills the raw emoji vibe) */
.cta-icon-wrapper { margin-bottom: 1.4rem !important; }
.cta-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 74px !important;
  height: 74px !important;
  margin: 0 auto;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  backdrop-filter: blur(6px);
  font-size: 1.9rem;
  line-height: 1;
  color: #fff !important;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.5);
}
.cta-icon.pulse-ring { position: relative; }
.cta-icon.pulse-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  animation: ctaPulse 2.8s var(--ds-ease) infinite;
}
@keyframes ctaPulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Headline + lede */
.cta-section h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 4.2vw, 3.2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  margin: 0 auto .85rem !important;
  max-width: 18ch;
  text-wrap: balance;
}
.cta-section > .container p,
.cta-content-wrapper > p {
  font-family: 'Manrope', sans-serif;
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem) !important;
  line-height: 1.6 !important;
  max-width: 52ch;
  margin: 0 auto 2rem !important;
}

/* Feature row — hairline pills on glass */
.cta-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem !important;
  margin-bottom: 2.2rem !important;
}
.cta-feature {
  display: inline-flex !important;
  align-items: center;
  gap: .55em;
  padding: .55em 1.05em !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #fff !important;
  font-family: 'Manrope', sans-serif;
  font-size: .86rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease) !important;
}
.cta-feature:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.5) !important;
}
.cta-feature svg { color: #fff !important; width: 16px; height: 16px; }
.cta-feature span { color: #fff !important; }

/* Buttons — confident solid-white primary, hairline-glass secondary */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.cta-section .btn-primary {
  background: #fff !important;
  color: var(--ds-olive-deep) !important;
  border: 1px solid #fff !important;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.55) !important;
  transition: transform .18s var(--ds-ease), box-shadow .22s var(--ds-ease), background .2s !important;
}
.cta-section .btn-primary:hover {
  background: var(--ds-canvas) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 42px -16px rgba(0,0,0,.6) !important;
}
.cta-section .btn-secondary {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
  transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease), transform .18s var(--ds-ease) !important;
}
.cta-section .btn-secondary:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: #fff !important;
  transform: translateY(-2px);
}
.cta-section .btn-secondary span { color: #fff !important; }
.cta-section a:focus-visible .btn,
.cta-section .btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   9.3  CONTACT — refined form fields + elegant info column
   ------------------------------------------------------------------------- */
.contact-info > h3,
.contact-form-wrapper > h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem) !important;
  letter-spacing: -.01em !important;
  color: var(--ds-ink) !important;
  margin-bottom: 1.3rem !important;
}

/* Info column — hairline rows, olive icon chips */
.contact-item {
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0 !important;
  border-bottom: 1px solid var(--ds-line);
}
.contact-details .contact-item:last-child { border-bottom: 0; }
.contact-icon {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--ds-olive) 9%, #fffdf8) !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 16%, transparent) !important;
  color: var(--ds-olive) !important;
  transition: transform .22s var(--ds-ease), background .22s var(--ds-ease) !important;
}
.contact-item:hover .contact-icon {
  transform: translateY(-2px) scale(1.04) !important;
  background: color-mix(in srgb, var(--ds-olive) 14%, #fffdf8) !important;
}
.contact-icon svg { width: 20px; height: 20px; color: var(--ds-olive) !important; }
.contact-item-content strong,
.contact-item-content > span:first-child {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--ds-ink);
}
.contact-item-content a {
  color: var(--ds-ink-soft);
  text-decoration: none;
  transition: color .18s var(--ds-ease);
}
.contact-item-content a:hover { color: var(--ds-olive); }

/* Status pill — open/closed legibility */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: 'Manrope', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .3em .7em;
  border-radius: 999px;
  border: 1px solid var(--ds-line);
}
.status-pill .status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-pill.status-closed { color: #9a4a3c; background: color-mix(in srgb, #c0533f 8%, #fffdf8); border-color: color-mix(in srgb, #c0533f 22%, transparent); }
.status-pill.status-closed .status-dot { background: #c0533f; }
.status-pill.status-open { color: var(--ds-olive-deep); background: color-mix(in srgb, var(--ds-olive) 10%, #fffdf8); border-color: color-mix(in srgb, var(--ds-olive) 24%, transparent); }
.status-pill.status-open .status-dot { background: var(--ds-sage); }

.contact-features li {
  font-family: 'Manrope', sans-serif;
  color: var(--ds-ink-soft);
}
.contact-features li::marker { color: var(--ds-olive); }

/* Map — hairline frame, no fuzzy shadow */
.contact-map iframe {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r) !important;
  filter: saturate(.92) contrast(1.02);
}

/* Form shell */
.contact-form-wrapper {
  background: #fffdf8 !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-shadow) !important;
  padding: clamp(1.6rem, 3vw, 2.4rem) !important;
}

/* Inputs — hairline, ivory, generous, olive focus ring */
.contact-form .form-group input,
.contact-form .form-group textarea,
.form-group input,
.form-group textarea {
  width: 100%;
  font-family: 'Manrope', sans-serif !important;
  font-size: 1rem !important;
  color: var(--ds-ink) !important;
  background: var(--ds-canvas) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-sm) !important;
  padding: .95rem 1.05rem !important;
  transition: border-color .18s var(--ds-ease), box-shadow .2s var(--ds-ease), background .2s var(--ds-ease) !important;
}
.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ds-muted) !important;
  opacity: 1;
}
.contact-form .form-group input:hover,
.contact-form .form-group textarea:hover {
  border-color: var(--ds-line-strong) !important;
}
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none !important;
  background: #fffdf8 !important;
  border-color: var(--ds-olive) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-olive) 16%, transparent) !important;
}
.contact-form textarea { min-height: 130px; resize: vertical; }

/* Submit button — full-confidence olive, full width on the card */
.contact-form button[type="submit"],
.contact-form .btn-primary {
  width: 100%;
  margin-top: .4rem;
  padding: 1rem 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* -------------------------------------------------------------------------
   9.4  Mobile safety
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .faq-question { gap: .75rem; }
  .faq-icon { width: 30px; height: 30px; }
  .cta-icon { width: 64px !important; height: 64px !important; font-size: 1.6rem; }
  .cta-buttons .btn { width: 100%; justify-content: center; }
  .contact-form-wrapper { border-radius: var(--ds-r) !important; }
}

/* -------------------------------------------------------------------------
   9.5  Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cta-icon.pulse-ring::before { animation: none !important; }
  .faq-icon, .contact-icon, .cta-feature,
  .contact-form input, .contact-form textarea { transition: none !important; }
}
/* PART 9.1 — gallery feature icons delivered as <img> SVG (olive), invert on hover */
.gallery-features .feature-icon img {
  width: 24px; height: 24px; display: block;
  transition: filter .2s var(--ds-ease);
}
.gallery-features .feature-item:hover .feature-icon img {
  filter: brightness(0) invert(1); /* olive svg → white on olive chip */
}

/* =========================================================================
   PART 10 — POURQUOI S'APPAREILLER : editorial photo bento
   Real lifestyle photography (unified warm grade) with olive-ink overlay,
   Fraunces titles over image, asymmetric bento (card 1 & 6 span wide).
   Replaces the flat icon cards. Single olive accent; no fuzzy shadows.
   ========================================================================= */
.pourquoi-section .pourquoi-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(.9rem, 1.6vw, 1.4rem);
}
/* asymmetric rhythm: 2 wide + 1 tall, then 1 tall + 2 wide → bento, not 3x equal */
.pourquoi-section .pq-card--1 { grid-column: span 4; }
.pourquoi-section .pq-card--2 { grid-column: span 2; }
.pourquoi-section .pq-card--3 { grid-column: span 3; }
.pourquoi-section .pq-card--4 { grid-column: span 3; }
.pourquoi-section .pq-card--5 { grid-column: span 2; }
.pourquoi-section .pq-card--6 { grid-column: span 4; }

.pourquoi-section .pq-card {
  position: relative;
  min-height: clamp(260px, 30vw, 340px);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow);
  transition: transform .4s var(--ds-ease), box-shadow .4s var(--ds-ease);
}
.pourquoi-section .pq-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ds-shadow-lift);
}
.pourquoi-section .pq-card__media { position: absolute; inset: 0; z-index: 0; }
.pourquoi-section .pq-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.12) contrast(1.04) brightness(1.04);
  transition: transform .8s var(--ds-ease);
}
.pourquoi-section .pq-card:hover .pq-card__media img { transform: scale(1.06); }
/* olive-ink overlay so white text is always legible — never pure black */
.pourquoi-section .pq-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(28,33,20,.82) 0%,
    rgba(28,33,20,.40) 42%,
    rgba(28,33,20,.06) 72%,
    rgba(28,33,20,0) 100%);
  pointer-events: none;
}
.pourquoi-section .pq-card__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  height: 100%;
  justify-content: flex-end;
}
.pourquoi-section .pq-card__num {
  position: absolute;
  top: clamp(1.1rem, 2vw, 1.5rem);
  left: clamp(1.4rem, 2.4vw, 2rem);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pourquoi-section .pq-card__body h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em;
  color: #fff !important;
  margin: 0 !important;
  text-shadow: 0 2px 14px rgba(20,24,14,.45);
}
.pourquoi-section .pq-card__body p {
  font-family: 'Manrope', sans-serif !important;
  color: rgba(255,255,255,.9) !important;
  font-size: .96rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 46ch;
}

/* Tablet: 2 columns of equal-ish weight */
@media (max-width: 1000px) {
  .pourquoi-section .pourquoi-bento { grid-template-columns: repeat(2, 1fr); }
  .pourquoi-section .pq-card { grid-column: span 1 !important; }
}
/* Mobile: single column, comfortable height */
@media (max-width: 600px) {
  .pourquoi-section .pourquoi-bento { grid-template-columns: 1fr; }
  .pourquoi-section .pq-card { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .pourquoi-section .pq-card, .pourquoi-section .pq-card__media img { transition: none !important; transform: none !important; }
}

/* =========================================================================
   GENERATED VISUAL REFRESH — CTA + WHY-US
   Premium image-led sections using generated assets in /assets/images/generated.
   ========================================================================= */

.cta-premium-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
  align-items: center;
  gap: 3rem;
  text-align: left !important;
  max-width: 1180px;
  margin: 0 auto;
}

.cta-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.cta-soundwave {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  height: 28px;
  margin-bottom: .62rem;
}

.cta-soundwave span {
  display: block;
  width: 4px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 20px rgba(255,255,255,.18);
  animation: ctaWave 1.6s ease-in-out infinite;
}

.cta-soundwave span:nth-child(2) { height: 22px; animation-delay: .12s; }
.cta-soundwave span:nth-child(3) { height: 16px; animation-delay: .24s; }
.cta-soundwave span:nth-child(4) { height: 26px; animation-delay: .36s; }
.cta-soundwave span:nth-child(5) { height: 11px; animation-delay: .48s; }

@keyframes ctaWave {
  0%, 100% { transform: scaleY(.72); opacity: .58; }
  50% { transform: scaleY(1.08); opacity: 1; }
}

.cta-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 0 1.15rem;
  padding: .5rem .72rem;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  font-family: 'Manrope', sans-serif;
  font-size: .78rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
}

.cta-copy .cta-icon-wrapper {
  margin: 0 0 1.3rem !important;
}

.cta-copy .cta-icon {
  margin: 0 !important;
}

.cta-copy h2 {
  margin-right: 0 !important;
  margin-left: 0 !important;
  max-width: 13ch !important;
  text-align: left !important;
}

.cta-copy > p {
  margin-right: 0 !important;
  margin-left: 0 !important;
  max-width: 54ch !important;
  text-align: left !important;
}

.cta-copy .cta-features,
.cta-copy .cta-buttons {
  justify-content: flex-start !important;
}

.cta-visual {
  position: relative;
  min-height: 430px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 32px 80px -42px rgba(0,0,0,.72);
  transform: translateZ(0);
}

.cta-visual:hover img {
  transform: scale(1.025);
}

.cta-visual::before {
  content: "";
  position: absolute;
  inset: 1rem;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 6px;
  pointer-events: none;
}

.cta-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.28) 100%),
    linear-gradient(90deg, rgba(47,74,52,.18), rgba(255,255,255,0) 44%);
  pointer-events: none;
}

.cta-visual img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  transition: transform .7s var(--ds-ease);
}

.cta-visual-card {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: .15rem;
  min-width: 118px;
  padding: .85rem .95rem;
  border-radius: 8px;
  color: var(--ds-olive-deep);
  background: rgba(255,253,248,.92);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 38px -24px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.cta-visual-card span {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
}

.cta-visual-card small {
  font-family: 'Manrope', sans-serif;
  font-size: .78rem;
  line-height: 1.2;
  color: var(--ds-muted);
  font-weight: 700;
}

.cta-visual-card-top {
  top: 1.1rem;
  left: 1.1rem;
}

.cta-visual-card-bottom {
  right: 1.1rem;
  bottom: 1.1rem;
}

.cta-visual-caption {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  max-width: 70%;
  padding: 1rem 1.05rem;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(29,38,27,.68), rgba(29,38,27,.22));
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}

.cta-visual-caption strong,
.cta-visual-caption span {
  display: block;
}

.cta-visual-caption strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.1;
  color: #fff;
}

.cta-visual-caption span {
  margin-top: .32rem;
  color: rgba(255,255,255,.86);
  font-family: 'Manrope', sans-serif;
  font-size: .82rem;
  line-height: 1.35;
}

.cta-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.45rem;
}

.cta-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  color: rgba(255,255,255,.86);
  font-family: 'Manrope', sans-serif;
  font-size: .82rem;
  font-weight: 700;
}

.cta-trust-strip span::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

.why-us-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fffdf8 0%, color-mix(in srgb, var(--ds-sage) 6%, #fffdf8) 100%) !important;
}

.why-us-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-olive) 7%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--ds-olive) 5%, transparent) 0 1px, transparent 1px 100%);
  background-size: 88px 88px;
  opacity: .52;
  pointer-events: none;
}

.why-us-section > .container {
  position: relative;
  z-index: 1;
}

.why-us-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
  margin: 0 0 2.3rem;
  padding: 1rem;
  border-radius: 8px;
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #fffdf8 0%, color-mix(in srgb, var(--ds-sage) 16%, #fffdf8) 100%);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 14%, var(--ds-line));
  box-shadow: 0 22px 70px -52px rgba(31,43,28,.42);
  overflow: hidden;
}

.why-us-showcase::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--ds-olive), color-mix(in srgb, var(--ds-sage) 78%, var(--ds-olive)));
}

.why-us-showcase::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 8%, transparent);
  border-radius: 6px;
  pointer-events: none;
}

.why-us-showcase-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 10%, var(--ds-line));
}

.why-us-showcase-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(255,253,248,.82) 100%),
    radial-gradient(80% 80% at 50% 45%, rgba(255,255,255,0) 35%, rgba(103,112,76,.12) 100%);
  pointer-events: none;
}

.why-us-showcase-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.why-us-signature-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem .85rem;
  border-radius: 8px;
  background: rgba(255,253,248,.88);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 16%, rgba(255,255,255,.7));
  box-shadow: 0 18px 42px -28px rgba(31,43,28,.45);
  backdrop-filter: blur(8px);
}

.why-us-signature-badge strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: var(--ds-olive);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  line-height: 1;
}

.why-us-signature-badge span {
  color: var(--ds-olive-deep);
  font-family: 'Manrope', sans-serif;
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 800;
  max-width: 9ch;
}

.why-us-showcase-content {
  padding: 1rem 1.15rem 1rem 0;
}

.why-us-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: .85rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-olive) 9%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 15%, transparent);
  color: var(--ds-olive-deep);
  font-family: 'Manrope', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.why-us-showcase h3 {
  margin: 0 0 .8rem !important;
  color: var(--ds-ink) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 2rem !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.why-us-showcase p {
  max-width: 58ch;
  margin: 0 0 1.1rem !important;
  color: var(--ds-muted) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.why-us-method-list {
  display: grid;
  gap: .6rem;
  margin: 0 0 1.25rem;
}

.why-us-method-list div {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .8rem;
  padding: .78rem .85rem;
  border-radius: 8px;
  background: rgba(255,255,255,.62);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 12%, var(--ds-line));
}

.why-us-method-list span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ds-olive-deep);
  background: color-mix(in srgb, var(--ds-olive) 9%, #fffdf8);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: .9rem;
}

.why-us-method-list strong {
  color: var(--ds-ink);
  font-family: 'Manrope', sans-serif;
  font-size: .88rem;
  line-height: 1.2;
  font-weight: 850;
}

.why-us-method-list p {
  margin: .1rem 0 0 !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

.why-us-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.why-us-proof-grid div {
  padding: .9rem;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 13%, var(--ds-line));
}

.why-us-proof-grid strong,
.why-us-proof-grid span {
  display: block;
}

.why-us-proof-grid strong {
  color: var(--ds-olive-deep);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.55rem;
  line-height: 1;
}

.why-us-proof-grid span {
  margin-top: .28rem;
  color: var(--ds-muted);
  font-family: 'Manrope', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
}

.why-us-assurance-line {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .92rem;
}

.why-us-assurance-line span {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .5rem .68rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-olive) 7%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 13%, transparent);
  color: var(--ds-olive-deep);
  font-family: 'Manrope', sans-serif;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1;
}

.why-us-assurance-line span::before {
  content: "";
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  background: var(--ds-olive);
}

.why-us-grid {
  align-items: stretch;
}

.why-us-card {
  min-height: 250px;
}

.why-us-card::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  bottom: 1.15rem;
  width: 48px;
  height: 24px;
  opacity: .16;
  background:
    repeating-radial-gradient(ellipse at left center,
      var(--ds-olive) 0 1px,
      transparent 1px 6px);
  pointer-events: none;
}

.why-us-card:nth-child(even) {
  transform: translateY(18px);
}

.why-us-card:nth-child(even):hover {
  transform: translateY(14px) !important;
}

@media (max-width: 980px) {
  .cta-premium-layout,
  .why-us-showcase {
    grid-template-columns: 1fr;
  }

  .cta-visual {
    min-height: 360px;
  }

  .why-us-showcase-content {
    padding: .4rem;
  }
}

@media (max-width: 640px) {
  .cta-premium-layout {
    gap: 2rem;
  }

  .cta-copy h2 {
    max-width: 100% !important;
  }

  .cta-copy .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-visual {
    order: -1;
    min-height: 290px;
  }

  .cta-visual-card {
    min-width: 98px;
    padding: .7rem .78rem;
  }

  .cta-visual-caption {
    display: none;
  }

  .cta-visual-card span {
    font-size: 1.38rem;
  }

  .why-us-showcase {
    padding: .72rem;
  }

  .why-us-showcase h3 {
    font-size: 1.55rem !important;
  }

  .why-us-proof-grid {
    grid-template-columns: 1fr;
  }

  .why-us-card:nth-child(even),
  .why-us-card:nth-child(even):hover {
    transform: none !important;
  }

  .why-us-card {
    min-height: auto;
  }

  .why-us-signature-badge {
    left: .75rem;
    bottom: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-soundwave span {
    animation: none !important;
  }
}

/* =========================================================================
   FULL HOME MAX POLISH — every homepage section, final cascade layer
   Harmonises the complete page after the generated CTA/Why-us refresh.
   ========================================================================= */

:root {
  --ds-steel: #516875;
  --ds-steel-soft: #e7edf0;
}

html {
  scroll-padding-top: 112px;
}

body {
  overflow-x: hidden;
}

.section-title,
.hero-content h1,
.hero-slide-title,
.hero-title-line,
.hero-title-highlight,
.service-card h3,
.gallery-featured-overlay h3,
.engagements-3cols .engagement-col h3,
.technologies-section .tech-card h3,
.why-us-showcase h3,
.why-us-card h3,
.deroulement-step h3,
.google-review-card .review-name,
.patients-section .patient-name,
.pourquoi-section .pq-card__body h3,
.faq-question span,
.contact-info > h3,
.contact-form-wrapper > h3 {
  letter-spacing: 0 !important;
}

.site-header,
.main-header,
header.site-header {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255,253,248,.9) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-olive) 12%, var(--ds-line));
}

.site-main > .reveal > .section:not(.hero-section):not(.cta-section):not(.why-us-section) {
  position: relative;
  isolation: isolate;
}

.site-main > .reveal > .section:not(.hero-section):not(.cta-section):not(.why-us-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--ds-olive) 5%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--ds-steel) 4%, transparent) 0 1px, transparent 1px 100%);
  background-size: 96px 96px;
  opacity: .45;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section-header {
  position: relative;
}

.section-header::after {
  content: "";
  display: block;
  width: min(220px, 42vw);
  height: 1px;
  margin: 1.35rem auto 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ds-olive) 42%, var(--ds-line)), transparent);
}

.section-label,
.technologies-section .brands-section > h3 {
  letter-spacing: .12em !important;
}

.btn,
.contact-form button[type="submit"] {
  border-radius: 8px !important;
}

.reassurance-bar {
  padding: .9rem 0 !important;
  background:
    linear-gradient(90deg, #fffdf8 0%, color-mix(in srgb, var(--ds-steel-soft) 36%, #fffdf8) 50%, #fffdf8 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.reassurance-items {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem !important;
}

.reassurance-item {
  min-height: 62px;
  padding: .78rem .95rem !important;
  border-radius: 8px;
  background: rgba(255,253,248,.76);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 11%, var(--ds-line));
  box-shadow: 0 12px 28px -24px rgba(35,42,28,.35);
}

.reassurance-item span {
  color: var(--ds-ink-soft);
  font-weight: 800;
}

.reassurance-icon {
  background: var(--ds-olive-deep) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -16px rgba(35,42,28,.65);
}

.services-section {
  background:
    linear-gradient(180deg, #fffdf8 0%, color-mix(in srgb, var(--ds-steel-soft) 35%, #fffdf8) 100%) !important;
}

.services-grid {
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem) !important;
}

.service-card {
  position: relative;
  min-height: 100%;
  padding: clamp(1.6rem, 2.6vw, 2.35rem) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-olive), var(--ds-steel));
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform .28s var(--ds-ease);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 112px;
  height: 112px;
  opacity: .12;
  background:
    repeating-linear-gradient(90deg, var(--ds-olive) 0 2px, transparent 2px 10px);
  transform: rotate(-18deg);
  pointer-events: none;
}

.service-features {
  display: flex !important;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  margin-top: 1.15rem !important;
}

.service-features li {
  display: inline-flex;
  align-items: center;
  padding: .42rem .62rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-olive) 7%, #fffdf8);
  border: 1px solid color-mix(in srgb, var(--ds-olive) 12%, transparent);
  color: var(--ds-olive-deep) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.gallery-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-steel-soft) 44%, #fffdf8) 0%, var(--ds-canvas-2) 100%) !important;
}

.gallery-showcase,
.gallery-features,
.why-us-showcase,
.deroulement-banner,
.deroulement-suivi,
.patients-cta,
.contact-info,
.contact-map,
.contact-form-wrapper {
  border-radius: 8px !important;
}

.gallery-featured,
.gallery-item-mini,
.pourquoi-section .pq-card,
.patients-section .patient-card,
.google-review-card,
.engagements-3cols .engagement-col,
.technologies-section .tech-card,
.why-us-card {
  border-radius: 8px !important;
}

.engagements-section {
  background:
    linear-gradient(180deg, #fffdf8 0%, color-mix(in srgb, var(--ds-olive) 5%, #fffdf8) 100%) !important;
}

.engagements-3cols .engagement-col-main {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ds-olive) 11%, #fffdf8), color-mix(in srgb, var(--ds-steel-soft) 42%, #fffdf8)) !important;
}

.engagements-3cols .engagement-col:not(.engagement-col-main)::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: auto;
  background: linear-gradient(90deg, var(--ds-olive), var(--ds-steel));
  opacity: .45;
}

.technologies-section {
  background:
    linear-gradient(180deg, var(--ds-canvas-2) 0%, color-mix(in srgb, var(--ds-steel-soft) 34%, var(--ds-canvas-2)) 100%) !important;
}

.technologies-section .brands-grid {
  padding: 1rem;
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  background: rgba(255,253,248,.55);
}

.deroulement-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-steel-soft) 30%, #fffdf8) 0%, var(--ds-canvas-2) 100%) !important;
}

.deroulement-banner {
  position: relative;
  border: 1px solid var(--ds-line) !important;
  box-shadow: 0 30px 80px -58px rgba(35,42,28,.48) !important;
}

.deroulement-timeline {
  position: relative;
}

.deroulement-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ds-olive) 34%, var(--ds-line)), transparent);
  transform: translateX(-50%);
}

.deroulement-step {
  position: relative;
  border-radius: 8px !important;
  border: 1px solid var(--ds-line) !important;
  background: rgba(255,253,248,.9) !important;
  box-shadow: none !important;
}

.deroulement-step:hover {
  border-color: color-mix(in srgb, var(--ds-olive) 30%, var(--ds-line)) !important;
  box-shadow: var(--ds-shadow-lift) !important;
}

.deroulement-step .step-number {
  font-family: 'Fraunces', Georgia, serif !important;
  background: var(--ds-olive-deep) !important;
  color: #fff !important;
  border: 5px solid #fffdf8 !important;
  box-shadow: 0 0 0 1px var(--ds-line), 0 16px 28px -20px rgba(35,42,28,.45);
}

.deroulement-step li::marker,
.deroulement-suivi li::marker {
  color: var(--ds-olive);
}

.deroulement-suivi {
  background:
    linear-gradient(135deg, var(--ds-olive-deep), color-mix(in srgb, var(--ds-steel) 34%, var(--ds-olive-deep))) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.22) !important;
}

.deroulement-suivi h3,
.deroulement-suivi li {
  color: #fff !important;
}

.testimonials-section {
  background:
    linear-gradient(180deg, #fffdf8 0%, color-mix(in srgb, var(--ds-steel-soft) 30%, #fffdf8) 100%) !important;
}

.testimonials-stats,
.patients-cta {
  border-radius: 8px !important;
  border: 1px solid var(--ds-line) !important;
  background: rgba(255,253,248,.76) !important;
  box-shadow: 0 22px 60px -48px rgba(35,42,28,.4) !important;
}

.patients-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-steel-soft) 34%, var(--ds-canvas-2)) 0%, #fffdf8 100%) !important;
}

.patients-grid {
  gap: clamp(1rem, 2vw, 1.55rem) !important;
}

.patients-cta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.3rem, 2.4vw, 2rem) !important;
}

.patients-cta p {
  margin: 0 !important;
  max-width: 52ch;
}

.pourquoi-section {
  background:
    linear-gradient(180deg, #fffdf8 0%, color-mix(in srgb, var(--ds-olive) 5%, #fffdf8) 100%) !important;
}

.pourquoi-section .pq-card__num {
  border-radius: 8px !important;
}

.faq-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ds-steel-soft) 34%, #fffdf8) 0%, var(--ds-canvas-2) 100%) !important;
}

.faq-list {
  padding: clamp(.5rem, 1vw, .9rem) clamp(.7rem, 1.4vw, 1.1rem);
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  background: rgba(255,253,248,.68);
}

.cta-section {
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(0,0,0,.18);
}

.contact-section {
  background:
    linear-gradient(180deg, var(--ds-canvas-2) 0%, #fffdf8 100%) !important;
}

.contact-inner {
  align-items: stretch !important;
  gap: clamp(1rem, 2vw, 1.6rem) !important;
}

.contact-info,
.contact-map {
  background: rgba(255,253,248,.78) !important;
  border: 1px solid var(--ds-line) !important;
  box-shadow: 0 22px 60px -50px rgba(35,42,28,.4) !important;
}

.contact-map {
  min-height: 100%;
  overflow: hidden;
}

.contact-map iframe {
  min-height: 360px;
  height: 100% !important;
  border-radius: 0 !important;
}

.contact-form-wrapper {
  box-shadow: 0 28px 76px -52px rgba(35,42,28,.46) !important;
}

.contact-form .form-row {
  gap: .8rem !important;
}

.back-to-top,
.floating-cta a {
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--ds-olive) 28%, transparent) !important;
  box-shadow: 0 18px 38px -26px rgba(35,42,28,.62) !important;
}

@media (min-width: 981px) {
  .services-grid .service-card:nth-child(2),
  .engagements-3cols .engagement-col:nth-child(3),
  .technologies-section .tech-card:nth-child(2n),
  .patients-grid .patient-card:nth-child(3n + 2) {
    transform: translateY(14px);
  }

  .services-grid .service-card:nth-child(2):hover,
  .engagements-3cols .engagement-col:nth-child(3):hover,
  .technologies-section .tech-card:nth-child(2n):hover,
  .patients-grid .patient-card:nth-child(3n + 2):hover {
    transform: translateY(8px) !important;
  }
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 86px;
  }

  .section {
    padding-top: clamp(3.2rem, 9vw, 5rem) !important;
    padding-bottom: clamp(3.2rem, 9vw, 5rem) !important;
  }

  .reassurance-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deroulement-timeline::before {
    left: 28px;
    transform: none;
  }

  .patients-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-map iframe {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .section-header::after {
    width: 140px;
    margin-top: 1rem;
  }

  .section-label,
  .technologies-section .brands-section > h3 {
    letter-spacing: .08em !important;
  }

  .reassurance-items {
    grid-template-columns: 1fr;
  }

  .reassurance-item {
    min-height: 56px;
  }

  .service-features {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .service-features li {
    width: 100%;
  }

  .faq-list {
    padding: .25rem .55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card::before,
  .service-card,
  .gallery-featured,
  .gallery-item-mini,
  .engagements-3cols .engagement-col,
  .technologies-section .tech-card,
  .deroulement-step,
  .patients-section .patient-card {
    transition: none !important;
  }
}

/* =========================================================================
   IMPECCABLE PASS — remove drift, tighten hero, harden mobile navigation
   Root cause fixed in footer.php: old injected-style.php no longer overrides.
   ========================================================================= */

.hero-title-highlight {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ds-olive-deep) !important;
  animation: none !important;
}

.hero-desktop .hero-title-line,
.hero-desktop .hero-title-highlight,
.section-title,
.section-label {
  letter-spacing: 0 !important;
}

.btn,
.header-rdv-btn,
.mobile-cta-btn,
.footer-call-link,
.contact-form button[type="submit"] {
  border-radius: 8px !important;
}

@media (min-width: 769px) {
  .hero-section {
    display: block !important;
    min-height: auto !important;
    padding: 112px 0 0 !important;
  }

  .hero-desktop {
    min-height: calc(100vh - 112px);
    display: flex !important;
    align-items: center !important;
  }

  .hero-desktop .hero-inner {
    min-height: 0 !important;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.75rem) !important;
    align-items: center !important;
  }

  .hero-desktop .hero-content {
    max-width: 35rem !important;
  }

  .hero-content h1 {
    font-size: clamp(2.9rem, 5.2vw, 4.35rem) !important;
    line-height: 1.04 !important;
    margin-bottom: 1.35rem !important;
  }

  .hero-desktop .hero-description {
    margin-bottom: 1.45rem !important;
    max-width: 34rem !important;
  }

  .hero-desktop .hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    margin-bottom: 1.45rem !important;
  }

  .hero-desktop .hero-buttons .btn {
    width: auto !important;
    min-height: 52px !important;
    padding: .9rem 1.25rem !important;
    white-space: nowrap;
  }

  .hero-desktop .hero-stats {
    margin-top: 0 !important;
    margin-bottom: 1.1rem !important;
    padding: 1rem 1.1rem !important;
  }

  .hero-desktop .hero-trust {
    margin-top: 0 !important;
    margin-bottom: 1.15rem !important;
  }

  .hero-desktop .hero-reassurance-badges {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }

  .hero-desktop .reassurance-badge {
    min-height: 66px !important;
  }

  .hero-desktop .hero-image-wrapper {
    transform: none !important;
  }

  .hero-desktop .hero-image-wrapper:hover {
    transform: translateY(-4px) !important;
  }

  .hero-scroll-indicator {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .main-nav:not(.active) {
    display: none !important;
    visibility: hidden !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .main-nav.active {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding: 92px 24px calc(96px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    background: var(--ds-canvas) !important;
    transform: none !important;
    visibility: visible !important;
    border: 0 !important;
    z-index: 9998 !important;
  }

  .main-nav.active .main-menu-list,
  .main-nav.active .main-menu-list > li,
  .main-nav.active .main-menu-list > li > a {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-nav.active .main-menu-list > li > a,
  .main-nav.active .mega-menu-group li a,
  .main-nav.active .mega-menu-all-link,
  .main-nav.active .mega-menu-group-title {
    min-height: 44px !important;
  }

  .mega-menu-panel {
    max-width: 100% !important;
  }

  .hero-slider-mobile .hero-title-highlight {
    color: color-mix(in srgb, var(--ds-sage) 72%, var(--ds-canvas)) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }

  .mobile-cta {
    padding-bottom: max(.45rem, env(safe-area-inset-bottom)) !important;
  }

  .reassurance-bar .reassurance-items {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .7rem !important;
    overflow: hidden !important;
  }

  .reassurance-bar .reassurance-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  .google-reviews-carousel {
    width: 100% !important;
    overflow: hidden !important;
  }

  .google-reviews-carousel .carousel-container,
  .google-reviews-carousel .carousel-track {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .google-review-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-contact-link,
  .footer-contact a,
  .contact-item-content a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}

/* Impeccable hard ban: no live gradient text, even from older theme layers. */
.hero-title-line,
.hero-title-highlight,
.hero-desktop .hero-title-highlight,
.hero-slide-content .hero-title-highlight,
.hero-stats .stat-number,
.stat-number {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-title-line {
  color: var(--ds-ink) !important;
}

.hero-title-highlight,
.hero-desktop .hero-title-highlight,
.hero-slide-content .hero-title-highlight,
.hero-stats .stat-number {
  color: var(--ds-olive-deep) !important;
}

@media (max-width: 767px) {
  .hero-slider-mobile .hero-slide-content {
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 26px 18px 20px !important;
    border-radius: 8px !important;
    background: rgba(35, 42, 28, .88) !important;
    border: 1px solid rgba(243, 241, 232, .22) !important;
    box-shadow: 0 18px 46px -24px rgba(20, 24, 17, .72) !important;
  }

  .hero-slider-mobile .hero-slide-content h1,
  .hero-slider-mobile .hero-slide-title {
    font-size: clamp(2.1rem, 10vw, 3.05rem) !important;
    line-height: .98 !important;
    margin-bottom: 14px !important;
  }

  .hero-slider-mobile .hero-title-line,
  .hero-slider-mobile .hero-title-highlight {
    display: block !important;
    color: var(--ds-canvas) !important;
    text-shadow: none !important;
  }

  .hero-slider-mobile .hero-title-highlight {
    color: color-mix(in srgb, var(--ds-sage) 64%, var(--ds-canvas)) !important;
  }

  .hero-slider-mobile .hero-description {
    color: rgba(250, 248, 243, .82) !important;
    font-size: .98rem !important;
    line-height: 1.5 !important;
    max-width: 31ch !important;
    margin-bottom: 20px !important;
  }

  .hero-slider-mobile .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-slider-mobile .btn {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 8px !important;
  }
}