/* ============================================================
   medO — Intégrations et certifications ("mint-") — page styles
   Figma: 5152-32278 (desktop 1920) / 5152-32669 (mobile 414)

   Typography always comes from the DS classes in the markup
   (.h2/.h4/.h5, .text-p1–.text-p4 + .fw-*). The rules below carry
   layout, colour and documented deviations only.
   ============================================================ */
body { background: var(--neutrals-100-white); }
.mint-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[class^="mint-"], [class*=" mint-"] { box-sizing: border-box; }

/* 1420 content container, sized as a % of the 1920 design width and centred */
.mint-in {
  width: calc(100% - 2 * var(--section-gutter)); /* 1420 cap, gutters below it */
  max-width: var(--section-container);
  margin-inline: auto;
}
.mint-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mint-ico svg { display: block; width: 100%; height: 100%; }

/* corner brackets — same 4-corner pattern shipped on alys/à propos */
.mint-brackets { position: relative; }
.mint-brackets > .c { position: absolute; width: 24px; height: 24px; pointer-events: none; color: var(--primary-default); }
.mint-brackets > .c svg { width: 100%; height: 100%; display: block; }
.mint-brackets > .tl { top: 0; left: 0; }
.mint-brackets > .tr { top: 0; right: 0; transform: rotate(90deg); }
.mint-brackets > .br { bottom: 0; right: 0; transform: rotate(180deg); }
.mint-brackets > .bl { bottom: 0; left: 0; transform: rotate(270deg); }

/* ============================================================
   1. Hero (5152-32281) — one flattened export (photo + baked
   blue wash, mint-hero.jpg); text stays live. Figma puts the
   copy column at x=247, 3px off the 250 grid — we keep the grid.
   --mint-hero-bg(-m) are set inline per-instance by the template
   (absolute URLs), same pattern as the à propos hero.
   ============================================================ */
.mint-hero {
  position: relative; /* hosts the optional video layer */
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 568px;
  background: var(--site-accent) var(--mint-hero-bg, url("../img/mint-hero.jpg")) center / cover no-repeat;
  border-bottom: 1px solid var(--neutrals-500);
  color: var(--neutrals-100-white);
}
.mint-hero > .mint-in { position: relative; } /* copy paints above the video layer */
.mint-hero-copy { display: flex; flex-direction: column; gap: var(--spacing-step-6); max-width: 677px; }
.mint-hero-head { display: flex; flex-direction: column; gap: var(--spacing-step-3); }

/* Optional ACF video: sits behind the copy, the flattened image stays as poster
   + fallback. The video frame has no wash baked in, so .mint-hero-wash repaints
   the exact Figma overlay (linear #004097→#006afa masked by an alpha ramp — the
   same math the flattened JPEGs were baked with). */
.mint-hero-media { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* the video bleeds 1px past its box: a <video> composites over a black backing,
   and at fractional layout sizes the scaled frame rounds short of the box edge,
   leaking that backing as a 1px black seam — the bleed keeps the edge cropped */
.mint-hero-media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 4px); object-fit: cover; }
.mint-hero-wash {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 62.76%; /* Figma paints the gradient over a 1205px div at 1920 */
  background: linear-gradient(149.69deg, var(--site-accent-dark), var(--site-accent));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 98.42%); /* fade ends at 1185.96/1205 */
  mask-image: linear-gradient(90deg, #000 0%, transparent 98.42%);
}

/* ============================================================
   2. Certifications (5152-32293) — light gradient-tint cards
   (rgba tints of the site accents, no matching token)
   ============================================================ */
.mint-certs { display: flex; flex-direction: column; gap: var(--spacing-step-8); padding-block: var(--spacing-step-10); }
.mint-certs-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.mint-certs-grid { display: flex; align-items: stretch; gap: var(--spacing-step-7); }
.mint-cert-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7);
  border-radius: var(--radius-3sm);
  background: linear-gradient(0.83deg, rgb(0 64 151 / 0.2) 7.55%, rgb(0 106 250 / 0.2) 89.24%);
}
.mint-cert-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--neutrals-100-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-default);
}
.mint-cert-badge svg { display: block; height: 35px; width: auto; }
.mint-cert-body { display: flex; flex-direction: column; gap: 6px; } /* Figma 6px, no token */
.mint-cert-body .t { color: var(--neutrals-950); }
.mint-cert-body .d { color: var(--neutrals-800); }

/* ============================================================
   3. Vos données, protégées (5152-32339) — same trust-badge row
   already shipped on medO alys and à propos
   ============================================================ */
.mint-trust { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-10); padding-block: var(--spacing-step-11); }
.mint-trust-head { display: flex; flex-direction: column; gap: var(--spacing-step-4); text-align: center; max-width: 1007px; color: var(--neutrals-950); }
.mint-trust-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); width: 100%; }
.mint-trust-badge {
  position: relative;
  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 of the site accent, not a token */
}
.mint-trust-badge .mint-ico { width: 31px; height: 31px; color: var(--primary-default); }
.mint-trust-badge p { color: var(--neutrals-950); } /* no nowrap — single line at 1920, wraps at tablet widths */

