/* ============================================================
   medO acto — page styles  (MDS Templates plugin)
   Extracted from the QA preview; Figma 3839-34721 (desktop 1920)
   / 5438-38664 (mobile 414).

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

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

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

/* ============================================================
   1. Hero (3839-34724) — single flattened background: the Figma
   photo + dashboard mock + masked gradient rebuilt into one JPEG
   (alpha ramp measured off the Figma render).
   ============================================================ */
.acto-hero {
  display: flex;
  align-items: center;
  min-height: 568px;
  background: var(--acto-hero-bg, url("../img/acto-hero.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.acto-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;
}
.acto-hero-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.acto-hero-head { display: flex; flex-direction: column; gap: var(--spacing-step-4); } /* kicker → title, 8px */
.acto-hero-text h1 { white-space: nowrap; } /* Figma hard-breaks the title on 2 lines */
.acto-hero-text p { max-width: 677px; }

/* ============================================================
   2. La facturation médicale, c'est du sérieux (3839-34942)
   Art = one flattened export (3839-34944), text + checklist live.
   ============================================================ */
.acto-serieux { display: flex; align-items: center; justify-content: space-between; padding-block: var(--spacing-step-11); }
.acto-serieux-media {
  flex: 0 0 46.62%; /* 662/1420 */
  border-radius: var(--radius-7md); /* 16px */
  overflow: hidden;
}
.acto-serieux-media img { display: block; width: 100%; height: auto; aspect-ratio: 662 / 541; object-fit: cover; }
.acto-serieux-content { width: 46.62%; display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.acto-serieux-title { max-width: 585px; }
/* 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 */
.acto-serieux .check-list { gap: var(--spacing-step-4); }
.acto-serieux .check-list li { font-size: inherit; line-height: inherit; }
.acto-serieux .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 2573-6388, 4 variants)
   CSS-only: 4 radios drive the tab chrome and the panels together.
   ============================================================ */
.acto-features { display: flex; flex-direction: column; gap: var(--spacing-step-10); }
.acto-features-title { color: var(--neutrals-950); max-width: 50.77%; } /* 721/1420 */
.acto-feat { position: relative; }
.acto-feat > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.acto-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);
}
.acto-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 */
.acto-feat-panel::before,
.acto-feat-panel::after { content: ""; position: absolute; pointer-events: none; }
.acto-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%);
}
.acto-feat-panel::after {
  inset: 0;
  /* the Figma blob is 736x851 centred at 146/541 in a 1420x745 panel */
  background: radial-gradient(51.83% 114.23% at 10.28% 72.62%, var(--feat-scrim-stops));
}
.acto-feat-copy {
  position: absolute;
  left: 1.83%;   /* 26/1420 */
  bottom: 6.71%; /* 50/745 */
  width: var(--panel-w, 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);
}
.acto-feat-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.acto-feat-desc { color: var(--opacity-light-90); }
.acto-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;
}
.acto-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;
}
.acto-feat-tab:hover { background: var(--opacity-light-30); }
.acto-feat-tab .acto-ico { width: 24px; height: 24px; }
/* the blue progress fill sweeps left→right under the label */
.acto-feat-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary-default);
}
.acto-feat-tab > :not(.acto-feat-fill) { position: relative; z-index: 1; }

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

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

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

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

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

/* ============================================================
   4. Votre facturation, sous contrôle (3839-34986)
   ============================================================ */
.acto-ctrl { display: flex; align-items: stretch; }
.acto-ctrl-intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: var(--spacing-step-10); /* 48px */
  color: var(--neutrals-950);
}
.acto-ctrl-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.acto-ctrl-head p { color: var(--neutrals-800); }
.acto-ctrl-list {
  flex: 0 0 50%; /* 710/1420 */
  list-style: none;
  margin: 0;
  padding: var(--spacing-step-9) 0; /* 40px */
  display: flex;
  flex-direction: column;
}
.acto-ctrl-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-7);
  border: 1px solid var(--neutrals-400);
}
.acto-ctrl-item + .acto-ctrl-item { margin-top: -1px; }
.acto-ctrl-item .acto-ico { width: 28px; height: 28px; }
.acto-ctrl-body { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-step-3); }
.acto-ctrl-body .t { color: var(--neutrals-950); }
.acto-ctrl-body .d { color: var(--neutrals-800); }

/* ============================================================
   5. Le logiciel ou le service medO acto (5430-30825) — heading
   + blue duo band, centre art = one flattened export on the blue
   ============================================================ */
