.solution-sales {
  --solution-accent: #9c6b40;
  --solution-ink: #24221f;
  --solution-paper: #f1eee7;
  color: var(--solution-ink);
  background: var(--solution-paper);
  font-family: Outfit, sans-serif;
}
.solution-sales-location-voiture { --solution-accent: #b88e3c; --solution-ink: #e9eeea; --solution-paper: #172021; }
.solution-sales-restaurant { --solution-accent: #a54632; --solution-ink: #38291f; --solution-paper: #f3ecdf; }
.solution-sales-commerce { --solution-accent: #a84632; --solution-ink: #22211f; --solution-paper: #f6f5f0; }
.solution-sales-entreprise { --solution-accent: #c9bd8a; --solution-ink: #e9efed; --solution-paper: #12313a; }
.solution-sales-professionnels { --solution-accent: #9a7856; --solution-ink: #36342f; --solution-paper: #f3f0e8; }
.solution-hero { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: 4vw; min-height: 670px; padding: 4rem 7vw 5rem; overflow: hidden; }
.solution-hero-copy { position: relative; z-index: 1; max-width: 700px; }
.solution-hero-copy > .eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 2.5rem; font-size: .66rem; letter-spacing: .13em; }
.solution-hero-copy > .eyebrow span { color: var(--solution-accent); }
.solution-kicker, .solution-index { margin-bottom: .9rem; color: var(--solution-accent); font-size: .64rem; font-weight: 600; letter-spacing: .15em; }
.solution-hero h1 { max-width: 13ch; margin: 0 0 1rem; font: 500 60px/1.02 "Space Grotesk", sans-serif; letter-spacing: 0; }
.solution-hero-intro { max-width: 49ch; color: color-mix(in srgb, var(--solution-ink) 68%, transparent); font-size: .95rem; line-height: 1.75; }
.solution-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.35rem; margin-top: 1.5rem; }
.solution-actions .btn { border-radius: 3px; }
.solution-actions .btn span { margin-left: .8rem; color: #e8c798; }
.solution-text-link { font-size: .77rem; text-decoration: underline; text-underline-offset: 5px; }
.solution-text-link span { margin-left: .5rem; color: var(--solution-accent); }
.solution-local-note { margin-top: 2.5rem; color: color-mix(in srgb, var(--solution-ink) 56%, transparent); font-size: .57rem; letter-spacing: .12em; }
.solution-local-note span { padding-inline: .35rem; color: var(--solution-accent); }
.solution-hero-image { position: relative; height: 520px; margin: 0; overflow: hidden; background: #d3cec3; }
.solution-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.solution-hero-image figcaption { position: absolute; right: 0; bottom: 1.2rem; padding: .75rem 1rem; color: #fff; background: #272521; font-size: .64rem; letter-spacing: .08em; }
.solution-scroll { position: absolute; right: 3vw; bottom: 2rem; display: flex; align-items: center; gap: .75rem; color: color-mix(in srgb, var(--solution-ink) 70%, transparent); font-size: .58rem; letter-spacing: .14em; }
.solution-scroll span { color: var(--solution-accent); font-size: 1rem; }
.solution-problem { display: grid; grid-template-columns: .65fr 1fr; gap: 5vw; padding: 4rem 10vw; color: #282520; background: #e9e4d9; }
.solution-problem > .solution-index { margin: .5rem 0; }
.solution-problem h2, .solution-approach h2, .solution-preview h2, .solution-included h2, .solution-process h2, .solution-close h2 { margin: 0 0 1rem; font: 500 42px/1.05 "Space Grotesk", sans-serif; letter-spacing: 0; }
.solution-problem > div > p { max-width: 58ch; color: #645e54; font-size: .92rem; line-height: 1.75; }
.solution-approach { display: grid; grid-template-columns: .85fr 1fr; gap: 8vw; padding: 5rem 9vw; }
.solution-approach h2 { max-width: 15ch; }
.solution-approach > div > p:not(.solution-index) { max-width: 48ch; color: color-mix(in srgb, var(--solution-ink) 68%, transparent); font-size: .86rem; line-height: 1.75; }
.solution-approach > div > a { display: inline-flex; justify-content: space-between; min-width: 220px; margin-top: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--solution-accent); font-size: .75rem; }
.solution-approach > div > a span { color: var(--solution-accent); }
.solution-approach > ul { margin: 0; padding: 0; list-style: none; }
.solution-approach > ul > li { display: grid; grid-template-columns: 36px 1fr 18px; gap: .8rem; align-items: center; min-height: 72px; border-top: 1px solid color-mix(in srgb, var(--solution-ink) 20%, transparent); }
.solution-approach > ul > li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--solution-ink) 20%, transparent); }
.solution-approach > ul span { color: var(--solution-accent); font-size: .65rem; }
.solution-approach > ul strong { font: 500 1.05rem "Space Grotesk", sans-serif; }
.solution-approach > ul i { color: var(--solution-accent); font-style: normal; }
.solution-preview { padding: 4.8rem 7vw 5rem; color: #24221f; background: #e8e5dd; }
.solution-preview > header { display: grid; grid-template-columns: .65fr 1fr; gap: .4rem 2rem; align-items: end; margin-bottom: 1.25rem; }
.solution-preview > header .solution-index { grid-column: 1 / -1; margin: 0; }
.solution-preview > header h2 { margin: 0; }
.solution-preview > header > p:last-child { max-width: 38ch; color: #6f6c65; font-size: .78rem; line-height: 1.6; }
.solution-preview-frame { position: relative; display: block; height: 610px; overflow: hidden; background: #d2cec3; border: 1px solid #d0ccc1; }
.solution-preview-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #f5f1e7; }
.solution-preview-label { position: absolute; right: .8rem; bottom: .8rem; display: inline-flex; gap: 1rem; padding: .75rem .9rem; color: #f8f6ef; background: #252421; font-size: .63rem; letter-spacing: .08em; }
.solution-preview-label b { color: #dfbd88; }
.solution-preview > .btn { margin-top: 1rem; border-radius: 3px; }
.solution-preview > .btn span { margin-left: .8rem; }
.solution-included { display: grid; grid-template-columns: .8fr 1fr; gap: 6vw; padding: 4.8rem 9vw; }
.solution-included > header > p:last-child { color: color-mix(in srgb, var(--solution-ink) 60%, transparent); font-size: .79rem; line-height: 1.6; }
.solution-included > ul { margin: 0; padding: 0; list-style: none; }
.solution-included > ul li { display: grid; grid-template-columns: 35px 1fr 20px; gap: .8rem; align-items: center; min-height: 58px; border-top: 1px solid color-mix(in srgb, var(--solution-ink) 20%, transparent); }
.solution-included > ul li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--solution-ink) 20%, transparent); }
.solution-included > ul span { color: var(--solution-accent); font-size: .64rem; }
.solution-included > ul strong { font-size: .78rem; font-weight: 500; }
.solution-included > ul i { color: var(--solution-accent); font-style: normal; }
.solution-process { padding: 4.5rem 8vw 5rem; color: #24323a; background: #e6e9e7; }
.solution-process h2 { margin-bottom: 2rem; }
.solution-process > ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.solution-process > ol li { min-height: 180px; padding: .9rem 1rem .5rem 0; border-top: 1px solid #b8c3bf; }
.solution-process > ol span { color: #718681; font-size: .65rem; }
.solution-process > ol h3 { margin: 1rem 0 .45rem; font: 500 1.25rem "Space Grotesk", sans-serif; }
.solution-process > ol p { max-width: 28ch; color: #66716d; font-size: .73rem; line-height: 1.6; }
.solution-close { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding: 4.3rem 9vw; color: #f4f2eb; background: #20363a; }
.solution-close .solution-index { color: #d7c89a; }
.solution-close h2 { max-width: 17ch; }
.solution-close > div > p:last-child { max-width: 53ch; color: #c0ccc9; font-size: .82rem; line-height: 1.65; }
.solution-close-actions { display: grid; gap: .8rem; min-width: 210px; }
.solution-close-actions .btn { justify-content: space-between; border-radius: 3px; }
.solution-close-actions > a:last-child { font-size: .72rem; text-align: center; text-decoration: underline; text-underline-offset: 4px; }
.solution-close-actions .btn span { margin-left: .7rem; color: #af8760; }
.solution-sales-professionnels .solution-hero-image { height: 570px; }
.solution-sales-entreprise .solution-hero-image { height: 480px; }
@media (max-width: 900px) {
  .solution-hero { grid-template-columns: 1fr 1fr; gap: 2rem; padding-inline: 5vw; }
  .solution-hero h1 { font-size: 48px; }
  .solution-hero-image { height: 440px; }
  .solution-problem, .solution-approach, .solution-included { padding-inline: 6vw; }
  .solution-preview { padding-inline: 5vw; }
  .solution-preview-frame { height: 500px; }
  .solution-close { padding-inline: 6vw; }
}
@media (max-width: 620px) {
  .solution-hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.7rem 1rem 3rem; }
  .solution-hero-copy > .eyebrow { margin-bottom: 1.7rem; }
  .solution-hero h1 { max-width: 15ch; font-size: 38px; }
  .solution-hero-intro { font-size: .86rem; }
  .solution-local-note { margin-top: 1.4rem; font-size: .52rem; }
  .solution-hero-image, .solution-sales-professionnels .solution-hero-image, .solution-sales-entreprise .solution-hero-image { height: 310px; }
  .solution-scroll { display: none; }
  .solution-problem { grid-template-columns: 1fr; gap: .5rem; padding: 2.7rem 1rem; }
  .solution-problem h2, .solution-approach h2, .solution-preview h2, .solution-included h2, .solution-process h2, .solution-close h2 { font-size: 30px; }
  .solution-approach, .solution-included { grid-template-columns: 1fr; gap: 1.6rem; padding: 3rem 1rem; }
  .solution-preview { padding: 3rem 1rem; }
  .solution-preview > header { grid-template-columns: 1fr; gap: .6rem; }
  .solution-preview-frame { height: 420px; }
  .solution-process { padding: 3rem 1rem; }
  .solution-process > ol { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .solution-process > ol li { min-height: 155px; }
  .solution-close { grid-template-columns: 1fr; gap: 1.3rem; padding: 3rem 1rem; }
  .solution-close-actions { min-width: 0; }
}