/* ============================================================
   medO à propos — page styles
   Figma: 3839-36999 (desktop 1920) / 5109-33818 (mobile 414)

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

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

/* ============================================================
   1. Hero (3839-37002) — one flattened, ACF-editable background image for
   the whole section (no colour/gradient underneath — see apropos.php's
   `hero.image`/`hero.image_mobile`; --apropos-hero-bg(-mobile) are set
   inline per-instance by the template, same pattern as the CTA band below).
   ============================================================ */
.apropos-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--spacing-step-11);
  gap: var(--spacing-step-10);
  min-height: 796px;
  background: var(--apropos-hero-bg) center / cover no-repeat;
  color: var(--neutrals-100-white);
  text-align: center;
}
.apropos-hero-text { display: flex; flex-direction: column; gap: var(--spacing-step-6); align-items: center; }
.apropos-hero-text .h2 { max-width: 1043px; }
.apropos-hero-text p { max-width: 807px; }

/* ============================================================
   2. On se connaît déjà (3839-37022) — extends .section-split
   ============================================================ */
/* grid (not the shared .section-split flex) because the title sits above the
   paragraphs in the text column on desktop, but above the IMAGE on mobile —
   an ordering a single flex axis can't express, so each breakpoint gets its
   own grid-template-areas below. */
.apropos-connait {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media title" "media content";
  column-gap: var(--spacing-step-10);
  row-gap: var(--spacing-step-6);
  align-items: start;
}
.apropos-connait-title { grid-area: title; }
.apropos-connait .section-split-media {
  grid-area: media;
  border-radius: var(--radius-7md);
  background: linear-gradient(178deg, var(--neutrals-400) 5%, var(--neutrals-500) 100%);
}
.apropos-connait .section-split-media img { aspect-ratio: 686 / 475; height: auto; border-radius: inherit; }
.apropos-connait .section-split-content { grid-area: content; display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }

/* checklist — mobile-only content per Figma (no desktop equivalent) */
.apropos-connait-checklist { display: none; }
.apropos-connait-checklist .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. Un partenaire technologique (3839-37048) — extends .section-benefits
   Figma stacks the list LEFT / text RIGHT (opposite of the documented
   default), so the list is pulled in front with `order` on desktop only.
   ============================================================ */
.apropos-partner .benefit-list { flex: 0 0 50%; order: -1; }
.apropos-partner .benefit-icon { width: 28px; height: 28px; }
.apropos-partner .section-benefits-intro { color: var(--neutrals-950); padding: 48px 24px;}
.apropos-partner .section-benefits-intro p { max-width: 656px; }

/* ============================================================
   4. Avant, pendant, après (3839-37101) — ACF-editable background image
   (defaults to the shared glow-bg wash — see apropos.php's `band.image`).
   ============================================================ */
.apropos-band {
  position: relative;
  overflow: hidden;
  background: var(--apropos-band-bg) center / cover no-repeat;
  color: var(--neutrals-100-white);
  text-align: center;
}
.apropos-band-inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-8); }
.apropos-band-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); max-width: 826px; }
.apropos-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 37px; /* badge/connector rhythm is a fixed 198+37+154+37+198+37+154+37+198 cluster,
                centered in the container — not stretched full-width like a generic flex row */
  width: 100%;
}
.apropos-step { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-9); flex: 0 0 205px; }
.apropos-step-badge {
  display: flex;
  width: 198px; /* fixed in Figma — "avant"/"pendant"/"après" share one box size, not auto-sized per label */
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-step-4) var(--spacing-step-7);
  border-radius: var(--radius-step-5);
  background: var(--opacity-light-10, rgb(255 255 255 / 0.1));
  white-space: nowrap;
}
.apropos-step-badge.apropos-brackets > .c { color: var(--neutrals-100-white); }
.apropos-step-logo.on-dark { filter: brightness(0) invert(1); margin-bottom: 11px;}
.apropos-step-caption { text-align: center; }
.apropos-step-divider {
  flex: 0 0 154px;
  align-self: flex-start;
  margin-top: 22px;
  height: 1px;
  border: 0;
  /* CSS border-style:dashed can't hit Figma's exact 2px-dash/2px-gap gap at 70%
     white — a repeating-gradient reproduces the SVG stroke-dasharray precisely */
  background-image: repeating-linear-gradient(to right, rgb(255 255 255 / 0.7) 0 2px, transparent 2px 4px);
}

/* ============================================================
   5. Coup d'œil dans le rétroviseur (3839-37177)
   Accordion — only the founding year opens by default.
   ============================================================ */
