/* ============================================================
   medO espace patient — page styles  (MDS Templates plugin)
   Extracted from the QA preview; Figma 6471-38188 (desktop 1920).
   No mobile frame exists: the ≤1023 layer follows the acto / alys
   mobile patterns (same section shapes, same breakpoints).

   Loaded only on posts that contain the [mds_espace_patient] shortcode.
   Typography always comes from the DS classes in the markup
   (.h2/.h3/.h4/.h5/.h6, .text-p1-.text-p4 + .fw-*) - this file
   carries layout, colour and documented deviations only.
   ============================================================ */
.ep-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* page-scoped border-box: several blocks pair a % width or a min-height with
   padding, and the DS does not set a global box-sizing */
[class^="ep-"], [class*=" ep-"] { box-sizing: border-box; }

/* 1420 content container, sized as a % of the 1920 design width and centred */
.ep-in {
  width: calc(100% - 2 * var(--section-gutter)); /* 1420 cap, gutters below it */
  max-width: var(--section-container);
  margin-inline: auto;
}
.ep-pad { padding-block: var(--spacing-step-11); } /* 64px */

/* icon box — exported vectors keep their own aspect ratio inside it */
.ep-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ep-ico svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   1. Hero (6485-48654) — one flattened background: room photo,
   masked brand gradient, glow, appointment card and the cut-out
   all baked into a single JPEG (text hidden for the export).
   ============================================================ */
.ep-hero {
  display: flex;
  align-items: center;
  min-height: 460px;
  /* 70%: below 1920 the crop eats the left fade first and keeps the appointment card */
  background: var(--ep-hero-bg, url("../img/ep-hero.jpg")) 70% center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.ep-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-step-10); /* 48px */
  width: 47.68%; /* 677/1420 */
  min-width: 420px;
}
.ep-hero-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); } /* 16px */

/* ============================================================
   2. Plus d'autonomie côté patient (6471-38428)
   Photo = one flattened export (6471-38430), text + checklist live.
   ============================================================ */
.ep-split { display: flex; align-items: center; justify-content: space-between; padding-block: var(--spacing-step-11); }
.ep-split-media {
  flex: 0 0 46.62%; /* 662/1420 */
  border-radius: var(--radius-7md); /* 16px */
  overflow: hidden;
}
.ep-split-media img { display: block; width: 100%; height: auto; aspect-ratio: 662 / 541; object-fit: cover; }
.ep-split-content { width: 46.62%; display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.ep-split-title { max-width: 558px; }
/* the DS .check-list li hard-codes P3; this list is P2, so the size rides on the
   .text-p2 that sits on the <ul> and the items simply inherit it */
.ep-split .check-list { gap: var(--spacing-step-4); }
.ep-split .check-list li { font-size: inherit; line-height: inherit; }
.ep-split .check-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230c67e9'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   3. Features carousel (component set 6471-46237, 4 variants)
   CSS-only: 4 radios drive the tab chrome and the panels together.
   Same rig as acto — tabs on top, two heads per panel.
   ============================================================ */
.ep-features { display: flex; flex-direction: column; gap: var(--spacing-step-10); }
/* Figma sets this one title in Roobert Bold 48/58 (a stray font); the DS h4
   semibold the rest of the page uses stands in for it */
.ep-features-title { color: var(--neutrals-950); max-width: 50.77%; } /* 721/1420 */
.ep-feat { position: relative; }
.ep-feat > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ep-feat-stage {
  position: relative;
  aspect-ratio: 1420 / 745;
  border-radius: var(--radius-7md);
  overflow: hidden;
  box-shadow: 0 var(--dropshadow-positioning-2xs) var(--dropshadow-blur-2xs-2) var(--opacity-dark-10);
}
.ep-feat-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: center / cover no-repeat;
  transition: opacity 0.35s ease;
}
/* Overlay-Top + Overlay-Bottom from Figma, as scrims behind the live text */
.ep-feat-panel::before,
.ep-feat-panel::after { content: ""; position: absolute; pointer-events: none; }
.ep-feat-panel::before {
  left: 0; right: 0; top: 0;
  height: 17.45%; /* 130/745 */
  background: linear-gradient(180deg, var(--opacity-dark-60) 5.371%, rgb(0 0 0 / 0) 84.156%);
}
.ep-feat-panel::after {
  inset: 0;
  /* the Figma blob is 559x789 at -133/147 in a 1420x745 panel, blurred */
  background: radial-gradient(51.83% 114.23% at 10.28% 72.62%, var(--feat-scrim-stops));
}
.ep-feat-copy {
  position: absolute;
  left: 1.83%;   /* 26/1420 */
  bottom: 6.71%; /* 50/745 */
  width: 32.25%; /* 458/1420 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px; /* Figma text block → button, no token */
  color: var(--neutrals-100-white);
}
.ep-feat-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.ep-feat-desc { color: var(--opacity-light-90); }
.ep-feat-tabs {
  position: absolute;
  left: 1.83%;
  right: 1.83%;
  top: 3.22%; /* 24/745 */
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4);
  z-index: 2;
}
.ep-feat-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-5) var(--spacing-step-7); /* 12px 24px */
  border-radius: 60px; /* no 60px radius token */
  background: var(--opacity-light-20);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  color: var(--neutrals-100-white);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.ep-feat-tab:hover { background: var(--opacity-light-30); }
