/* ============================================================
   medO IA clinique sofia — page styles  (MDS Templates plugin)
   Extracted from the QA preview; Figma 6457-16404 (desktop 1920).
   No mobile frame exists: the ≤1023 layer follows the espace patient
   mobile patterns (the carousel = Figma mobile component 5118-46808).
   Forked from mds-espace-patient.css — same section shapes.

   Loaded only on posts that contain the [mds_sofia] 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.
   ============================================================ */
.sofia-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^="sofia-"], [class*=" sofia-"] { box-sizing: border-box; }

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

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

/* ============================================================
   1. Hero (6457-16407) — one flattened background: office photo,
   masked brand gradient, glow, both summary cards and the doctor
   cut-out baked into a single JPEG (text faded out for the export).
   ============================================================ */
.sofia-hero {
  display: flex;
  align-items: center;
  min-height: 568px;
  /* 70%: below 1920 the crop eats the left fade first and keeps the doctor */
  background: var(--sofia-hero-bg, url("../img/sofia-hero.jpg")) 70% center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.sofia-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;
}
.sofia-hero-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); } /* 16px */
/* Figma sets the hero line in Inter Medium 18/28 (a stray font); the DS p2
   in the markup stands in for it */
.sofia-hero-copy { margin-top: -14px; } /* Figma centres the copy 7px above the middle */

/* ============================================================
   2. Une assistante clinique, en tout temps (6457-16569)
   Photo = one flattened export (6457-16571), text + checklist live.
   ============================================================ */
.sofia-split { display: flex; align-items: center; justify-content: space-between; padding-block: var(--spacing-step-11); }
.sofia-split-media {
  flex: 0 0 46.62%; /* 662/1420 */
  border-radius: var(--radius-7md); /* 16px */
  overflow: hidden;
}
.sofia-split-media img { display: block; width: 100%; height: auto; aspect-ratio: 662 / 541; object-fit: cover; }
.sofia-split-content { width: 46.62%; display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.sofia-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 */
.sofia-split .check-list { gap: var(--spacing-step-4); }
.sofia-split .check-list li { font-size: inherit; line-height: inherit; }
.sofia-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 6458-36633, 4 variants)
   CSS-only: 4 radios drive the tab chrome and the panels together.
   Same rig as acto — tabs on top; 2 or 3 heads per panel, each panel
   with its own copy width (--panel-w) and scrim centre (--scrim-at).
   ============================================================ */
.sofia-features { display: flex; flex-direction: column; gap: var(--spacing-step-10); }
.sofia-features-title { color: var(--neutrals-950); max-width: 50.77%; } /* 721/1420 */
.sofia-feat { position: relative; }
.sofia-feat > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.sofia-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);
}
.sofia-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 */
.sofia-feat-panel::before,
.sofia-feat-panel::after { content: ""; position: absolute; pointer-events: none; }
.sofia-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%);
}
.sofia-feat-panel::after {
  inset: 0;
  /* the Figma blob is 559x789 at -133/147 in a 1420x745 panel, blurred
     (panel 2 moves it to -102/87 → --scrim-at: 12.5% 64.63%) */
  background: radial-gradient(51.83% 114.23% at var(--scrim-at, 10.28% 72.62%), var(--feat-scrim-stops));
}
.sofia-feat-copy {
  position: absolute;
  left: 1.83%;   /* 26/1420 */
  bottom: 6.71%; /* 50/745 */
  width: var(--panel-w, 32.25%); /* 458/1420; panels 2-4: 541 / 475 / 482 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--panel-gap, 29px); /* Figma text block → button, no token; panel 2 packs 3 heads at 24 */
  color: var(--neutrals-100-white);
}
.sofia-feat-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.sofia-feat-desc { color: var(--opacity-light-90); }
.sofia-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;
}
.sofia-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;
}
.sofia-feat-tab:hover { background: var(--opacity-light-30); }
.sofia-feat-tab .sofia-ico { width: 24px; height: 24px; }
/* the blue progress fill sweeps left→right under the label */
.sofia-feat-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary-default);
}
.sofia-feat-tab > :not(.sofia-feat-fill) { position: relative; z-index: 1; }

/* ── autoplay: 4 slides × 3s, looping (same rig as acto) ── */
@keyframes sofia-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 sofia-fill-1 { 0%      { width: 0; } 25%  { width: 100%; } 100% { width: 100%; } }
@keyframes sofia-fill-2 { 0%, 25% { width: 0; } 50%  { width: 100%; } 100% { width: 100%; } }
@keyframes sofia-fill-3 { 0%, 50% { width: 0; } 75%  { width: 100%; } 100% { width: 100%; } }
@keyframes sofia-fill-4 { 0%, 75% { width: 0; } 100% { width: 100%; } }

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