.acto-duo-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  margin-bottom: var(--spacing-step-8); /* 32px */
  color: var(--neutrals-950);
}
.acto-duo-head h2 { max-width: 710px; }
.acto-duo-head p { max-width: 656px; color: var(--neutrals-800); }
.acto-duo {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 376px;
  padding: var(--spacing-step-10); /* 48px */
  overflow: hidden;
  /* one full-band background image, no colour underneath — the template sets
     --acto-duo-art from the ACF image (falls back to the bundled export) */
  background: var(--acto-duo-art, url("../img/acto-band-art.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
/* the art lives in the background image on desktop; the element only exists
   for the mobile flow (spacer that reserves the illustration area) */
.acto-duo-art { display: none; }
.acto-duo-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 239px;
  width: 27.54%; /* 391/1420 */
}
.acto-duo-text { display: flex; flex-direction: column; gap: var(--spacing-step-4); }

/* ============================================================
   6. Prêt à facturer mieux ? (5430-30860)
   ============================================================ */
.acto-pret { display: flex; align-items: center; justify-content: space-between; padding-block: var(--spacing-step-11); }
.acto-pret-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-step-8); width: 46.62%; color: var(--neutrals-950); }
.acto-pret-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.acto-pret-head p { max-width: 580px; }
.acto-pret-art { width: 26.45%; } /* 375.66/1420 */
.acto-pret-art img { display: block; width: 100%; height: auto; }

/* ============================================================
   7. Facturez avec une longueur d'avance (5430-30922)
   ============================================================ */
.acto-avance { display: flex; align-items: center; justify-content: space-between; }
.acto-avance-media {
  flex: 0 0 39.72%; /* 564/1420 */
  border-radius: var(--radius-4md); /* 8px */
  overflow: hidden;
}
.acto-avance-media img { display: block; width: 100%; height: auto; aspect-ratio: 564 / 393; object-fit: cover; }
.acto-avance-content { width: 46.62%; display: flex; flex-direction: column; gap: var(--spacing-step-8); color: var(--neutrals-950); }
.acto-avance-head { display: flex; flex-direction: column; gap: var(--spacing-step-8); }
.acto-avance-actions { display: flex; gap: var(--spacing-step-7); align-items: center; flex-wrap: wrap; }

/* ============================================================
   8. Testimonials (5430-38085)
   ============================================================ */
.acto-trust-title { color: var(--neutrals-950); }
.acto-testi-wrap { display: flex; flex-direction: column; gap: var(--spacing-step-8); } /* title y64 → card y146 */
/* The carousel itself is the shared `.testimonials` component (components.css).
   Page art-direction only: the shared illustration export is square, and the
   Figma box is 485×369.33 (318×242 on mobile) — a centre crop. */
.acto-testi .testimonial-photo { aspect-ratio: 485 / 369.33; }
.acto-testi .testimonial-photo img { height: 100%; object-fit: cover; }
/* this page packs the four tabs left instead of spreading them (acto only) */
.acto-testi .testimonial-tabs { justify-content: flex-start; }

/* ============================================================
   9. Coup d'œil sur nos solutions phares (5430-38144)
   ============================================================ */
