/* ============================================================
   medO alys — page styles  (MDS Templates plugin)
   Extracted from the QA preview; Figma 3839-33052 (desktop 1920)
   / 4012-31433 (mobile 414).

   Loaded only on posts that contain the [mds_alys] shortcode.
   Typography always comes from the DS classes in the markup
   (.h2/.h4/.h5/.h6, .text-p1-.text-p4 + .fw-*) - this file carries
   layout, colour and documented deviations only.
   ============================================================ */
.alys-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^="alys-"], [class*=" alys-"], .alys-cta-wrap .section-cta { box-sizing: border-box; }

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

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

/* Figma "Features Accolade" corner brackets, reused in 2 sections */
.alys-brackets { position: relative; }
.alys-brackets > .c {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.alys-brackets > .c svg { width: 100%; height: 100%; display: block; }
.alys-brackets > .tr { top: 0; right: 0; }
.alys-brackets > .br { bottom: 0; right: 0; transform: rotate(90deg); }
.alys-brackets > .bl { bottom: 0; left: 0; transform: rotate(180deg); }
.alys-brackets > .tl { top: 0; left: 0; transform: rotate(-90deg); }

/* ============================================================
   1. Hero (3977-24095) — single flattened background (3839-33055)
   ============================================================ */
.alys-hero {
  display: flex;
  align-items: center;
  min-height: 568px;
  /* the template sets --alys-hero-bg from the ACF image (falls back to the
     bundled Figma export), so uploads swap the art without touching CSS */
  background: var(--alys-hero-bg, url("../img/alys-hero.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.alys-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;
}
.alys-hero-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.alys-hero-text p { max-width: 653px; }

/* ============================================================
   2. L'allié de vos journées (3839-33293) — extends .section-split
   ============================================================ */
.alys-allie { gap: 6.76%; } /* 96/1420 */
.alys-allie .section-split-media {
  flex: 0 0 33.8%; /* 480/1420 */
  border-radius: 11.6px; /* Figma 11.601px, between --radius-3md and -4md */
  background: none;
}
.alys-allie .section-split-media img { aspect-ratio: 480 / 392.27; }
.alys-allie .section-split-content { gap: var(--spacing-step-6); }
/* 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 */
.alys-allie .check-list { gap: var(--spacing-step-4); }
.alys-allie .check-list li { font-size: inherit; line-height: inherit; }
/* v2 recolours the checkmark to --primary-default (v1 used --site-accent) */
.alys-allie .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 3839-45089)
   CSS-only: 6 radios drive the tab chrome and the panels together.
   ============================================================ */
.alys-features { display: flex; flex-direction: column; gap: var(--spacing-step-10); }
.alys-features-title { color: var(--neutrals-950); max-width: 61%; } /* 866/1420 */
.alys-feat { position: relative; }
.alys-feat > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.alys-feat-stage {
  position: relative;
  aspect-ratio: 1420 / 745;
  border-radius: var(--radius-7md); /* 16px */
  overflow: hidden;
  box-shadow: 0 var(--dropshadow-positioning-2xs) var(--dropshadow-blur-2xs-2) var(--opacity-dark-10);
}
.alys-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 */
.alys-feat-panel::before,
.alys-feat-panel::after { content: ""; position: absolute; pointer-events: none; }
.alys-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%);
}
.alys-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));
}
.alys-feat-copy {
  position: absolute;
  left: 1.83%;   /* 26/1420 */
  bottom: 6.71%; /* 50/745 */
  width: var(--panel-w, 37%);
  z-index: 1; /* above the ::after scrim, which paints last */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px; /* Figma text block → button, no token */
  color: var(--neutrals-100-white);
}
.alys-feat-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.alys-feat-desc { color: var(--opacity-light-90); }
.alys-feat-tabs {
  position: absolute;
  left: 1.83%;
  right: 1.83%;
  top: 3.22%; /* 24/745 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-step-4);
  z-index: 2;
}
.alys-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;
  transition: background-color 0.2s ease;
}
.alys-feat-tab:hover { background: var(--opacity-light-30); }
.alys-feat-tab { flex-shrink: 0; } /* keeps labels intact once the row scrolls */
.alys-feat-tab .alys-ico { width: 24px; height: 24px; }
/* the blue progress fill sweeps left→right under the label */
.alys-feat-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary-default);
}
.alys-feat-tab > :not(.alys-feat-fill) { position: relative; z-index: 1; }