.ep-feat-tab .ep-ico { width: 24px; height: 24px; }
/* the blue progress fill sweeps left→right under the label */
.ep-feat-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary-default);
}
.ep-feat-tab > :not(.ep-feat-fill) { position: relative; z-index: 1; }

/* ── autoplay: 4 slides × 3s, looping (same rig as acto) ── */
@keyframes ep-panel {
  0%    { opacity: 0; visibility: hidden; }
  1%    { opacity: 1; visibility: visible; }
  25%   { opacity: 1; visibility: visible; }
  28%   { opacity: 0; visibility: hidden; }
  100%  { opacity: 0; visibility: hidden; }
}
@keyframes ep-fill-1 { 0%      { width: 0; } 25%  { width: 100%; } 100% { width: 100%; } }
@keyframes ep-fill-2 { 0%, 25% { width: 0; } 50%  { width: 100%; } 100% { width: 100%; } }
@keyframes ep-fill-3 { 0%, 50% { width: 0; } 75%  { width: 100%; } 100% { width: 100%; } }
@keyframes ep-fill-4 { 0%, 75% { width: 0; } 100% { width: 100%; } }

.ep-feat-panel { animation: ep-panel 12s linear infinite both; }
.ep-feat-panel:nth-of-type(2) { animation-delay: -9s; }
.ep-feat-panel:nth-of-type(3) { animation-delay: -6s; }
.ep-feat-panel:nth-of-type(4) { animation-delay: -3s; }
.ep-feat-fill { animation: 12s linear infinite both; }
.ep-feat-tab:nth-of-type(1) .ep-feat-fill { animation-name: ep-fill-1; }
.ep-feat-tab:nth-of-type(2) .ep-feat-fill { animation-name: ep-fill-2; }
.ep-feat-tab:nth-of-type(3) .ep-feat-fill { animation-name: ep-fill-3; }
.ep-feat-tab:nth-of-type(4) .ep-feat-fill { animation-name: ep-fill-4; }

/* hovering anywhere in the block freezes the rotation */
.ep-feat:hover .ep-feat-panel,
.ep-feat:hover .ep-feat-fill { animation-play-state: paused; }

/* picking a tab takes over: autoplay stops and that slide stays put
   (so the radios must ship UNchecked, or autoplay never starts) */
.ep-feat:has(> input:checked) .ep-feat-panel,
.ep-feat:has(> input:checked) .ep-feat-fill { animation: none; }
.ep-feat:has(> input:checked) .ep-feat-panel { opacity: 0; visibility: hidden; }
.ep-feat:has(> input:checked) .ep-feat-fill { width: 0; }
.ep-feat:has(> input:nth-of-type(1):checked) .ep-feat-tab:nth-of-type(1) .ep-feat-fill,
.ep-feat:has(> input:nth-of-type(2):checked) .ep-feat-tab:nth-of-type(2) .ep-feat-fill,
.ep-feat:has(> input:nth-of-type(3):checked) .ep-feat-tab:nth-of-type(3) .ep-feat-fill,
.ep-feat:has(> input:nth-of-type(4):checked) .ep-feat-tab:nth-of-type(4) .ep-feat-fill { width: 100%; }
.ep-feat:has(> input:nth-of-type(1):checked) .ep-feat-panel:nth-of-type(1),
.ep-feat:has(> input:nth-of-type(2):checked) .ep-feat-panel:nth-of-type(2),
.ep-feat:has(> input:nth-of-type(3):checked) .ep-feat-panel:nth-of-type(3),
.ep-feat:has(> input:nth-of-type(4):checked) .ep-feat-panel:nth-of-type(4) { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .ep-feat-panel, .ep-feat-fill { animation: none; }
  .ep-feat-panel { opacity: 0; visibility: hidden; }
  .ep-feat-panel:nth-of-type(1) { opacity: 1; visibility: visible; }
  .ep-feat-tab:nth-of-type(1) .ep-feat-fill { width: 100%; }
}

