/* ============================================================
   MDS — Home page layer ([mds_home])
   Import order: variables.css → components.css → templates.css
   → mds-templates.css → this file.
   Layout + color only — all typography via DS classes in markup.
   Desktop frame 3839-36605 (1920) · mobile frame 5424-28527 (414).
   ============================================================ */

[class^="home-"],
[class*=" home-"] { box-sizing: border-box; }

.home-in {
  width: calc(100% - 2 * var(--section-gutter)); /* 1420 cap, gutters below it */
  max-width: var(--section-container);
  margin-inline: auto;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.home-pad { padding-block: var(--spacing-step-11); } /* 64px */

/* shared icon slot */
.home-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-ico svg { display: block; width: 100%; height: 100%; }

/* viewfinder corner brackets (Vector 20-23 in Figma, 24px arms) */
.home-brackets { position: relative; }
.home-brackets > .c {
  position: absolute;
  width: 24px;
  height: 24px;
  color: var(--site-accent);
  pointer-events: none;
}
.home-brackets > .c svg { width: 100%; height: 100%; display: block; }
.home-brackets > .tr { top: 0; right: 0; transform: rotate(90deg); }
.home-brackets > .br { bottom: 0; right: 0; transform: rotate(180deg); }
.home-brackets > .bl { bottom: 0; left: 0; transform: rotate(-90deg); }
.home-brackets > .tl { top: 0; left: 0; }

/* ============================================================
   1. Hero (4614-44696 / 5424-28530) — ONE background covering the
   whole band: the flattened Figma still, with an optional video
   layered over it edge to edge. No video uploaded → the still is
   what shows. Copy sits on top of both.
   ============================================================ */
.home-hero {
  position: relative;
  aspect-ratio: 1920 / 1221;
  overflow: hidden;
  background: #f5f4f9 var(--home-hero-bg) top center / cover no-repeat;
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
/* 1px bleed: 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 */
.home-hero-video {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}
.home-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-step-10); /* 48px */
  padding-top: 68px;
  color: #000;
}
.home-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-step-6); /* 16px */
}
.home-hero-text .text-p2 { max-width: 992px; }

/* ============================================================
   2. Solutions phares (3839-36623) — 3 product cards between
   hairline separators, top rule on the row.
   ============================================================ */
.home-solutions-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  padding: var(--spacing-step-11) 0 var(--spacing-step-7); /* 64 / 24 */
  color: var(--neutrals-950);
}
.home-solutions-head p { max-width: 675px; color: var(--neutrals-950); }
.home-solutions-row {
  display: flex;
  border-top: 1px solid var(--neutrals-500);
  border-bottom: 1px solid var(--neutrals-500);
  border-right: 1px solid var(--neutrals-500);
  margin-bottom: var(--spacing-step-7);
}
/* inherits .card-product for the ghost-label hover reveal; the home grid
   draws separators instead of the card's own border box */
.home-scard {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-left: 1px solid var(--neutrals-500);
  background: none;
}
.home-scard .card-ghost .btn-icon { width: 16px; height: 16px; }

/* ============================================================
   3. Pourquoi medO (3839-36645) — full-bleed glow band,
   intro + white CTA left, 6 accolades right.
   ============================================================ */
.home-why {
  background: var(--home-why-bg) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.home-why .home-in { display: flex; }
.home-why-intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-step-8);
  padding-block: var(--spacing-step-11); /* 64px */
}
.home-why-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.home-why-head p { max-width: 656px; }
.home-why-intro .btn-pill { align-self: flex-start; }
.home-why-list {
  width: 50%;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: var(--spacing-step-9) 0; /* 40px */
  display: flex;
  flex-direction: column;
}
.home-why-item {
  display: flex;
  gap: var(--spacing-step-4); /* 8px */
  padding: var(--spacing-step-7); /* 24px */
  border: 1px solid var(--overlay-light-20, rgba(255, 255, 255, 0.2));
}
.home-why-item + .home-why-item { margin-top: -1px; }
.home-why-item .home-ico { width: 28px; height: 28px; color: var(--neutrals-100-white); }
.home-why-body { display: flex; flex-direction: column; gap: var(--spacing-step-3); min-width: 0; }
.home-why-body .d { color: var(--overlay-light-80, rgba(255, 255, 255, 0.8)); }

/* ============================================================
   4. La confiance, endossée (3839-36722) — 3 gradient tiles.
   ============================================================ */
