/* ============================================================
   medO marcus — page patient  [mds_marcus_patient]
   Figma: desktop 3839-44117 · mobile 5409-30078
   Layout + color only — typography comes from the DS classes
   in the markup (.h2/.h4/.h5/.h6, .text-p1–p4, .fw-*).
   ============================================================ */

[class^="marcus-patient-"],
[class*=" marcus-patient-"] { box-sizing: border-box; }

/* page container — % of the FULL viewport width (1420/1920, 366/414) */
.marcus-patient-in {
  width: calc(100% - 2 * var(--section-gutter)); /* 1420 cap, gutters below it */
  max-width: var(--section-container);
  margin-inline: auto;
}
.marcus-patient-pad { padding-block: var(--spacing-step-11); } /* 64px */

/* shared icon holder */
.marcus-patient-ico { display: inline-flex; flex-shrink: 0; color: var(--primary-default); }
.marcus-patient-ico svg { width: 100%; height: 100%; display: block; }

/* Figma "Features Accolade" corner brackets — same 4-corner pattern as alys.
   Base path draws a top-right corner at 0deg (alys sprite geometry). */
.marcus-patient-brackets { position: relative; }
.marcus-patient-brackets > .c {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  color: var(--site-accent);
}
.marcus-patient-brackets > .c svg { width: 100%; height: 100%; display: block; }
.marcus-patient-brackets > .tr { top: 0; right: 0; }
.marcus-patient-brackets > .br { bottom: 0; right: 0; transform: rotate(90deg); }
.marcus-patient-brackets > .bl { bottom: 0; left: 0; transform: rotate(180deg); }
.marcus-patient-brackets > .tl { top: 0; left: 0; transform: rotate(-90deg); }

/* ============================================================
   1. Hero (3839-44120) — blue panel left, flattened photo right
   ============================================================ */
.marcus-patient-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  border-bottom: 1px solid var(--neutrals-500);
  color: var(--neutrals-100-white);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
/* left blue panel — 1124/1920 */
.marcus-patient-hero::before {
  content: "";
  position: absolute;
  inset: 0 41.458% 0 0;
  background: var(--primary-default);
}
/* flattened photo+chat export — 796/1920 */
.marcus-patient-hero-media {
  position: absolute;
  inset: 0 0 0 58.542%;
  /* the template passes an ABSOLUTE url in --mpat-hero; the fallback here is
     relative and so resolves against this stylesheet, which is what we want.
     A relative url() inside a custom property set in the markup would resolve
     against the document instead — hence absolute there. */
  background: var(--mpat-hero, url("../img/marcus-patient-hero.jpg")) right center / cover no-repeat;
}
.marcus-patient-hero > .marcus-patient-in { position: relative; z-index: 1; }
.marcus-patient-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-8); /* 32px */
  width: 55.915%; /* 794/1420 */
}
.marcus-patient-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-3); /* 8px */
}
.marcus-patient-hero-text p { max-width: 620px; }
.marcus-patient-hero-actions { display: flex; gap: var(--spacing-step-6); align-items: center; flex-wrap: wrap; }

/* ============================================================
   2. L'allié de votre consultation médicale (3839-44224)
   ============================================================ */
.marcus-patient-allie {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-8); /* 32px */
}
.marcus-patient-allie-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
}
.marcus-patient-allie-head .h4 { color: var(--neutrals-950); max-width: 710px; }
.marcus-patient-allie-head p { color: var(--neutrals-800); max-width: 656px; }
.marcus-patient-allie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-right: 1px solid var(--neutrals-400);
  border-bottom: 1px solid var(--neutrals-400);
}
.marcus-patient-allie-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-3); /* 8px */
  padding: var(--spacing-step-7); /* 24px */
  border-top: 1px solid var(--neutrals-400);
  border-left: 1px solid var(--neutrals-400);
}
.marcus-patient-allie-item .marcus-patient-ico { width: 28px; height: 28px; }
.marcus-patient-allie-body {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Figma 6px, no token */
  min-width: 0;
}
.marcus-patient-allie-body .t { color: var(--neutrals-950); }
.marcus-patient-allie-body .d { color: var(--neutrals-800); }