/* hovering anywhere in the block freezes the rotation */
.sofia-feat:hover .sofia-feat-panel,
.sofia-feat:hover .sofia-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) */
.sofia-feat:has(> input:checked) .sofia-feat-panel,
.sofia-feat:has(> input:checked) .sofia-feat-fill { animation: none; }
.sofia-feat:has(> input:checked) .sofia-feat-panel { opacity: 0; visibility: hidden; }
.sofia-feat:has(> input:checked) .sofia-feat-fill { width: 0; }
.sofia-feat:has(> input:nth-of-type(1):checked) .sofia-feat-tab:nth-of-type(1) .sofia-feat-fill,
.sofia-feat:has(> input:nth-of-type(2):checked) .sofia-feat-tab:nth-of-type(2) .sofia-feat-fill,
.sofia-feat:has(> input:nth-of-type(3):checked) .sofia-feat-tab:nth-of-type(3) .sofia-feat-fill,
.sofia-feat:has(> input:nth-of-type(4):checked) .sofia-feat-tab:nth-of-type(4) .sofia-feat-fill { width: 100%; }
.sofia-feat:has(> input:nth-of-type(1):checked) .sofia-feat-panel:nth-of-type(1),
.sofia-feat:has(> input:nth-of-type(2):checked) .sofia-feat-panel:nth-of-type(2),
.sofia-feat:has(> input:nth-of-type(3):checked) .sofia-feat-panel:nth-of-type(3),
.sofia-feat:has(> input:nth-of-type(4):checked) .sofia-feat-panel:nth-of-type(4) { opacity: 1; visibility: visible; }

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

/* ============================================================
   4. Ce que vous y gagnez, au quotidien (6457-16614)
   ============================================================ */
.sofia-work { display: flex; align-items: stretch; }
.sofia-work-intro {
  flex: 1 1 0;
  min-width: 0;
  padding-block: var(--spacing-step-10); /* 48px */
  color: var(--neutrals-950);
}
.sofia-work-intro h2 { max-width: 664px; }
.sofia-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;
}
.sofia-work-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-7);
  border: 1px solid var(--neutrals-400);
}
.sofia-work-item + .sofia-work-item { margin-top: -1px; }
.sofia-work-item .sofia-ico { width: 28px; height: 28px; color: var(--primary-default); }
.sofia-work-body { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-step-3); }
.sofia-work-body .t { color: var(--neutrals-950); }
.sofia-work-body .d { color: var(--neutrals-800); }

/* ============================================================
   5. Two-column CTA band (6457-17122, and again as the closing CTA
   6457-17838) — the acto CTA art (same gradient + Ofys colour-burn
   texture, same crop), two centred columns split by a 40% white rule.
   Columns stretch to the taller one: text on top, buttons share a line.
   ============================================================ */
.sofia-duo {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 68px; /* Figma, no token */
  min-height: 494px;
  padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
  background: var(--sofia-duo-bg, url("../img/acto-cta.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.sofia-duo-col {
  flex: 0 1 608px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-10); /* 48px floor between copy and button */
  padding-block: 57px; /* centres the 284px Figma block in the 398px content box */
}
/* Figma: the text block is left-packed (items-start) with centred lines, so the
   570px description sits 19px left of the 608px title's axis */
.sofia-duo-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-step-6); width: 100%; text-align: center; }
.sofia-duo-text h2 { width: 100%; }
.sofia-duo-text p { max-width: 570px; }
.sofia-duo-rule { flex: none; width: 1px; margin-block: 57px; background: var(--opacity-light-40); }

/* ============================================================
   6. Intégrée au cœur d'alys (6457-16685)
   The whole 1420×487 box is one export (white field + render +
   white fade + the three labels); the copy sits on its white left side.
   ============================================================ */
.sofia-kit {
  display: flex;
  align-items: center;
  min-height: 487px;
  background: var(--sofia-kit-bg, url("../img/sofia-kit.jpg")) right center / cover no-repeat;
}
.sofia-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);
}
.sofia-kit-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.sofia-kit-title { max-width: 558px; }
.sofia-kit-head p,
.sofia-kit-list { color: var(--neutrals-800); }
.sofia-kit-list { margin: 0; padding-left: 27px; list-style: disc; } /* Figma ms-27 */
/* mobile-only: the illustration as its own full-bleed block under the copy */
.sofia-kit-visual { display: none; }

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

.sofia-data { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-10); }
.sofia-data-head { display: flex; flex-direction: column; gap: var(--spacing-step-4); text-align: center; max-width: 1007px; color: var(--neutrals-950); }
.sofia-data-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); width: 100%; }
.sofia-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 */
}
.sofia-data-badge .sofia-ico { width: 31px; height: 31px; color: var(--primary-default); }
.sofia-data-badge p { margin: 0; color: var(--neutrals-950); white-space: nowrap; }

/* ============================================================
   8. Testimonials (6457-16707, set 6457-17591) — shared .testimonials;
   this set labels its tabs with the slide titles
   ============================================================ */