/* ============================================================
   4. Un espace patient qui travaille pour la clinique (6471-38472)
   ============================================================ */
.ep-work { display: flex; align-items: stretch; }
.ep-work-intro {
  flex: 1 1 0;
  min-width: 0;
  padding-block: var(--spacing-step-10); /* 48px */
  color: var(--neutrals-950);
}
.ep-work-list {
  flex: 0 0 50%; /* 710/1420 */
  list-style: none;
  margin: 0;
  padding: var(--spacing-step-9) 0; /* 40px */
  display: flex;
  flex-direction: column;
}
.ep-work-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-7);
  border: 1px solid var(--neutrals-400);
}
.ep-work-item + .ep-work-item { margin-top: -1px; }
.ep-work-item .ep-ico { width: 28px; height: 28px; color: var(--primary-default); }
.ep-work-body { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-step-3); }
.ep-work-body .t { color: var(--neutrals-950); }
.ep-work-body .d { color: var(--neutrals-800); }

/* ============================================================
   5. Blue band (6471-38515) — primary fill + the blurred Ellipse 11
   glow composited into one full-band image
   ============================================================ */
.ep-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px; /* Figma, no token */
  padding: var(--spacing-step-8) var(--spacing-step-7); /* 32px 24px */
  background: var(--ep-band-bg, url("../img/ep-band.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
  text-align: center;
}
.ep-band-text { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-4); }
.ep-band-title { max-width: 526px; }

/* ============================================================
   6. alys, des deux côtés de la rencontre (6471-38524)
   The whole 1420×589 box is one export (white field + render +
   white fade + the three product labels); the copy sits on its
   white left side.
   ============================================================ */
.ep-kit {
  display: flex;
  align-items: center;
  min-height: 589px;
  background: var(--ep-kit-bg, url("../img/ep-kit.jpg")) right center / cover no-repeat;
}
.ep-kit-copy {
  width: 42.68%; /* 606/1420 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 65px; /* Figma, no token */
  padding-block: var(--spacing-step-11);
}
.ep-kit-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.ep-kit-title { max-width: 558px; }
.ep-kit-head p,
.ep-kit-list { color: var(--neutrals-800); }
.ep-kit-list { margin: 0; padding-left: 27px; max-width: 529px; list-style: disc; } /* Figma ms-27 */
/* mobile-only: the illustration as its own full-bleed block under the copy */
.ep-kit-visual { display: none; }

/* ============================================================
   7. Vos données, protégées (6471-46648)
   ============================================================ */
.ep-brackets { position: relative; }
.ep-brackets > .c { position: absolute; width: 24px; height: 24px; pointer-events: none; color: var(--primary-default); }
.ep-brackets > .c svg { width: 100%; height: 100%; display: block; }
.ep-brackets > .tl { top: 0; left: 0; }
.ep-brackets > .tr { top: 0; right: 0; transform: rotate(90deg); }
.ep-brackets > .br { bottom: 0; right: 0; transform: rotate(180deg); }
.ep-brackets > .bl { bottom: 0; left: 0; transform: rotate(270deg); }

.ep-data { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-10); }
.ep-data-head { display: flex; flex-direction: column; gap: var(--spacing-step-4); text-align: center; max-width: 1007px; color: var(--neutrals-950); }
.ep-data-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); width: 100%; }
.ep-data-badge {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7);
  background: rgb(0 106 250 / 0.1); /* Figma tint, not a token */
}
.ep-data-badge .ep-ico { width: 31px; height: 31px; color: var(--primary-default); }
.ep-data-badge p { margin: 0; color: var(--neutrals-950); white-space: nowrap; }

/* ============================================================
   8. Testimonials (6471-38546) — shared .testimonials component
   ============================================================ */
.ep-trust-title { color: var(--neutrals-950); }
.ep-testi-wrap { display: flex; flex-direction: column; gap: var(--spacing-step-8); } /* title y64 → card y146 */
/* the photos are this page's own 2× exports of the 485×369.33 Figma boxes */
.ep-testi .testimonial-photo { aspect-ratio: 485 / 369.33; }
.ep-testi .testimonial-photo img { height: 100%; object-fit: cover; }
/* the logos ship as Figma's whole 64×53 thumbnail tile (Hampstead's is a white mark
   on #004097), so the image fills the box; the shared rule leaves the <img> at its
   natural width and crops anything wider than 64px */