.home-certs-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  color: var(--neutrals-950);
}
.home-certs-head p { max-width: 656px; }
.home-certs-row {
  display: flex;
  gap: var(--spacing-step-7); /* 24px */
  margin-top: var(--spacing-step-10); /* 48px */
}
.home-cert {
  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-step-9); /* 8px */
  /* Figma: rgba washes of the site accents, no token */
  background: linear-gradient(1deg, rgba(0, 64, 151, 0.2) 7.55%, rgba(0, 106, 250, 0.2) 89.24%);
}
.home-cert-badge {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--neutrals-100-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-default);
}
.home-cert-badge svg { width: 35px; height: 35px; display: block; }
.home-cert-body { display: flex; flex-direction: column; gap: var(--spacing-step-3); min-width: 0; }
.home-cert-body .t { color: var(--neutrals-950); }
.home-cert-body .d { color: var(--neutrals-800); }

/* ============================================================
   5. medO en chiffres (3839-36755) — 4 stat cells, 2px accent rule.
   ============================================================ */
.home-stats-row {
  display: flex;
  gap: var(--spacing-step-7);
  margin-top: var(--spacing-step-10); /* 48px */
}
.home-stat {
  flex: 1 1 0;
  min-width: 0;
  min-height: 100px;
  padding-block: var(--spacing-step-7); /* 24px */
  border-bottom: 2px solid var(--primary-default);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
}

.home-stat-value { color: var(--primary-default); }
.home-stat-label { color: var(--neutrals-950); }

/* ============================================================
   6. medO alys grid (3839-36811) — 3x2 hairline grid,
   last cell = glow CTA.
   ============================================================ */
.home-alys-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  padding: var(--spacing-step-11) 0 var(--spacing-step-7);
  color: var(--neutrals-950);
}
.home-alys-head h2 { max-width: 723px; }
.home-alys-head p { max-width: 656px; }
.home-alys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--neutrals-400);
}
.home-acell {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-8) var(--spacing-step-7); /* 32 24 */
  border-right: 1px solid var(--neutrals-400);
}
.home-alys-grid > .home-acell:nth-child(3n) { border-right: 0; }
.home-alys-grid > .home-acell:nth-child(-n + 3) { border-bottom: 1px solid var(--neutrals-400); }
.home-acell .home-ico { width: 28px; height: 28px; color: var(--primary-default); }
.home-acell-body { display: flex; flex-direction: column; gap: var(--spacing-step-3); }
.home-acell-body .t { color: var(--neutrals-950); }
.home-acell-body .d { color: var(--neutrals-800); }
.home-acell-cta {
  justify-content: space-between;
  gap: var(--spacing-step-6);
  background: var(--primary-default) var(--home-glow-bg) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.home-acell-cta .t { max-width: 400px; }
.home-acell-cta .btn-pill { align-self: flex-start; }

/* ============================================================
   7. Testimonials (5147-19112) — DS .testimonials; same tuning
   as the à-propos page (scrollable tab strip, full-bleed photo).
   ============================================================ */
.home-testi-title { color: var(--neutrals-950); margin: 0 0 var(--spacing-step-8); }
/* The carousel is the shared `.testimonials` component (components.css), used
   unmodified — only the section heading above lives here. */

/* ============================================================
   8. Clients marquee (3839-36875) — 3 vertical auto-scroll
   columns of logo tiles behind a soft fade mask.
   ============================================================ */
.home-clients { padding-block: var(--spacing-step-10); } /* 48px */
.home-clients .home-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-step-10);
}
.home-clients-title { color: var(--neutrals-950); max-width: 650px; }
.home-clients-marquee {
  width: 544px;
  height: 450px;
  flex-shrink: 0;
  display: flex;
  gap: 23px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.home-clients-col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.home-clients-track {
  display: flex;
  flex-direction: column;
  gap: 23px;
  animation: home-marquee 40s linear infinite;
}
.home-clients-col:nth-child(2) .home-clients-track { animation-direction: reverse; animation-duration: 46s; }
.home-clients-col:nth-child(3) .home-clients-track { animation-duration: 52s; }
.home-clients-marquee:hover .home-clients-track { animation-play-state: paused; }
@keyframes home-marquee {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - 11.5px)); } /* one copy + its gap */
}
.home-client-card {
  height: 113px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 106, 250, 0.1); /* Figma 10% accent tint, no token */
  /* 24px corner brackets, same slice trick as .testimonial-tab */
  --bracket: var(--site-accent);
  background-image:
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket));
  background-position: left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-size: 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px, 24px 1px, 1px 24px;
  background-repeat: no-repeat;
}
.home-client-card img { max-width: 66%; max-height: 55%; display: block; }

/* ============================================================
   9. Pensé pour fonctionner ensemble (3839-36884) — glow band,
   orbit figure left (fixed 659px geometry, % inside a scalable
   box), copy + checklist right.
   ============================================================ */