.apropos-retro { display: flex; align-items: stretch; gap: var(--spacing-step-7); }
.apropos-retro-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-step-7); }
.apropos-retro-list { display: flex; flex-direction: column; }
.apropos-retro-row {
  padding-block: var(--spacing-step-7);
  border-bottom: 1px solid var(--neutrals-400);
}
.apropos-retro-row:last-child { border-bottom: 0; }
.apropos-retro-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-6);
  cursor: pointer;
  list-style: none;
  color: var(--neutrals-950);
}
.apropos-retro-year::-webkit-details-marker { display: none; }
.apropos-retro-row[open] > .apropos-retro-year span {
  background: linear-gradient(180deg, var(--site-accent-dark) 8%, var(--site-accent) 89%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.apropos-retro-chevron { display: none; } /* Figma's rows carry no open/close indicator — the whole row is still clickable */
.apropos-retro-desc { margin-top: var(--spacing-step-6); color: var(--neutrals-800); }
.apropos-retro-media {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-7md);
  background: linear-gradient(177deg, var(--neutrals-400) 5%, var(--neutrals-500) 100%);
}
.apropos-retro-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* on mobile the image sits between the 1994 row and the rest of the list
   (Figma), not beside the whole column — a second copy inline in the list
   markup, shown only <1024px, is simpler than fighting flex order for a
   mid-list position. */
.apropos-retro-media-m { display: none; }

/* ============================================================
   6. La confiance, ça se mérite (4202-13153 / 5147-18922)
   The carousel is the shared `.testimonials` component (components.css) and
   nothing else — no `.testimonial-*` rule may be declared here. 5147-18922 is
   a plain instance of 5147-17790, so anything page-specific is drift. Only the
   section wrapper (heading + carousel) belongs to this file.
   ============================================================ */
.apropos-testi-wrap { display: flex; flex-direction: column; gap: var(--spacing-step-10); }

/* ============================================================
   7. Quote band — "Notre objectif n'a jamais changé" (5107-19453)
   ACF-editable background image (defaults to the shared glow-bg wash —
   see apropos.php's `quote.image`; unrelated to `quote.photo`, the small
   headshot inset).
   ============================================================ */
.apropos-quote {
  position: relative;
  overflow: hidden;
  background: var(--apropos-quote-bg) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.apropos-quote-inner { display: flex; align-items: center; gap: var(--spacing-step-18); } /* 120px */
.apropos-quote-photo {
  flex-shrink: 0;
  width: 399px;
  max-width: 40%;
  aspect-ratio: 399 / 370.33;
  border-radius: var(--radius-3md);
  overflow: hidden;
  background: var(--neutrals-600);
}
.apropos-quote-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apropos-quote-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-step-10); }
.apropos-quote-icon { width: 38.5px; height: 33px; }
.apropos-quote-text { max-width: 723px; }
.apropos-quote-cite { font-style: normal; }

/* ============================================================
   8. Mieux faire. Mieux servir. Mieux soigner. (4109-10226)
   "Features Accolade" bracket cards, tinted-blue variant
   ============================================================ */
.apropos-mieux-grid { display: flex; align-items: stretch; gap: var(--spacing-step-6); }
.apropos-mieux-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7);
  background: rgb(0 106 250 / 0.1);
}
.apropos-mieux-card .apropos-ico { width: 45px; height: 45px; color: var(--primary-default); }
.apropos-mieux-card-body { display: flex; flex-direction: column; gap: var(--spacing-step-3); }
.apropos-mieux-card-body .t { color: var(--neutrals-950); }
.apropos-mieux-card-body .d { color: var(--neutrals-800); }
/* corner brackets — same 4-corner pattern reused across the tinted cards below */
.apropos-brackets { position: relative; }
.apropos-brackets > .c { position: absolute; width: 24px; height: 24px; pointer-events: none; color: var(--primary-default); }
.apropos-brackets > .c svg { width: 100%; height: 100%; display: block; }
/* base svg path draws a top-left corner (left edge + top edge) at 0deg */
.apropos-brackets > .tl { top: 0; left: 0; }
.apropos-brackets > .tr { top: 0; right: 0; transform: rotate(90deg); }
.apropos-brackets > .br { bottom: 0; right: 0; transform: rotate(180deg); }
.apropos-brackets > .bl { bottom: 0; left: 0; transform: rotate(270deg); }

/* ============================================================
   9. Vos infos, protégées (5147-18390) — reuses the "Vos données,
   protégées" pattern already shipped on medO alys
   ============================================================ */
.apropos-trust { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-step-10); }
.apropos-trust-head { display: flex; flex-direction: column; gap: var(--spacing-step-4); text-align: center; max-width: 1007px; color: var(--neutrals-950); }
.apropos-trust-row { display: flex; align-items: stretch; gap: var(--spacing-step-7); width: 100%; }
.apropos-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);
}
.apropos-trust-badge .apropos-ico { width: 31px; height: 31px; color: var(--primary-default); }
.apropos-trust-badge p { color: var(--neutrals-950); white-space: nowrap; }

/* ============================================================
   10. CTA band — "Faisons connaissance" (4109-10013)
   ============================================================ */