.sofia-trust-title { color: var(--neutrals-950); }
.sofia-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 */
.sofia-testi .testimonial-photo { aspect-ratio: 485 / 369.33; }
.sofia-testi .testimonial-photo img { height: 100%; object-fit: cover; }
/* the logos ship as Figma's whole 64×53 thumbnail tile, so the image fills the
   box; the shared rule leaves the <img> at its natural width and crops anything
   wider than 64px */
.sofia-testi .testimonial-logo img { width: 100%; height: 100%; object-fit: contain; }
/* this page packs the two tabs left instead of spreading them */
.sofia-testi .testimonial-tabs { justify-content: flex-start; }

/* ============================================================
   9. Une autre fonction clé du DMÉ medO alys (6457-17802)
   ============================================================ */
.sofia-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 */
.sofia-more-head { flex: 0 0 36.76%; color: var(--neutrals-950); } /* 522/1420 */
.sofia-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 */
.sofia-more-cards .card-product { box-sizing: border-box; width: 49.54%; } /* 433/874 */
.sofia-more-cards .card-ghost .btn-icon { width: 16px; height: 16px; }

/* 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) {
  .sofia-in { width: 92%; }
  .sofia-br-d { display: none; } /* Figma's hard breaks only hold at the 1420 measure */
  .sofia-feat-copy { width: 50%; }
  /* the four long tab labels outgrow the stage below ~1300: let the row scroll */
  .sofia-feat-tabs { left: 0; right: 0; padding-inline: var(--spacing-step-7); overflow-x: auto; scrollbar-width: none; }
  .sofia-feat-tabs::-webkit-scrollbar { display: none; }
  /* three heads of copy need ~760px: 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) */
  .sofia-features { container-type: inline-size; }
  .sofia-feat-stage { aspect-ratio: auto; height: max(760px, calc(100cqw * 745 / 1420)); }
  /* the render would slide under the copy: let the white field win */
  .sofia-kit { background-size: auto 100%; background-position: 100% center; }
  .sofia-kit-copy { width: 46%; }
  .sofia-data-badge { gap: var(--spacing-step-6); padding-inline: var(--spacing-step-6); }
  .sofia-data-badge p { white-space: normal; }
  .sofia-duo { gap: var(--spacing-step-10); }
}

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

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

  /* hero: Figma's own mobile art (6994-35169, 414×750) — brand gradient
     over the doctor + plan-card photo in the bottom half */
  .sofia-hero {
    min-height: 750px; /* the Figma mobile frame */
    align-items: flex-start;
    background: var(--sofia-hero-bg-mobile, url("../img/sofia-hero-mobile.jpg")) center bottom / cover no-repeat;
  }
  .sofia-hero .sofia-in { padding-top: var(--spacing-step-10); }
  .sofia-hero-copy { width: 100%; min-width: 0; gap: var(--spacing-step-8); margin-top: 0; }

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

  .sofia-features { gap: var(--spacing-step-7); }
  .sofia-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) */
  .sofia-features { container-type: inline-size; }
  .sofia-feat-stage { aspect-ratio: auto; min-height: calc(100cqw * 687 / 366); display: grid; }
  .sofia-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) */
  .sofia-feat-panel { background-position: var(--panel-pos-m, 64.6%) center; }
  .sofia-feat-panel::before { height: 18.92%; } /* 130/687 */
  /* the same 559×789 ellipse at -133/147, now on a 366-wide panel. A panel
     whose copy runs taller than the ellipse reaches (panel 2 stacks three
     heads, over a bright document) adds --scrim-extra-m, a full-width linear
     layer under its upper copy, set inline from the template */
  .sofia-feat-panel::after {
    background:
      var(--scrim-extra-m, linear-gradient(transparent, transparent)),
      radial-gradient(201.09% 123.87% at 39.89% 78.75%, var(--feat-scrim-stops));
  }
  .sofia-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;
  }
  .sofia-feat-tabs::-webkit-scrollbar { display: none; }
  .sofia-feat-copy { position: relative; left: auto; bottom: auto; width: auto; }

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

  /* duo band = Figma mobile 6994-35208 (366×775): its own art (gradient runs
     bottom→top, Ofys texture in the lower 525px), one left-aligned stack —
     copy → button 34px, block → rule → block 34px, the rule 260px wide */
  .sofia-duo {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* top-aligned from 48px; spare height stays at the bottom */
    gap: 34px; /* Figma, no token */
    min-height: 775px;
    padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
    background-image: var(--sofia-duo-bg-mobile, url("../img/sofia-duo-mobile.jpg"));
  }
  .sofia-duo-col { flex: none; width: 100%; padding-block: 0; align-items: flex-start; justify-content: flex-start; gap: 34px; }
  .sofia-duo-text { text-align: left; }
  .sofia-duo-text p { max-width: none; }
  .sofia-duo-rule { width: 260px; max-width: 100%; height: 1px; margin-block: 0; }

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

  .sofia-data-head { text-align: left; align-items: flex-start; }
  .sofia-data-row { flex-direction: column; }
  .sofia-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) */
  .sofia-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 */

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