/* Figma 49/64, no 49px spacing token */
.acto-solutions { display: flex; align-items: flex-start; gap: var(--spacing-step-6); }
.acto-solutions-head {
  flex: 0 0 36.76%; /* 522/1420 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  color: var(--neutrals-950);
}
.acto-solutions-cards { flex: 1 1 0; min-width: 0; display: flex; gap: var(--spacing-step-6); }
.acto-solutions-cards .card-product { flex: 1 1 0; min-width: 0; }
.acto-solutions-cards .card-ghost .btn-icon { width: 16px; height: 16px; }

/* ============================================================
   10. FAQ (5430-38222) — DS .accordion .accordion-md
   ============================================================ */
.acto-faq { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-step-8); }
.acto-faq-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); max-width: 50%; }
.acto-faq-head .h4 { color: var(--neutrals-950); }
.acto-faq-head p { color: var(--neutrals-800); }
.acto-faq-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); width: 100%; }
.acto-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 */
.acto-faq-items .accordion { border: 1px solid #8adcf6; } /* gradient/primary/light, no matching token */
.acto-faq-media {
  flex: 0 0 49.15%; /* 698/1420 */
  border-radius: var(--radius-7md);
  overflow: hidden;
  background: linear-gradient(178.12deg, var(--neutrals-400) 5.28%, var(--neutrals-500) 156.72%);
}
.acto-faq-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   11. Vos infos, protégées (5430-38392) — same band as à propos
   ============================================================ */
.acto-brackets { position: relative; }
.acto-brackets > .c { position: absolute; width: 24px; height: 24px; pointer-events: none; color: var(--primary-default); }
.acto-brackets > .c svg { width: 100%; height: 100%; display: block; }
.acto-brackets > .tl { top: 0; left: 0; }
.acto-brackets > .tr { top: 0; right: 0; transform: rotate(90deg); }
.acto-brackets > .br { bottom: 0; right: 0; transform: rotate(180deg); }
.acto-brackets > .bl { bottom: 0; left: 0; transform: rotate(270deg); }

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

/* ============================================================
   12. CTA (3839-35092) — flattened gradient + colour-burn texture
   ============================================================ */
.acto-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 425px;
  padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
  background: var(--acto-cta-bg, url("../img/acto-cta.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.acto-cta-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); width: 100%; }
.acto-cta-text .h3 { max-width: 625px; }
.acto-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; }

/* ============================================================
   Mobile — 5438-38664
   ============================================================ */
@media (max-width: 1023px) {
  .acto-in { width: 88.406%; } /* 366/414 */
  .acto-pad { padding-block: var(--spacing-step-10); } /* 48px */

  /* mobile hero has its own flattened background */
  .acto-hero {
    min-height: 750px;
    align-items: flex-start;
    background: var(--acto-hero-bg-mobile, url("../img/acto-hero-mobile.jpg")) center / cover no-repeat;
  }
  .acto-hero .acto-in { padding-top: var(--spacing-step-10); }
  .acto-hero-copy { width: 100%; min-width: 0; gap: var(--spacing-step-8); }
  .acto-hero-text h1 { white-space: normal; }

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

  .acto-features { gap: var(--spacing-step-7); }
  .acto-features-title { max-width: none; }
  .acto-feat-stage { aspect-ratio: 366 / 687; }
  .acto-feat-panel { background-position: 62% center; }
  .acto-feat-panel::before { height: 18.92%; } /* 130/687 */
  /* mobile keeps the very same ellipse, now on a 366-wide panel */
  .acto-feat-panel::after {
    background: radial-gradient(201.09% 123.87% at 39.89% 78.75%, var(--feat-scrim-stops));
  }
  .acto-feat-tabs {
    left: 0; right: 0; top: 24px;
    padding-inline: var(--spacing-step-6);
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .acto-feat-tabs::-webkit-scrollbar { display: none; }
  .acto-feat-tab { padding: 10px var(--spacing-step-6); }
  .acto-feat-copy { left: var(--spacing-step-6); right: var(--spacing-step-6); width: auto; bottom: var(--spacing-step-7); gap: var(--spacing-step-7); }

  /* accolades: head → button → list */
  .acto-ctrl { flex-direction: column; }
  .acto-ctrl-intro { padding-block: 0; gap: var(--spacing-step-7); }
  .acto-ctrl-list { flex: none; padding: 0; margin-top: var(--spacing-step-8); }
  .acto-ctrl-item { padding: var(--spacing-step-7) var(--spacing-step-7); }

  /* heading pt 32, then the band becomes an inset card: p 24/24/0, art inside */
  .acto-duo-head { padding-top: var(--spacing-step-8); margin-bottom: var(--spacing-step-8); gap: var(--spacing-step-4); }
  .acto-duo {
    flex-direction: column;
    min-height: 0;
    padding: var(--spacing-step-7) var(--spacing-step-7) 0;
    gap: 0;
    background-image: var(--acto-duo-art-mobile, url("../img/acto-band-art-mobile.jpg"));
    background-position: center bottom;
  }
  .acto-duo-col { width: 100%; min-height: 0; gap: var(--spacing-step-7); }
  .acto-duo-col + .acto-duo-col { margin-top: var(--spacing-step-10); } /* 48px between the two blocks */
  /* transparent spacer — the illustration is part of the card's bg image */
  .acto-duo-art {
    display: block;
    position: static;
    order: 3;
    width: 100%;
    margin-top: var(--spacing-step-7); /* 24px above the art */
    aspect-ratio: 318 / 287;
    background: none;
  }

  .acto-pret { flex-direction: column; align-items: flex-start; gap: var(--spacing-step-8); }
  .acto-pret-copy { width: 100%; }
  .acto-pret-art { width: 90.7%; } /* 375.66/414 */

  /* avance: title → image → text → buttons */
  .acto-avance { flex-direction: column; align-items: stretch; gap: 0; }
  .acto-avance-content { display: contents; }
  .acto-avance-head { display: contents; }
  .acto-avance-title { order: 1; }
  .acto-avance-media { order: 2; flex: none; margin-top: var(--spacing-step-6); }
  .acto-avance-text { order: 3; margin-top: var(--spacing-step-6); }
  .acto-avance-actions { order: 4; margin-top: var(--spacing-step-8); flex-direction: column; align-items: flex-start; }

  /* slide flow becomes: title → quote icon → quote → photo → source */
  /* testimonials: the shared component's own ≤1023 block handles the stack */

  .acto-solutions-pad { padding-top: var(--spacing-step-10); padding-bottom: var(--spacing-step-10); }
  .acto-solutions { flex-direction: column; }
  .acto-solutions-head { flex: none; }
  .acto-solutions-cards { flex-direction: column; width: 100%; }

  /* FAQ: photo above the accordions on mobile */
  .acto-faq-head { max-width: none; }
  .acto-faq-row { flex-direction: column; }
  .acto-faq-media { flex: none; order: -1; aspect-ratio: 366 / 291; }

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

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