.apropos-cta {
  position: relative;
  overflow: hidden;
  color: var(--neutrals-100-white);
}
/* The art sits on the CONTAINER, not the section: at 1920 Figma draws this as a
   contained 1420 card — white 0–250, blue 250–1670, white 1670–1920 — so a
   full-bleed background was wrong by the two 250px gutters. Mobile is the
   opposite (see below) and puts it back on the section.
   Figma insets the card's own content by 48px on every side — on top of
   (not instead of) the 1420 container this section already centres via
   .apropos-in — so the grid carries that single 48px padding itself
   rather than reusing the generic .apropos-pad (64px) used elsewhere. */
.apropos-cta-grid {
  background: var(--primary-default) var(--apropos-cta-bg) center bottom / auto 100% no-repeat;
  min-height: 376px; /* Figma 4109-10013; the 277px columns + 2×48 give 373 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-8);
  padding: var(--spacing-step-10);
}
/* align-items, or the pill stretches to the column's full 391px — Figma sizes
   both buttons to their label (168 / 151) */
.apropos-cta-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--spacing-step-9); min-height: 277px; flex: 0 1 391px; }
.apropos-cta-col-text { display: flex; flex-direction: column; gap: var(--spacing-step-4); }
.apropos-cta-col p { max-width: 391px; }




.apropos-in .section-benefits {
  gap:0px;
}

.apropos-in .benefit-list {
  padding: 40px 0px;
}
/* ============================================================
   Responsive — 5109-33818 (mobile 414)
   ============================================================ */
@media (max-width: 1023px) {
  .apropos-in { width: 88.406%; } /* 366/414 */

  .apropos-hero {
    background-image: var(--apropos-hero-bg-mobile, var(--apropos-hero-bg));
    min-height: 750px;
    padding: var(--spacing-step-9) var(--spacing-step-7) var(--spacing-step-10);
    justify-content: flex-start;
  }
  .apropos-hero-text { gap: var(--spacing-step-8); }
  .apropos-hero-text br,
  .apropos-partner h2 br { display: none; } /* the desktop titles' manual breaks don't apply to the mobile natural wrap */

  .apropos-connait { grid-template-columns: 1fr; grid-template-areas: "title" "media" "content"; }
  .apropos-connait-checklist { display: block; padding-top: var(--spacing-step-8); }

  .apropos-partner { flex-direction: column; align-items: stretch; gap: var(--spacing-step-8); }
  .apropos-partner .benefit-list { order: 0; flex: 1 1 auto; }
  .apropos-partner .section-benefits-intro { order: -1; padding: 0px;}

  .apropos-band-inner { gap: var(--spacing-step-9); }
  .apropos-steps { flex-direction: column; gap: var(--spacing-step-6);align-items: center; } /* 16px — the dashed connector supplies the rest of the 85px rhythm itself */
  .apropos-step { flex: 1 1 auto; }
  .apropos-step-divider {
    flex: 0 0 53px;
    align-self: center;
    margin-top: 0;
    width: 1px;
    height: 53px;
    border: 0;
    background-image: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.9) 0 2.42px, transparent 2.42px 4.84px);
  }

  .apropos-retro { flex-direction: column; }
  .apropos-retro-media { display: none; }
  .apropos-retro-media-m { display: block; flex: none; width: 100%; aspect-ratio: 366 / 272; overflow: hidden; border-radius: var(--radius-7md); background: linear-gradient(177deg, var(--neutrals-400) 5%, var(--neutrals-500) 100%); } /* spacing from the title comes from .apropos-retro-col's own flex gap now that this sits directly after the <h2>, not mid-list */

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

  .apropos-quote-inner { flex-direction: column-reverse; align-items: stretch; gap: var(--spacing-step-9); } /* DOM has the photo first (desktop's left column) — Figma's mobile stack wants the quote text first, photo last */
  .apropos-quote-photo { width: 100%; max-width: none; align-self: center; }

  .apropos-mieux-grid { flex-direction: column; }

  .apropos-trust-row { flex-direction: column; }
  .apropos-trust-badge p { white-space: normal; }

  /* 5110-35230: at 414 the band runs edge to edge, so the art goes back on the
     section and the container keeps only the 88.406% inset for the copy */
  /* Figma stacks the art UNDER the copy here (5110-35241: 366×287 at y=491 of a
     778 band), it is not a wash behind the text — so it is bottom-anchored at
     container width instead of `cover`, which was covering the copy with a face. */
  .apropos-cta {
    background: var(--primary-default) var(--apropos-cta-bg-mobile, var(--apropos-cta-bg)) center bottom / 100% auto no-repeat;
    min-height: 778px;
  }
  .apropos-cta-grid {
    background: none;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-step-10) 0;
    gap: var(--spacing-step-8);
  }
  .apropos-cta-col,
  .apropos-cta-col:last-child { align-items: flex-start; text-align: left; min-height: 0; flex: none; }
  .apropos-cta-col:last-child .apropos-cta-col-text { align-items: flex-start; }
  .apropos-cta-col p { max-width: none; }
}