.home-orbit {
  background: var(--home-orbit-bg) center / cover no-repeat;
  color: var(--neutrals-100-white);
}
.home-orbit .home-in { display: flex; align-items: center; }
.home-orbit-fig {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  min-height: 613px;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.home-orbit-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(659px, 96cqw);
  aspect-ratio: 1;
}
.home-orbit-ring {
  position: absolute;
  border: 1px solid rgba(204, 225, 254, 0.55);
  border-radius: 50%;
}
.home-orbit-ring.r1 { left: 25.26%; top: 25.26%; width: 49.49%; aspect-ratio: 1; }
.home-orbit-ring.r2 { left: 12.51%; top: 12.51%; width: 74.97%; aspect-ratio: 1; }
.home-orbit-hub {
  position: absolute;
  left: 38.72%;
  top: 38.6%;
  width: 22.59%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid #cce1fe;
  background: var(--primary-default) var(--home-glow-bg) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutrals-100-white);
}
.home-orbit-hub svg { width: 66%; height: auto; display: block; }
.home-orbit-sat {
  position: absolute;
  width: 8.53%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #cce1fe; /* Figma chip fill, no token */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-default);
}
.home-orbit-sat svg { width: 66%; height: 66%; display: block; }
.home-orbit-sat.s1 { left: 28.21%; top: 28.9%; width: 8.65%; }
.home-orbit-sat.s2 { left: 70.42%; top: 41.52%; }
.home-orbit-sat.s3 { left: 36.86%; top: 68.26%; }
.home-orbit-sat.s4 { left: 9.9%; top: 54.95%; }
.home-orbit-sat.s5 { left: 71.67%; top: 72.47%; }
.home-orbit-sat.s6 { left: 63.25%; top: 12.17%; }
.home-orbit-copy {
  width: 48.24%; /* 685/1420 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6);
  padding: var(--spacing-step-11) var(--spacing-step-10); /* 64 48 */
}
.home-orbit-copy h2 { max-width: 558px; }
.home-orbit-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-4);
  margin-top: var(--spacing-step-6);
}
.home-orbit-checks li { display: flex; align-items: center; gap: var(--spacing-step-4); }
.home-orbit-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--overlay-light-90, rgba(255, 255, 255, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-default);
}
.home-orbit-check svg { width: 11px; height: 11px; display: block; }

/* ============================================================
   10. Trois principes (4535-36191) — intro + blue CTA left,
   3 bordered accolades right.
   ============================================================ */
.home-principles .home-in { display: flex; align-items: stretch; }
.home-principles-intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-step-8);
  padding: var(--spacing-step-11) var(--spacing-step-7); /* 64 24 */
  color: var(--neutrals-950);
}
.home-principles-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.home-principles-intro .btn-pill { align-self: flex-start; }
.home-principles-list {
  width: 50%;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: var(--spacing-step-9) 0;
  display: flex;
  flex-direction: column;
}
.home-principle {
  display: flex;
  gap: var(--spacing-step-4);
  padding: var(--spacing-step-7);
  border: 1px solid var(--neutrals-400);
}
.home-principle + .home-principle { margin-top: -1px; }
.home-principle .home-ico { width: 28px; height: 28px; color: var(--primary-default); }
.home-principle-body { display: flex; flex-direction: column; gap: var(--spacing-step-3); min-width: 0; }
.home-principle-body .t { color: var(--neutrals-950); }
.home-principle-body .d { color: var(--neutrals-800); }

/* ============================================================
   11. Vos données, protégées (4535-36295) — flattened panel art
   left, copy + bracketed rows right.
   ============================================================ */
.home-data { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-step-10); }
.home-data-visual {
  width: 33.83%; /* 480/1420 */
  flex-shrink: 0;
  aspect-ratio: 480 / 392.5;
  background: var(--home-data-bg) center / cover no-repeat;
}
.home-data-copy {
  width: 46.62%; /* 662/1420 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-8); /* 32px */
}
.home-data-head { display: flex; flex-direction: column; gap: var(--spacing-step-6); color: var(--neutrals-950); }
.home-data-head p { max-width: 580px; }
.home-data-list { display: flex; flex-direction: column; gap: var(--spacing-step-6); }
.home-data-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-step-7);
  padding: 14px var(--spacing-step-7);
  background: rgba(0, 106, 250, 0.1); /* Figma 10% accent tint, no token */
}
.home-data-row .home-ico { width: 31px; height: 31px; color: var(--primary-default); }
.home-data-row .t { color: var(--neutrals-950); }

/* ============================================================
   12. CTA (3839-36970) — DS .section-cta; Home widens the title.
   Same content-box trap as the alys page: min-height 494 + 96px
   padding renders 590 without border-box.
   ============================================================ */
