/* Cas clients : sobriété, typographie et palette du site. */
.ep-case-link { margin: 26px 0 0; }
.ep-case-link a { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; }
.oi-case-section { max-width: 1160px; margin: 42px auto 68px; padding: 0 24px; }
.oi-case-heading { max-width: 810px; margin-bottom: 28px; }
.oi-case-heading h2 { margin: 8px 0 14px; font-size: clamp(28px,3vw,42px); line-height: 1.17; color: var(--page-text); }
.oi-case-heading>p:last-child { color: var(--body); line-height: 1.7; }
.oi-case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.oi-case-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); padding: clamp(20px,3vw,34px); display:flex;flex-direction:column;gap:16px;min-width:0; }
.oi-case-card h3 { color: var(--navy); font-size: clamp(23px,2.4vw,30px); line-height:1.2;margin:0; }
.oi-case-card p { margin:0; color:var(--body);line-height:1.65; }
.oi-case-card .oi-case-eyebrow { color:#35608a; font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.oi-case-stages { display:flex;flex-wrap:wrap;gap:7px; }
.oi-case-stages span { background:#edf3f9;color:#28496f;border-radius:4px;padding:6px 9px;font-size:12px;font-weight:650; }
.oi-case-result { border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:grid;gap:5px; }
.oi-case-result span { color:var(--body);font-size:13px; }
.oi-case-result strong { color:var(--navy);font-size:clamp(32px,3vw,42px);letter-spacing:-.035em; }
.oi-case-result small { color:var(--body);line-height:1.55;font-size:13px; }
.oi-case-card .oi-case-limit { padding:10px 12px;background:#f6f8fb;border-left:3px solid #a5b6ce; }
.oi-case-link { color:var(--blue);display:inline-flex;min-height:44px;align-items:center;width:fit-content;text-decoration:underline;text-underline-offset:4px;font-weight:750;margin-top:auto; }
.oi-case-link:focus-visible,.ep-case-link a:focus-visible { outline:3px solid #6c9ed5;outline-offset:3px; }
.oi-case-disclaimer,.oi-case-transition { color:var(--body);line-height:1.65; }
.oi-case-disclaimer { margin-top:20px;font-size:13px; }
.oi-case-transition { max-width:1160px;padding:0 24px;margin:24px auto;font-weight:650; }
.oi-case-teaser-inner { max-width:830px;margin:0 auto; }
.oi-case-teaser h2 { margin:10px 0 12px;font-size:clamp(26px,3vw,38px);line-height:1.2;color:var(--page-text); }
.oi-case-teaser p:not(.offer-kicker) { max-width:710px;line-height:1.7;color:var(--body); }
@media(max-width:760px){.oi-case-grid{grid-template-columns:1fr}.oi-case-section{margin:24px auto 56px;padding:0 20px}.oi-case-card{padding:22px}.oi-case-transition{padding:0 20px}}
html.dark .oi-case-card { background:#111f32;border-color:#2a405a; }
html.dark .oi-case-card h3,html.dark .oi-case-result strong { color:#e2edfb; }
html.dark .oi-case-card p,html.dark .oi-case-heading>p:last-child,html.dark .oi-case-result span,html.dark .oi-case-result small,html.dark .oi-case-disclaimer,html.dark .oi-case-transition,html.dark .oi-case-teaser p:not(.offer-kicker) { color:#b4c4d8; }
html.dark .oi-case-card .oi-case-eyebrow,html.dark .oi-case-link { color:#b6d3fb; }
html.dark .oi-case-stages span { color:#c2d7f1;background:#263b55; }
html.dark .oi-case-result { border-color:#2a405a; }
html.dark .oi-case-card .oi-case-limit { background:#192c44;border-color:#708fac; }

.oi-case-contrast { display: grid; gap: 10px; padding: 12px 14px; background: #f5f8fb; border-radius: 6px; }
.oi-case-card .oi-case-contrast p { font-size: 14px; line-height: 1.5; }
.oi-case-card .oi-case-contrast strong { color: #1b416e; }
html.dark .oi-case-contrast { background: #1b2c41; }
html.dark .oi-case-card .oi-case-contrast strong { color: #d7e5f7; }


/* Mobile-first proof review, 4 novembre 2026.
   Keep the homepage a short selection; full cases live on /avant-apres/. */
@media (max-width: 600px) {
  body.home-epure .ep-dream {
    padding-top: 48px;
    padding-bottom: 52px;
  }

  body.home-epure .ep-dream .ep-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
  }

  body.home-epure .ep-dream .ep-tiles > .ep-tile,
  body.home-epure .ep-dream .ep-tiles > .ep-tile-wide {
    grid-column: auto;
    min-width: 0;
    padding: 18px;
    border-radius: 10px;
  }

  body.home-epure .ep-dream .ep-tiles > li:nth-child(n + 4) {
    display: none;
  }

  body.home-epure .ep-dream .ep-tiles .ep-tile b,
  body.home-epure .ep-dream .ep-tiles .ep-tile-wide b {
    font-size: clamp(20px, 5.6vw, 23px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
  }

  body.home-epure .ep-dream .ep-tiles .ep-tile p {
    margin: 8px 0 10px;
    font-size: 14px;
    line-height: 1.48;
  }

  body.home-epure .ep-dream .ep-tiles .ep-tile small {
    font-size: 12px;
    line-height: 1.4;
  }

  body.home-epure .ep-case-link {
    margin-top: 18px;
  }
}

/* Native disclosures: compact exploration with full, accessible content. */
.oi-example-details {
  min-width: 0;
}

.oi-example-details > summary,
.oi-case-more > summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  padding: 12px 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oi-example-details > summary:focus-visible,
.oi-case-more > summary:focus-visible {
  outline: 3px solid #6c9ed5;
  outline-offset: 3px;
}

.oi-example-details[open] > summary {
  margin-bottom: 10px;
}

.oi-example-details .before-after-grid {
  margin-top: 8px;
}

.oi-case-more {
  min-width: 0;
}

.oi-case-more-inner {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

.oi-case-card .oi-case-more-inner p {
  overflow-wrap: break-word;
}

html.dark .oi-example-details > summary,
html.dark .oi-case-more > summary {
  color: #b6d3fb;
}

@media (max-width: 760px) {
  .oi-case-card,
  .oi-case-heading,
  .oi-case-result {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .oi-case-result strong {
    font-size: clamp(26px, 7vw, 36px);
    overflow-wrap: anywhere;
  }

  .oi-case-card {
    gap: 12px;
  }

  .oi-case-contrast {
    padding: 12px;
  }

  .oi-case-stages {
    gap: 6px;
  }

  .oi-case-stages span {
    padding: 5px 8px;
    font-size: 11px;
  }

  .oi-case-section {
    scroll-margin-top: 76px;
  }

  .oi-case-transition {
    scroll-margin-top: 76px;
  }

  .offer-page .before-after-example {
    padding-block: 16px;
  }
}