.ep-testi .testimonial-logo img { width: 100%; height: 100%; object-fit: contain; }
/* this page packs the three tabs left instead of spreading them */
.ep-testi .testimonial-tabs { justify-content: flex-start; }

/* ============================================================
   9. Une autre fonction clé du DMÉ medO alys (6474-47465)
   ============================================================ */
.ep-more { display: flex; align-items: flex-start; gap: var(--spacing-step-7); padding-top: 49px; padding-bottom: var(--spacing-step-11); } /* Figma 49/64, no 49px token */
.ep-more-head { flex: 0 0 36.76%; color: var(--neutrals-950); } /* 522/1420 */
.ep-more-cards { flex: 1 1 0; min-width: 0; display: flex; }
/* this card has no logo slot in Figma — title, desc and the bare ghost arrow */
/* the DS card is content-box; border-box so the % lands on Figma's outer 433 */
.ep-more-cards .card-product { box-sizing: border-box; width: 49.54%; } /* 433/874 */
.ep-more-cards .card-ghost .btn-icon { width: 16px; height: 16px; }

/* ============================================================
   10. CTA (6471-38577) — same flattened gradient + colour-burn
   Ofys texture as the acto CTA (1420×494), so its art is reused
   ============================================================ */
.ep-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 494px;
  padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
  background: var(--ep-cta-bg, url("../img/acto-cta.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.ep-cta-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); width: 100%; }
.ep-cta-text .h3 { max-width: 584px; }
.ep-cta-text p { max-width: 570px; }

/* 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); }
.qa-hover.btn-secondary { border-width: 1px 34px 1px 1px; }
.qa-hover.mds-nav-cta { padding: 7px 21px; border-right-width: 31px; border-radius: 25px 56px 56px 25px / 25px; }

/* ============================================================
   Tablet — between the two Figma frames: keep the desktop
   shapes, just stop the wide blocks from colliding
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ep-in { width: 92%; }
  .ep-br-d { display: none; } /* Figma's hard breaks only hold at the 1420 measure */
  .ep-feat-copy { width: 40%; }
  /* two heads of copy need ~680px: below 1420 the 1420/745 ratio drops under it */
  /* (a min-height next to aspect-ratio gets transferred into a min-WIDTH,
     so the height is spelled out from the container width instead) */
  .ep-features { container-type: inline-size; }
  .ep-feat-stage { aspect-ratio: auto; height: max(680px, calc(100cqw * 745 / 1420)); }
  /* the render would slide under the copy: let the white field win */
  .ep-kit { background-size: auto 100%; background-position: 100% center; }
  .ep-kit-copy { width: 46%; }
  .ep-data-badge { gap: var(--spacing-step-6); padding-inline: var(--spacing-step-6); }
  .ep-data-badge p { white-space: normal; }
}

/* narrow desktop: the render no longer clears the copy — stack it like mobile */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ep-kit { flex-direction: column; align-items: stretch; min-height: 0; background: none; }
  .ep-kit-copy { width: 100%; gap: var(--spacing-step-8); padding-block: var(--spacing-step-11) 0; }
  .ep-kit-visual {
    display: block;
    aspect-ratio: 1260 / 884;
    margin-top: var(--spacing-step-6);
    background: var(--ep-kit-bg-mobile, url("../img/ep-kit-mobile.jpg")) center / cover no-repeat;
  }
}

/* ============================================================
   Mobile (≤1023) — no Figma frame: acto / alys mobile patterns
   ============================================================ */