/* ── autoplay: 6 slides × 2s, looping ──
   Each panel fades in for its slot; each tab fills over its own 2s and stays
   blue for the rest of the cycle, so played tabs read as done. Pure CSS —
   the panels share one keyframe set with a phase-shifted negative delay, and
   the fills need one set each because their "hold at 100%" length differs. */
@keyframes alys-panel {
  0%      { opacity: 0; visibility: hidden; }
  1%      { opacity: 1; visibility: visible; }
  16.667% { opacity: 1; visibility: visible; }
  19%     { opacity: 0; visibility: hidden; }
  100%    { opacity: 0; visibility: hidden; }
}
@keyframes alys-fill-1 { 0%          { width: 0; } 16.667% { width: 100%; } 100% { width: 100%; } }
@keyframes alys-fill-2 { 0%, 16.667% { width: 0; } 33.333% { width: 100%; } 100% { width: 100%; } }
@keyframes alys-fill-3 { 0%, 33.333% { width: 0; } 50%     { width: 100%; } 100% { width: 100%; } }
@keyframes alys-fill-4 { 0%, 50%     { width: 0; } 66.667% { width: 100%; } 100% { width: 100%; } }
@keyframes alys-fill-5 { 0%, 66.667% { width: 0; } 83.333% { width: 100%; } 100% { width: 100%; } }
@keyframes alys-fill-6 { 0%, 83.333% { width: 0; } 100%    { width: 100%; } }

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

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

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

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

/* ============================================================
   4. Un bon DMÉ doit travailler pour vous (3839-33338)
   ============================================================ */
.alys-work { display: flex; align-items: flex-start; }
.alys-work-intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  padding-block: var(--spacing-step-10); /* 48px */
  color: var(--neutrals-950);
}
.alys-work-intro p { max-width: 95.6%; } /* 656/686 */
.alys-work-list {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: var(--spacing-step-9) 0; /* 40px */
  display: flex;
  flex-direction: column;
}
.alys-work-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-7);
  border: 1px solid var(--neutrals-400);
}
.alys-work-item + .alys-work-item { margin-top: -1px; }
.alys-work-item .alys-ico { width: 28px; height: 28px; color: var(--primary-default); }
.alys-work-body { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-step-3); }
.alys-work-body .t { color: var(--neutrals-950); }
.alys-work-body .d { color: var(--neutrals-800); }

/* ============================================================
   5. Blue band (3839-33378) — 1420×306
   ============================================================ */
.alys-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 306px;
  padding: var(--spacing-step-8) var(--spacing-step-7); /* 32px 24px */
  overflow: hidden;
  background: var(--primary-default);
  color: var(--neutrals-100-white);
  text-align: center;
}
.alys-band-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 532px;
  height: 532px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #004097; /* Figma ellipse fill: 40% + 50px blur */
  opacity: 0.4;
  filter: blur(50px);
  pointer-events: none;
}
.alys-band > *:not(.alys-band-glow) { position: relative; }
.alys-band-text { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-4); }
.alys-band-title { max-width: 660px; }
.alys-band-desc { max-width: 464px; }
.alys-band-actions { display: flex; gap: var(--spacing-step-6); align-items: center; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   6. Votre DMÉ, tout équipé (3839-33387)
   ============================================================ */
.alys-kit { position: relative; display: flex; align-items: center; min-height: 574px; overflow: hidden; }
.alys-kit-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 65px; /* Figma, no token */
  width: 44.44%; /* 631/1420 */
  padding-block: var(--spacing-step-11);
}
.alys-kit-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.alys-kit-title { max-width: 73.85%; } /* 466/631 */
.alys-kit-visual {
  position: absolute;
  left: 33.73%; /* render box begins at 479/1420 */
  top: 0;
  width: 66.27%; /* 941/1420 */
  height: 100%;
  background: left top / cover no-repeat;
}