/* ============================================================
   4. Les intégrations de medO alys (5152-32376) — one bracketed
   tint box, 3 list columns with gradient headings
   ============================================================ */
.mint-integ { display: flex; flex-direction: column; gap: var(--spacing-step-8); padding-block: var(--spacing-step-11); }
.mint-integ-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.mint-integ-box { padding: var(--spacing-step-8); background: rgb(0 106 250 / 0.1); }
.mint-integ-grid { display: flex; align-items: flex-start; gap: var(--spacing-step-7); }
.mint-integ-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-step-7); }
.mint-integ-col:last-child { flex: 0 1 318px; } /* Figma fixed 318px column */
.mint-integ-col-title {
  background: linear-gradient(0deg, var(--site-accent-dark) 7.55%, var(--site-accent) 89.24%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 76px;
}
.mint-integ-list {
  margin: 0;
  padding-left: 30px; /* Figma bullet indent */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7);
  color: var(--neutrals-950);
  list-style: disc;
}
.mint-integ-note { display: block; } /* un-bulleted sub-line under a list item */
.mint-integ-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mint-integ-link:hover { color: var(--primary-default); }

/* ============================================================
   5. CTA band (5152-32639) — same flattened gradient + colour-burn
   "1 Ofys" band the acto page ships (acto-cta.jpg / -mobile.jpg,
   the exact 1420×494 and 366×775 bakes of this node)
   ============================================================ */
.mint-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 494px;
  padding: var(--spacing-step-10) var(--spacing-step-7); /* 48px 24px */
  background: var(--site-accent) var(--mint-cta-bg, url("../img/acto-cta.jpg")) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.mint-cta-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.mint-cta-title { max-width: 663px; }
.mint-cta-desc { max-width: 580px; }
.mint-cta > .btn-pill { align-self: flex-end; }

/* 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: keep three columns but let the fixed Facturation column flex */
@media (max-width: 1439px) and (min-width: 1024px) {
  .mint-integ-col:last-child { flex: 1 1 0; }
}
/* narrow tablet: the 32px column headings no longer fit three-up — stack them */
@media (max-width: 1279px) and (min-width: 1024px) {
  .mint-integ-grid { flex-direction: column; align-items: stretch; }
  .mint-integ-col:last-child { flex: 1 1 auto; }
}

/* ============================================================
   Mobile (Figma 414 frame; chrome switches at 1023px)
   ============================================================ */
@media (max-width: 1023px) {

.mint-integ-col-title {
  min-height: unset;
}

  .mint-in { width: 88.406%; } /* 366/414 */

  /* hero — own flattened export; copy top-aligned, wash runs top→bottom */
  .mint-hero {
    align-items: flex-start;
    min-height: 620px;
    padding-block: var(--spacing-step-10);
    background: var(--site-accent) var(--mint-hero-bg-m, url("../img/mint-hero-mobile.jpg")) top center / cover no-repeat;
  }
  .mint-hero-copy { max-width: none; }
  /* the mobile Figma wash is the same painted rect rotated 90°: colours run at
     235.61deg, the alpha ramp fades top→bottom over 750px (121% of the 620 band) */
  .mint-hero-wash {
    width: 100%;
    height: 120.97%;
    bottom: auto;
    background: linear-gradient(235.61deg, var(--site-accent-dark), var(--site-accent));
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  }

  /* certifications — stacked cards, icon beside the text */
  .mint-certs { gap: var(--spacing-step-7); }
  .mint-certs-grid { flex-direction: column; }
  .mint-cert-card { flex-direction: row; align-items: flex-start; }

  /* trust — left-aligned head, stacked badges, tighter padding (Figma 14/16) */
  .mint-trust { gap: var(--spacing-step-8); padding-block: var(--spacing-step-10); }
  .mint-trust-head { text-align: left; }
  .mint-trust-row { flex-direction: column; gap: var(--spacing-step-5); }
  /* label re-pointed at the DS p3 step so « …conforme à la loi 25 » holds one line on phones */
  .mint-trust-badge {
    padding: 14px;
    gap: var(--spacing-step-5);
    --typography-size-p2: var(--typography-size-p3);
    --typography-line-height-p2: var(--typography-line-height-p3);
  }

  /* intégrations — single column */
  .mint-integ { padding-block: var(--spacing-step-10); }
  .mint-integ-box { padding: var(--spacing-step-8) var(--spacing-step-7); }
  .mint-integ-grid { flex-direction: column; align-items: stretch; }
  .mint-integ-col:last-child { flex: 1 1 auto; }
  .mint-integ-list { gap: var(--spacing-step-5); } /* Figma mobile tightens rows to 16 */

  /* CTA — the mobile bake is the full 366×775 band, gradient included */
  .mint-cta {
    justify-content: flex-start;
    gap: 34px; /* Figma 34px, no token */
    min-height: 775px;
    background-image: var(--mint-cta-bg-m, url("../img/acto-cta-mobile.jpg"));
  }
  .mint-cta > .btn-pill { align-self: flex-start; }
}