/* ============================================================
   3. marcus vous guide (4105-9808) — light-blue band,
      flattened photo+chat as background image
   ============================================================ */
.marcus-patient-guide {
  position: relative;
  min-height: 397px;
  padding: var(--spacing-step-10); /* 48px */
  /* one flattened full-band export — the Figma #b4e9f9 fill is baked into it,
     so there is no CSS colour under the art (ACF swaps the whole image) */
  background: var(--mpat-guide, url("../img/marcus-patient-guide.jpg")) center / cover no-repeat;
}
.marcus-patient-guide-copy {
  display: flex;
  flex-direction: column;
  gap: 43px; /* Figma 43px, no token */
  max-width: 51.2%; /* 727/1420 */
}
.marcus-patient-guide-copy .h5 { color: var(--neutrals-950); }
.marcus-patient-guide-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
  color: var(--neutrals-800);
}

/* ============================================================
   4. Comment utiliser marcus ? (3839-44316)
   ============================================================ */
.marcus-patient-how {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-8); /* 32px */
}
.marcus-patient-how .h4 { color: var(--neutrals-950); }
.marcus-patient-how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-step-7); /* 24px */
  width: 100%;
}
.marcus-patient-step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7); /* 24px */
  padding: var(--spacing-step-7);
}
.marcus-patient-step-img {
  width: 100%;
  aspect-ratio: 650 / 425;
  object-fit: cover;
  display: block;
}
.marcus-patient-step-body {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Figma 6px, no token */
}
.marcus-patient-step-body .t { color: var(--neutrals-950); }
.marcus-patient-step-body .d { color: var(--neutrals-800); }
.marcus-patient-step-time { color: var(--primary-default); }
.marcus-patient-step-body a { color: var(--primary-default); text-decoration: underline; }

/* ============================================================
   5. marcus ne remplace pas l'entretien médical (3839-44654)
   ============================================================ */
.marcus-patient-prepare {
  /* the Figma gradient rect exported at the section's own 1920×606 window —
     one full-section image, no CSS colour beneath it (ACF swaps the image) */
  background: var(--mpat-prepare, url("../img/marcus-patient-prepare-bg.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.marcus-patient-prepare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-8);
}
.marcus-patient-prepare-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
  max-width: 40.85%; /* 580/1420 */
}
.marcus-patient-prepare-media {
  flex: 0 0 50.423%; /* 716/1420 */
  border-radius: var(--radius-step-9); /* 8px */
  overflow: hidden;
}
.marcus-patient-prepare-media img { width: 100%; height: auto; display: block; }

/* ============================================================
   6. Conçu pour votre quotidien / Vos infos, protégées (3839-44664)
   ============================================================ */
.marcus-patient-daily {
  display: flex;
  align-items: flex-start;
  gap: 6.76%; /* 96/1420 */
}
.marcus-patient-daily-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.marcus-patient-daily .h4 { color: var(--neutrals-950); }
.marcus-patient-daily-quotidien { gap: var(--spacing-step-11); } /* 64px */
.marcus-patient-daily-infos { gap: var(--spacing-step-8); } /* 32px */
.marcus-patient-daily-infos-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.marcus-patient-daily-infos-head p { color: var(--neutrals-950); }

/* bare blue checkmark list (Figma streamline check — the DS .check-list
   uses the filled-circle variant, this page uses the plain check) */
.marcus-patient-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
}
.marcus-patient-checks li {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma 10px, no token */
  color: var(--neutrals-950);
}
.marcus-patient-checks .marcus-patient-ico { width: 19px; height: 19px; }

/* tinted rows with corner brackets — same recipe as the alys data rows */
.marcus-patient-data-list { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.marcus-patient-data-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-step-7); /* 24px */
  padding: 14px var(--spacing-step-7); /* Figma 14px, no token */
  background: rgb(0 106 250 / 0.1); /* Figma tint of the site accent, not a token */
  color: var(--neutrals-950);
}
.marcus-patient-data-row .marcus-patient-ico { width: 31px; height: 31px; }