/* ============================================================
   6b. Deux fonctions clés du DMÉ alys (6587-35046 / mobile 6590-35106)
   Two "Features Accolade" cards with the 24px corner brackets; each
   visual is one flattened Figma export (photo + UI overlay + glow).
   ============================================================ */
.alys-duo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-8); /* 32px */
  padding-block: var(--spacing-step-11); /* 64px */
  color: var(--neutrals-950);
}
.alys-duo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-step-7); } /* 698 + 24 + 698 */
.alys-duo-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7);
  color: var(--neutrals-800);
}
.alys-duo-card > .c { color: var(--primary-default); }
.alys-duo-media { aspect-ratio: 650 / 381.378; background: center / cover no-repeat; }
.alys-duo-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; } /* Figma, no token */
.alys-duo-text { display: flex; flex-direction: column; gap: 21px; }

/* ============================================================
   7. Intégrations et certifications (5046-26225)
   One flattened background (5046-26226) behind live content.
   ============================================================ */
.alys-integr {
  background: url("../img/alys-integrations.jpg") center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.alys-integr-inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-12); } /* 80px */
.alys-integr-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); text-align: center; max-width: 58.2%; } /* 826/1420 */
/* The copy carries the two hard breaks the mobile frame sets. Above 1024 the
   head is 826px wide and wraps on its own, so the breaks are dropped there —
   done as min-width rather than display:inline in the mobile block, because
   display:inline on a <br> does not restore its line-breaking in Blink. */
@media (min-width: 1024px) {
  .alys-integr-head br { display: none; }
}

/* The diagram is a fixed-geometry illustration: at the 1420 design width its five
   labels + hub already fill the row, so every distance is expressed in cqw and the
   whole thing scales with the container instead of overflowing below 1920.
   Figma itself uses off-scale sizes here (19.341px), so the label type is clamped
   rather than taken from the DS scale — it would otherwise break the layout. */
.alys-diagram { position: relative; width: 100%; aspect-ratio: 1420 / 361; container-type: inline-size; }
.alys-node { position: absolute; display: flex; align-items: center; gap: 1.362cqw; } /* 19.341/1420 */
.alys-node-ico {
  width: 4.086cqw; /* 58/1420 */
  height: 4.086cqw;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  border: 1.2px solid var(--opacity-light-10);
  background: var(--opacity-light-30);
  color: var(--neutrals-100-white);
}
.alys-node-ico svg { width: 44%; height: 44%; }
/* Figma constrains each label so the subtitle wraps onto 2 lines */
.alys-node-txt { display: flex; flex-direction: column; gap: var(--spacing-step-3); width: 18.803cqw; } /* 267/1420 */
.alys-node-right .alys-node-txt { width: 19.789cqw; } /* 281/1420 */
/* a node with a link: the <a> takes over the node's row so the whole block is the hit area */
.alys-node-link { flex: 1 1 auto; display: flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; border-radius: 8px; }
/* Figma 5046-26282: a linked node's circle is white (glyphs that follow currentColor turn blue to stay visible) */
.alys-node-link .alys-node-ico { background: var(--neutrals-100-white); color: var(--primary-default); transition: box-shadow 0.2s ease; }
.alys-node-link:hover .alys-node-ico { box-shadow: 0 0 0 4px var(--opacity-light-30); }
/* the Voxira wave is a wide brand mark: 30.88 of the 58px circle in Figma */
.alys-ico-i-int-voxira svg { width: 53.22%; height: 53.22%; }
.alys-node-link:focus-visible { outline: 2px solid var(--neutrals-100-white); outline-offset: 4px; }
/* Desktop only: the labels have to shrink with the fixed-geometry diagram, so
   they leave the DS scale here. Below 1024 the diagram is a plain stack and the
   .text-p1 classes in the markup carry the type, as everywhere else. */