@media (max-width: 1023px) {
  /* .ep-in keeps the 24px gutter; --ep-bleed widens a child back to the
     device edges (never 100vw — that counts the scrollbar) */
  .ep-in { width: 88.406%; --ep-bleed: calc(100% / 0.88406); } /* 366/414 */
  .ep-pad { padding-block: var(--spacing-step-10); } /* 48px */
  .ep-br-d { display: none; }

  /* hero: its own flattened background — brand gradient over the
     appointment-card photo at the bottom */
  .ep-hero {
    min-height: 680px; /* the 750-tall art is bottom-anchored: only its gradient top is trimmed */
    align-items: flex-start;
    background: var(--ep-hero-bg-mobile, url("../img/ep-hero-mobile.jpg")) center bottom / cover no-repeat;
  }
  .ep-hero .ep-in { padding-top: var(--spacing-step-10); }
  .ep-hero-copy { width: 100%; min-width: 0; gap: var(--spacing-step-8); }

  /* split: title → photo → text → checklist */
  .ep-split { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--spacing-step-10); }
  .ep-split-content { display: contents; }
  .ep-split-title { order: 1; max-width: none; }
  .ep-split-media { order: 2; flex: none; margin-top: var(--spacing-step-6); }
  .ep-split-text { order: 3; margin-top: var(--spacing-step-6); }
  .ep-split .check-list { order: 4; margin-top: var(--spacing-step-8); }

  .ep-features { gap: var(--spacing-step-7); }
  .ep-features-title { max-width: none; }
  /* Figma mobile Features Component 5118-46808 (366×687): the photo covers the
     whole panel under the same two scrims, tabs keep their desktop size with a
     16px gap, and the copy is pinned 16px from the sides and the bottom */
  /* 366/687 is a MINIMUM: on narrower phones the two heads of copy grow taller
     than the ratio box, so the panels sit in one grid cell (crossfade intact)
     and the stage grows to the tallest panel — copy never rides under the tabs */
  /* (not aspect-ratio: with the stage's overflow:hidden it never grows to its
     content, so the 366/687 floor is a min-height off the container width) */
  .ep-features { container-type: inline-size; }
  .ep-feat-stage { aspect-ratio: auto; min-height: calc(100cqw * 687 / 366); display: grid; }
  .ep-feat-panel {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 96px var(--spacing-step-6) var(--spacing-step-6); /* tabs end at 72 + 24 clearance; 16px sides + bottom */
  }
  /* per-panel crop keeps each person in frame (set inline from the template);
     panel 1 is Figma's own photo, cropped at 609.8/943.45 = 64.6% */
  .ep-feat-panel { background-position: var(--panel-pos-m, 64.6%) center; }
  .ep-feat-panel::before { height: 18.92%; } /* 130/687 */
  /* the same 559×789 ellipse at -133/147, now on a 366-wide panel */
  .ep-feat-panel::after {
    background: radial-gradient(201.09% 123.87% at 39.89% 78.75%, var(--feat-scrim-stops));
  }
  .ep-feat-tabs {
    left: 0; right: 0; top: 24px;
    gap: var(--spacing-step-6); /* 16px */
    padding-inline: var(--spacing-step-6);
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ep-feat-tabs::-webkit-scrollbar { display: none; }
  .ep-feat-copy { position: relative; left: auto; bottom: auto; width: auto; }

  /* accolades: title → list */
  .ep-work { flex-direction: column; }
  .ep-work-intro { padding-block: 0; }
  .ep-work-list { flex: none; padding: 0; margin-top: var(--spacing-step-8); }

  .ep-band {
    gap: var(--spacing-step-8);
    background-image: var(--ep-band-bg-mobile, url("../img/ep-band-mobile.jpg"));
  }

  /* kit: copy, then the render as a full-bleed block */
  .ep-kit { flex-direction: column; align-items: stretch; min-height: 0; background: none; }
  .ep-kit-copy { width: 100%; gap: var(--spacing-step-8); padding-block: var(--spacing-step-10) 0; }
  .ep-kit-title { max-width: none; }
  .ep-kit-visual {
    display: block;
    width: var(--ep-bleed);
    margin-inline: calc((100% - var(--ep-bleed)) / 2);
    aspect-ratio: 1260 / 884;
    margin-top: var(--spacing-step-6);
    background: var(--ep-kit-bg-mobile, url("../img/ep-kit-mobile.jpg")) center / cover no-repeat;
  }

  .ep-data-head { text-align: left; align-items: flex-start; }
  .ep-data-row { flex-direction: column; }
  .ep-data-badge p { white-space: normal; }
  /* « …conforme à la loi 25 » on one line on phones: tighter row, label
     re-pointed at the DS p3 step (token, not a px size) */
  .ep-data-badge {
    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);
  }

  /* testimonials: the shared component's own ≤1023 block handles the stack */

  .ep-more { flex-direction: column; padding-top: var(--spacing-step-10); padding-bottom: var(--spacing-step-10); }
  .ep-more-head { flex: none; }
  .ep-more-cards { width: 100%; }
  .ep-more-cards .card-product { width: 100%; }

  .ep-cta {
    min-height: 775px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-step-8);
    background-image: var(--ep-cta-bg-mobile, url("../img/acto-cta-mobile.jpg"));
  }
}