/* ============================================================
   7. Parlez-en à votre professionnel (3839-44723)
      — same geometry as the alys "Vos données" mark section
   ============================================================ */
.marcus-patient-parlez { position: relative; display: flex; align-items: center; min-height: 364px; }
.marcus-patient-parlez-mark {
  position: absolute;
  left: 5.7%;  /* 81/1420 */
  top: 50%;
  transform: translateY(-50%);
  width: 26.45%; /* 375.665/1420 */
}
.marcus-patient-parlez-mark img { width: 100%; height: auto; display: block; }
.marcus-patient-parlez-copy {
  margin-left: auto;
  width: 46.62%; /* 662/1420 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16px */
  color: var(--neutrals-950);
}

/* ============================================================
   8. FAQ (3839-44749) — DS .accordion .accordion-md, same shell as alys
   ============================================================ */
.marcus-patient-faq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-8); /* 32px */
}
.marcus-patient-faq-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); max-width: 50%; }
.marcus-patient-faq-head .h4 { color: var(--neutrals-950); }
.marcus-patient-faq-head p { color: var(--neutrals-800); }
.marcus-patient-faq-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); width: 100%; }
.marcus-patient-faq-items { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-step-6); }
/* Figma outlines every accordion with a 1px light-primary hairline */
.marcus-patient-faq-items .accordion { border: 1px solid #8adcf6; } /* gradient/primary/light, no matching token */
.marcus-patient-faq-media {
  flex: 0 0 49.15%; /* 698/1420 */
  border-radius: var(--radius-7md); /* 16px */
  overflow: hidden;
  background: linear-gradient(178.12deg, var(--neutrals-400) 5.28%, var(--neutrals-500) 156.72%);
  
}
/* <picture> swaps in the mobile crop (5410-32651); the wrapper must fill too */
.marcus-patient-faq-media picture { display: block; width: 100%; height: 100%; }
.marcus-patient-faq-media img { width: 100%; height: 100%; object-fit: cover; display: block; }



/* ============================================================
   9. CTA (3839-44770) — DS .section-cta + ofys texture
   ============================================================ */
/* the DS has no global box-sizing and .section-cta is content-box by default —
   without this the 96px padding stacks on top of the 494px min-height */
.marcus-patient-cta-wrap .section-cta { box-sizing: border-box; padding: var(--spacing-step-10) var(--spacing-step-7); } /* 48/24 */
.marcus-patient-cta-wrap .section-cta-text { gap: 42px; } /* Figma 42px, no token */
.marcus-patient-cta-wrap .section-cta-title { max-width: 706px; }
.marcus-patient-cta-check {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma 10px, no token */
}
.marcus-patient-cta-check .marcus-patient-ico { width: 17px; height: 17px; color: currentColor; }

/* hover states reproduced for headless screenshots — mirrors every :hover rule,
   including the .btn-secondary and .mds-nav-cta overrides, so measured widths match */
.qa-hover.btn-pill { padding: 8px 24px; border: 0 solid transparent; border-right-width: 34px; background-clip: padding-box; border-radius: 28px 62px 62px 28px / 28px; }
.qa-hover.btn-pill .btn-icon-circle { width: 0; opacity: 0; margin-right: -10px; }
.qa-hover.btn-pill .btn-icon-pop { opacity: 1; transform: scale(1); }
/* 35 = the 34px hover shift + the outlined pill's own 1px right border */
.qa-hover.btn-secondary { border-width: 1px 35px 1px 1px; }
.qa-hover.mds-nav-cta { padding: 7px 21px; border-right-width: 31px; border-radius: 25px 56px 56px 25px / 25px; }

/* ============================================================
   Mobile — 5409-30078
   ============================================================ */
@media (max-width: 1023px) {
  /* « …conforme à la loi 25 » on one line on phones: tighter row, label
     re-pointed at the DS p3 step (token, not a px size) */
  .marcus-patient-data-row {
    padding-inline: var(--spacing-step-6);
    gap: var(--spacing-step-5);
    --typography-size-p2: var(--typography-size-p3);
    --typography-line-height-p2: var(--typography-line-height-p3);
  }
  .marcus-patient-in { width: 88.406%; } /* 366/414 */
  .marcus-patient-pad { padding-block: var(--spacing-step-10); } /* 48px */

  /* hero: blue panel with stacked buttons, photo below */
  .marcus-patient-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  /* the blue moves onto the section itself — an element's own background paints
     BELOW its in-flow children, so the now-static media sits on top of it;
     the absolutely-positioned ::before would have covered it instead */
  .marcus-patient-hero { background: var(--primary-default); }
  .marcus-patient-hero::before { content: none; }
  .marcus-patient-hero > .marcus-patient-in { padding-block: var(--spacing-step-10); }
  .marcus-patient-hero-copy { width: 100%; }
  .marcus-patient-hero-actions { flex-direction: column; align-items: flex-start; }
  .marcus-patient-hero-media {
    position: static;
    aspect-ratio: 414 / 239;
    background-image: var(--mpat-hero-m, url("../img/marcus-patient-hero-mobile.jpg"));
    background-position: center;
    background-size: cover;
  }

  .marcus-patient-allie { gap: var(--spacing-step-7); } /* 24px */
  .marcus-patient-allie-grid { grid-template-columns: 1fr; }
  .marcus-patient-allie-item { padding: var(--spacing-step-6); } /* 16px */

  /* light band: text on top, its own full-card export with the visual pinned
     to the bottom and the #b4e9f9 fill baked in (same one-image rule as desktop) */
  .marcus-patient-guide {
    min-height: 0;
    padding: var(--spacing-step-7); /* 24px */
    /* 284px visual + 24px gap reserved under the copy */
    padding-bottom: 308px;
    background-image: var(--mpat-guide-m, url("../img/marcus-patient-guide-mobile.jpg"));
    background-position: bottom center;
  }
  .marcus-patient-guide-copy { max-width: none; gap: var(--spacing-step-7); }

  .marcus-patient-how-grid { grid-template-columns: 1fr; }

  /* the mobile frame crops the gradient render differently (5410-33116) */
  .marcus-patient-prepare { background-image: var(--mpat-prepare-m, url("../img/marcus-patient-prepare-bg-mobile.jpg")); }
  .marcus-patient-prepare-row { flex-direction: column; align-items: stretch; gap: var(--spacing-step-8); }
  .marcus-patient-prepare-copy { max-width: none; }
  .marcus-patient-prepare-media { flex: none; }

  .marcus-patient-daily { flex-direction: column; gap: var(--spacing-step-10); } /* 48px */
  .marcus-patient-daily-quotidien { gap: var(--spacing-step-8); } /* 32px */

  /* mark below the copy, centred (5410-32575) */
  .marcus-patient-parlez { flex-direction: column; align-items: stretch; min-height: 0; gap: var(--spacing-step-7); }
  .marcus-patient-parlez-mark {
    order: 2; /* desktop puts the mark left of the copy, mobile puts it under */
    position: static;
    transform: none;
    width: 66.4%; /* 243/366 */
    margin-inline: auto;
  }
  .marcus-patient-parlez-copy { margin-left: 0; width: 100%; }

  .marcus-patient-faq-head { max-width: none; }
  /* mobile stacks the photo ABOVE the accordions (5410-32651), so it leads the column */
  .marcus-patient-faq-row { flex-direction: column; gap: var(--spacing-step-7); }
  .marcus-patient-faq-media {
    order: -1;
    flex: none;
    aspect-ratio: 366 / 291;
  }

  /* CTA: button under the copy, texture at the bottom of the band */
  .marcus-patient-cta-wrap .section-cta { min-height: 775px; justify-content: flex-start; }
  .marcus-patient-cta-wrap .section-cta > .btn-pill { align-self: flex-start; }
  .marcus-patient-cta-wrap .section-cta-texture { top: auto; bottom: 0; transform: translate(-50%, 0); width: 160%; }
}