@media (min-width: 1024px) {
  .alys-node-txt > * { font-size: clamp(13px, 1.408cqw, 20px); line-height: 1.4; }
  .alys-node-txt > :last-child { font-size: clamp(13px, 1.362cqw, 19.34px); }
}
.alys-conn { position: absolute; color: var(--neutrals-100-white); opacity: 0.6;}
.alys-conn svg { width: 100%; height: 100%; display: block; min-height: unset; }
.alys-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.79cqw;  /* 139/1420 */
  height: 9.79cqw;
  min-width: 84px;
  min-height: 84px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.2px solid var(--opacity-light-10);
  background: var(--opacity-light-90);
}
.alys-hub img { width: 7.887cqw; min-width: 68px; height: auto; display: block; } /* 112/1420 */

.alys-cert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-7);
  width: 62.6%; /* 889/1420 */
  min-height: 132px;
  padding: 0 var(--spacing-step-11); /* Figma 61px → nearest 64px token */
  background: var(--opacity-light-20);
}
.alys-cert > .c { color: var(--neutrals-100-white); }
.alys-cert-l { display: flex; align-items: center; gap: var(--spacing-step-7); }
.alys-cert-txt { display: flex; flex-direction: column; gap: var(--spacing-step-3); }

/* ============================================================
   8. Testimonials (3839-33458)
   Nothing here: the section is the shared `.testimonials` component from
   components.css, unmodified. See its comment there before adding overrides.
   ============================================================ */

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

/* ============================================================
   10. Vos données, protégées (3842-48082)
   ============================================================ */
.alys-data { position: relative; display: flex; align-items: center; min-height: 364px; }
.alys-data-mark {
  position: absolute;
  left: 5.7%;  /* 81/1420 */
  top: 50%;
  transform: translateY(-50%);
  width: 26.45%; /* 375.665/1420 */
}
.alys-data-mark img { width: 100%; height: auto; display: block; }
.alys-data-copy {
  margin-left: auto;
  width: 46.62%; /* 662/1420 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-8);
  color: var(--neutrals-950);
}
.alys-data-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.alys-data-head p { max-width: 580px; }
.alys-data-list { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.alys-data-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-step-7);
  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 */
}
.alys-data-row > .c { color: var(--site-accent); }
.alys-data-row .alys-ico { width: 31px; height: 31px; color: var(--primary-default); }

/* ============================================================
   11. FAQ (3842-48216) — DS .accordion .accordion-md
   ============================================================ */
.alys-faq { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-step-8); }
.alys-faq-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); max-width: 50%; } /* 710/1420 */
.alys-faq-head .h4 { color: var(--neutrals-950); }
.alys-faq-head p { color: var(--neutrals-800); }
.alys-faq-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); width: 100%; }
.alys-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. A Figma
   stroke adds no layout size, so it is an inset shadow, not a border (a
   border made each row 62 instead of 60). */
.alys-faq-items .accordion { border: 0; box-shadow: inset 0 0 0 1px #8adcf6; } /* gradient/primary/light, no matching token */
/* answers are <p> paragraphs (same copy as the FAQ page): no outer margins,
   a blank line between paragraphs — the FAQ page's rhythm */
.alys-faq-items .accordion-body p { margin: 0; }
.alys-faq-items .accordion-body p + p { margin-top: var(--spacing-step-7); }
.alys-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%);
}
.alys-faq-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the big CTA keeps the Figma 48/24 padding and 65px stack gap */
.alys-cta-wrap .section-cta { padding: var(--spacing-step-10) var(--spacing-step-7); gap: 65px; }
.alys-cta-wrap .section-cta-text { gap: var(--spacing-step-6); }

/* 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 — 4012-31433
   ============================================================ */