.home-cta .section-cta { box-sizing: border-box; padding: var(--spacing-step-10) var(--spacing-step-7); }
.home-cta .section-cta-text { gap: var(--spacing-step-6); }
.home-cta .section-cta-title { max-width: 687px; }

/* ════════════════ mobile ≤1023 (frame 5424-28527) ════════════════ */
@media (max-width: 1023px) {
  /* « …conforme à la loi 25 » on one line on phones: tighter row, label
     re-pointed at the DS p3 step (token, not a px size) */
  .home-data-row {
    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);
  }
  .home-in { width: 88.406%; } /* 366/414 */
  .home-pad { padding-block: var(--spacing-step-10); } /* 48px */

  /* hero — own art / video cut for the whole band (Figma 5424-28530) */
  .home-hero {
    aspect-ratio: auto;
    min-height: 616px;
    background-image: var(--home-hero-bg-mobile, var(--home-hero-bg));
    background-position: bottom center;
  }
  .home-hero-copy { padding-top: var(--spacing-step-11); gap: var(--spacing-step-8); }

  /* solutions — stacked cards inside one hairline frame */
  .home-solutions-head { padding-block: var(--spacing-step-10) var(--spacing-step-7); }
  .home-solutions-row { flex-direction: column; border: 1px solid var(--neutrals-500); border-radius: var(--radius-step-9); }
  .home-scard { border-left: 0; }
  .home-scard + .home-scard { border-top: 1px solid var(--neutrals-500); }

  /* pourquoi — own flattened art, intro, button, then the list */
  .home-why { background-image: var(--home-why-bg-mobile, var(--home-why-bg)); }
  .home-why .home-in { flex-direction: column; }
  .home-why-intro { padding-block: var(--spacing-step-10) 0; gap: var(--spacing-step-7); }
  .home-why-list { width: 100%; padding-block: var(--spacing-step-7) var(--spacing-step-10); }

  /* certs — icon left of the copy */
  .home-certs-row { flex-direction: column; gap: var(--spacing-step-6); margin-top: var(--spacing-step-8); }
  .home-cert { flex-direction: row; align-items: center; gap: var(--spacing-step-7); padding: var(--spacing-step-6); }

  /* stats — 2x2 */
  .home-stats-row { flex-wrap: wrap; gap: 30px; margin-top: var(--spacing-step-8); }
  .home-stat { flex: 1 1 40%; min-height: 122px; padding-block: 0 var(--spacing-step-6); }

  /* alys grid — single column */
  .home-alys-head { padding-block: var(--spacing-step-10) var(--spacing-step-7); }
  .home-alys-grid { grid-template-columns: 1fr; }
  .home-acell { border-right: 0; border-bottom: 1px solid var(--neutrals-400); padding: var(--spacing-step-6); }
  .home-alys-grid > .home-acell:last-child { border-bottom: 0; }
  .home-acell-cta { min-height: 216px; padding: var(--spacing-step-8) var(--spacing-step-7); }

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

  /* clients — full-width marquee under the title */
  .home-clients .home-in { flex-direction: column; align-items: stretch; gap: var(--spacing-step-8); }
  .home-clients-marquee { width: 100%; height: 302px; }
  .home-client-card { height: 98px; }

  /* orbit — own flattened art, copy first, figure below (markup is desktop order) */
  .home-orbit { background-image: var(--home-orbit-bg-mobile, var(--home-orbit-bg)); }
  .home-orbit .home-in { flex-direction: column; align-items: stretch; }
  .home-orbit-copy { order: 1; width: 100%; padding: var(--spacing-step-10) 0 0; }
  .home-orbit-fig { order: 2; min-height: 380px; }

  /* principles */
  .home-principles .home-in { flex-direction: column; }
  .home-principles-intro { padding: var(--spacing-step-10) 0 0; gap: var(--spacing-step-7); }
  .home-principles-list { width: 100%; padding-block: var(--spacing-step-7) var(--spacing-step-10); }

  /* CTA — taller band, texture pinned to the bottom (Figma 5424-28922) */
  .home-cta .section-cta { min-height: 775px; justify-content: flex-start; gap: var(--spacing-step-8); }
  .home-cta .section-cta > .btn-pill { align-self: flex-start; }
  .home-cta .section-cta-texture { top: auto; bottom: 0; transform: translate(-50%, 0); width: 160%; }

  /* données — copy first, panel art below (markup is desktop order) */
  .home-data { flex-direction: column; align-items: stretch; }
  .home-data-copy { order: 1; width: 100%; }
  .home-data-visual { order: 2; }
  .home-data-visual {
    width: 100%;
    aspect-ratio: 366 / 299;
    background-image: var(--home-data-bg-mobile, var(--home-data-bg));
  }
}