@media (max-width: 1023px) {
  /* .alys-in keeps the 24px gutter; --alys-bleed widens a child back to the
     full device width and pulls half the difference off each side. The maths
     is the reciprocal of the container %, so the two cancel exactly — unlike
     100vw, which counts the scrollbar and would force a horizontal scroll. */
  .alys-in { width: 88.406%; --alys-bleed: calc(100% / 0.88406); } /* 366/414 */
  .alys-pad { padding-block: var(--spacing-step-10); } /* 48px */

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

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

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

  .alys-work { flex-direction: column; }
  .alys-work-intro { padding-block: 0; }
  .alys-work-intro p { max-width: none; }
  .alys-work-list { padding: 0; margin-top: var(--spacing-step-8); }
  .alys-work-item { padding: var(--spacing-step-6); }

  /* the band runs edge-to-edge on mobile; its own 24px padding keeps the copy
     lined up with the gutter the rest of the page uses */
  .alys-band {
    min-height: 430px;
    gap: var(--spacing-step-7);
    width: var(--alys-bleed);
    margin-inline: calc((100% - var(--alys-bleed)) / 2);
  }
  .alys-band-glow { width: 369px; height: 369px; }
  /* stacked pills share one width: a single max-content track sized by the
     wider button, both stretched to it (hover still trades padding for the
     34px margin, so the footprint holds); the pair stays centred like the
     band, icon + label left-aligned inside each pill */
  .alys-band-actions { display: grid; grid-template-columns: max-content; justify-content: center; }

  /* overflow:hidden only exists to clip the desktop absolute art — it would
     also clip the full-bleed visual below, so drop it here */
  .alys-kit { flex-direction: column; align-items: center; min-height: 0; overflow: visible; }
  .alys-kit-copy { width: 100%; gap: var(--spacing-step-8); padding-block: var(--spacing-step-10) 0; }
  .alys-kit-title { max-width: none; }
  /* its own 414×277 export (4012-31781): the desktop crop cut the labels off.
     !important beats the inline desktop background-image on the element. */
  .alys-kit-visual {
    position: static;
    width: var(--alys-bleed);
    margin-inline: calc((100% - var(--alys-bleed)) / 2);
    height: auto;
    aspect-ratio: 414 / 277.37;
    margin-top: var(--spacing-step-10); /* 48px */
    background-image: var(--alys-kit-bg-mobile, url("../img/alys-equipe-mobile.jpg")) !important;
    background-position: center;
  }

  /* deux fonctions clés — stacked cards, tighter text block (6 / 24) */
  .alys-duo { gap: var(--spacing-step-7); padding-block: var(--spacing-step-10); }
  .alys-duo-cards { grid-template-columns: 1fr; }
  .alys-duo-copy { gap: var(--spacing-step-7); }
  .alys-duo-text { gap: var(--spacing-step-3); }

  /* ── Intégrations et certifications, mobile (4041-58925) ──
     The 414 frame is 366 wide inside the gutter; the geometry below is read
     straight off that frame. Rows and label boxes are %-of-container so the
     block still holds together between 414 and 1023, and the two circles keep
     Figma's px because they are illustration. Type is left entirely to the DS
     classes in the markup, so the rows come out 78px rather than Figma's 86. */
  /* The mobile frame reuses the desktop art but windows it 655/3669 in from the
     left, where the deep navy corner of the gradient sits — centre/cover lands
     on the bright middle instead. Figma also upscales the 1800px JPG about 2x,
     which cover cannot match, so the gradient is close rather than identical. */
  .alys-integr { background-position: 23.5% center; }
  .alys-integr-inner { gap: var(--spacing-step-11); } /* 64px head → diagram → accolade */
  .alys-integr-head { max-width: none; }

  /* the diagram stacks: marcus + acto, the hub on its dashed stem, then the
     three partners — so the nodes are re-ordered around the hub, which sits
     last in the DOM because the desktop layout positions it absolutely */
  .alys-diagram {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-step-8); /* 32px between rows */
  }
  .alys-conn { display: none; } /* the five desktop curves; mobile draws a stem instead */
  .alys-node:nth-of-type(-n+2) { order: 1; }
  .alys-hub { order: 2; }
  .alys-node:nth-of-type(n+3) { order: 3; }

  .alys-node { position: static; width: 94.809%; gap: 19.341px; } /* 347/366 */
  /* Figma lets the two widest labels run past the row's right edge (358 of the
     366 container), so nothing may shrink — the overflow is the design */
  .alys-node-ico { flex: 0 0 58.022px; width: 58.022px; height: 58.022px; min-width: 0; min-height: 0; }
  .alys-node-txt {
    flex: 0 0 auto;
    gap: 0; /* Figma butts the two lines together, no gap between them */
    width: 76.945%; /* 267/347 */
  }
  .alys-node:nth-of-type(2) .alys-node-txt { width: 73.199%; } /* 254/347 */
  .alys-node:nth-of-type(3) .alys-node-txt { width: 77.706%; } /* 269.637/347 */
  .alys-node:nth-of-type(4) .alys-node-txt,
  .alys-node:nth-of-type(5) .alys-node-txt { width: 80.98%; } /* 281/347 */

  /* 33px of gap + a 53px dashed stem sit between a row and the hub; the 32px
     column gap covers the first 32, so the hub carries 54 of its own */
  .alys-hub {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 115px;
    height: 115px;
    min-width: 0;
    min-height: 0;
    margin-block: 54px;
    border-width: 1px;
  }
  .alys-hub img { width: 92.655px; min-width: 0; }
  .alys-hub::before,
  .alys-hub::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1.209px;
    height: 53px;
    margin-left: -0.6px;
    /* Figma stroke: white 90%, 2.42 on / 2.42 off */
    background: repeating-linear-gradient(180deg,
      rgb(255 255 255 / 0.9) 0 2.42px, rgb(255 255 255 / 0) 2.42px 4.84px);
  }
  .alys-hub::before { bottom: 100%; }
  .alys-hub::after { top: 100%; }
  /* Figma centres the lower group in a frame 15px taller than its rows, so the
     three partner rows carry 7.5px of slack above and below */
  .alys-node:nth-of-type(3) { margin-top: 7.489px; }
  .alys-node:nth-last-of-type(2) { margin-bottom: 7.489px; } /* last node; the hub is the final div */

  .alys-cert {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 35.978px;
    min-height: 0;
    /* 39 + 58.022 + 35.978 + 56 + 36 = the 225 card; Figma hangs the 318-wide
       label row 4px left of centre, which reads as 20 left / 28 right */
    padding: 39px 28px 36px 20px;
  }
  .alys-cert-l { width: 100%; }

  .alys-solutions { flex-direction: column; }
  .alys-solutions-head { flex: none; }
  .alys-solutions-cards { flex-direction: column; width: 100%; }

  .alys-data { flex-direction: column; align-items: stretch; min-height: 0; }
  .alys-data-mark { position: static; transform: none; width: 80%; margin: 0 auto var(--spacing-step-8); order:2; padding-top:24px}
  .alys-data-copy { width: 100%; margin-left: 0; }
  .alys-data-head p { max-width: none; }
  /* « …conforme à la loi 25 » on one line on phones: 12px gap, label
     re-pointed at the DS p3 step (token, not a px size) */
  .alys-data-row {
    padding: var(--spacing-step-5) 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);
  }

  .alys-faq-head { max-width: none; }
  .alys-faq-row { flex-direction: column; }
  .alys-faq-media { flex: none; aspect-ratio: 366 / 275; order: -1; }

  .alys-cta-wrap .section-cta { min-height: 775px; justify-content: flex-start; gap: var(--spacing-step-8); }
  .alys-cta-wrap .section-cta > .btn-pill { align-self: flex-start; }
  .alys-cta-wrap .section-cta-texture { top: auto; bottom: 0; transform: translate(-50%, 0); width: 160%; }
}

/* ── moved out of the preview's inline styles ───────────────────────────── */
/* "Coup d'œil sur nos solutions phares": Figma 49/64, no 49px spacing token */
.alys-solutions-pad { padding-top: 49px; padding-bottom: 64px; }
/* the testimonial band sits on white here, unlike the DS default */
.alys-trust-title { color: var(--neutrals-950); }
/* the DS leaves .testimonial-logo img at its natural size, so the wide
   Champlain logo (320×80) was cropped by the 64px tile; Figma fits it */
.alys-trust-title + .testimonials .testimonial-logo img { width: 100%; height: 100%; object-fit: contain; }