.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--ink); color: var(--on-d); padding: 10px 16px; border-radius: 6px; font-family: var(--font-body); font-size: 14px; text-decoration: none; transition: top .18s ease; }
    .skip-link:focus { top: 8px; }

    .cs-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
    .cs-narrow { max-width: 720px; }

    /* breadcrumb */
    .cs-crumbs { max-width: 1080px; margin: 26px auto 0; padding: 0 28px; font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .cs-crumbs a { color: var(--ink-mute); text-decoration: none; transition: color .15s ease; }
    .cs-crumbs a:hover { color: var(--c-deep); }
    .cs-crumbs__sep { opacity: .4; }
    .cs-crumbs__here { color: var(--ink-soft); }

    .cs-back { display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 0; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--c-deep); text-decoration: none; }
    .cs-back:hover { color: var(--c); }

    /* hero */
    .cs-hero { padding-top: 18px; padding-bottom: 8px; }
    .cs-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-deep); margin-bottom: 16px; }
    .cs-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--c-deep); }
    .cs-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(29px, 4.4vw, 46px); letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); text-wrap: balance; margin: 0; max-width: 20ch; }
    .cs-answer { margin-top: 22px; max-width: 60ch; font-family: var(--font-body); font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); }
    .cs-answer b, .cs-answer strong { color: var(--ink); font-weight: 600; }
    .cs-hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }

    /* showcase: frame + meta */
    .cs-showcase { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 38px; align-items: start; }
    @media (min-width: 900px) { .cs-showcase { grid-template-columns: 1.62fr 1fr; gap: 34px; } }

    .cs-frame { border-radius: 13px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); box-shadow: 0 30px 60px -34px rgba(10,12,14,0.45); }
    .cs-frame__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
    .cs-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cdc8bd; display: block; }
    .cs-frame__bar i:nth-child(1) { background: #e2867a; } .cs-frame__bar i:nth-child(2) { background: #e6c07a; } .cs-frame__bar i:nth-child(3) { background: #9fc08a; }
    .cs-frame__u { margin-left: 12px; font-family: var(--font-body); font-size: 12px; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 7px; }
    .cs-frame__u svg { width: 12px; height: 12px; opacity: .6; }
    .cs-frame__shot { max-height: 560px; overflow: hidden; }
    .cs-frame__shot img { width: 100%; height: auto; display: block; }

    .cs-meta { border: 1px solid var(--border); border-radius: 13px; padding: 8px 22px; background: var(--bg); }
    .cs-meta .m { display: flex; flex-direction: column; gap: 3px; padding: 16px 0; border-bottom: 1px solid var(--border); }
    .cs-meta .m:last-child { border-bottom: 0; }
    .cs-meta .m span { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }
    .cs-meta .m b { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; color: var(--ink); }
    .cs-meta .m--obj b { font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }
    .cs-meta .m--link a { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--c-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
    .cs-meta .m--link a:hover { color: var(--c); }
    .cs-meta .m--link a svg { width: 13px; height: 13px; }

    /* challenge sub-cards (H3) */
    .cs-chal { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
    @media (min-width: 760px) { .cs-chal { grid-template-columns: repeat(3, 1fr); } }
    .cs-chal__c { border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: var(--card-r); padding: 20px 20px 22px; background: var(--bg); }
    .cs-chal__c h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; }
    .cs-chal__c p { font-family: var(--font-body); font-size: 14px; line-height: 1.56; color: var(--ink-soft); margin: 0; }

    /* strategy + UX step blocks (H3) */
    .cs-steps { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 4px; }
    .cs-step { padding: 22px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr; gap: 8px; }
    @media (min-width: 760px) { .cs-step { grid-template-columns: 0.9fr 1.6fr; gap: 24px; align-items: start; } }
    .cs-step:last-child { border-bottom: 0; }
    .cs-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
    .cs-step p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; max-width: 60ch; }

    /* sections */
    .cs-section { padding-top: 46px; }
    .cs-kicker { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
    .cs-kicker .ix { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--c); letter-spacing: 0.08em; }
    .cs-kicker h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0; }
    .cs-cap { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; margin: 0 0 26px; }
    .cs-prose p { font-family: var(--font-body); font-size: 17px; line-height: 1.72; color: var(--ink); margin: 0 0 20px; max-width: 68ch; }
    .cs-prose p strong { color: var(--ink); font-weight: 600; }
    .cs-prose p:last-child { margin-bottom: 0; }

    /* hero: stacked résumé paragraphs */
    .cs-answer + .cs-answer { margin-top: 14px; }

    /* decision blocks carry multi-paragraph bodies */
    .cs-step__b p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; max-width: 60ch; }
    .cs-step__b p + p { margin-top: 10px; }

    /* clean check list ("Ce que nous avons conçu" + problème bullets) */
    .cs-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 13px; }
    .cs-prose .cs-list { margin-top: 4px; }
    @media (min-width: 700px) { .cs-list.cs-list--2 { grid-template-columns: 1fr 1fr; gap: 13px 30px; } }
    .cs-list li { display: flex; align-items: flex-start; gap: 11px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
    .cs-list li svg { flex: none; width: 19px; height: 19px; margin-top: 2px; stroke: var(--c-deep); }

    /* ordered parcours (UX steps) */
    .cs-ol { list-style: none; counter-reset: s; margin: 18px 0 4px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
    .cs-ol li { counter-increment: s; position: relative; padding-left: 46px; min-height: 30px; display: flex; align-items: center; }
    .cs-ol li span { font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
    .cs-ol li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--dark); color: var(--on-d); font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }

    /* explorer nos services (internal links to money pages) */
    .cs-links { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
    @media (min-width: 640px) { .cs-links { grid-template-columns: 1fr 1fr; } }
    .cs-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--border); border-radius: var(--card-r); padding: 16px 20px; background: var(--bg); text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
    .cs-link:hover { border-color: var(--c); transform: translateY(-2px); box-shadow: var(--shadow-cuivre); }
    .cs-link span { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
    .cs-link svg { flex: none; width: 17px; height: 17px; stroke: var(--c-deep); }

    /* feature grid */
    .cs-features { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 6px; }
    @media (min-width: 720px) { .cs-features { grid-template-columns: 1fr 1fr; } }
    .cs-f { border: 1px solid var(--border); border-radius: var(--card-r); padding: 22px 22px 24px; background: var(--bg); transition: transform .2s ease, box-shadow .2s ease; }
    .cs-f:hover { transform: translateY(-2px); box-shadow: var(--shadow-cuivre); }
    .cs-f__ic { width: 42px; height: 42px; border-radius: 10px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
    .cs-f__ic svg { width: 21px; height: 21px; stroke: var(--c-deep); }
    .cs-f h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 7px; }
    .cs-f p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); margin: 0; }

    /* gallery */
    .cs-gallery { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 8px; }
    @media (min-width: 760px) { .cs-gallery { grid-template-columns: 1fr 1fr; } }
    .cs-gallery figure { margin: 0; }
    .cs-gallery img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 11px; }
    .cs-gallery figcaption { margin-top: 10px; font-family: var(--font-body); font-size: 13px; color: var(--ink-mute); }

    /* mobile mockups */
    .cs-mobiles { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin-top: 12px; }
    .cs-mobiles figure { margin: 0; width: 220px; max-width: 44%; }
    .cs-mobiles .ph { border-radius: 26px; border: 7px solid var(--ink); overflow: hidden; background: var(--ink); box-shadow: 0 26px 50px -28px rgba(10,12,14,0.5); }
    .cs-mobiles .ph img { width: 100%; height: auto; display: block; }
    .cs-mobiles figcaption { margin-top: 12px; text-align: center; font-family: var(--font-body); font-size: 12.5px; color: var(--ink-mute); }

    /* outcomes */
    .cs-outcomes { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 6px; }
    @media (min-width: 720px) { .cs-outcomes { grid-template-columns: repeat(3, 1fr); } }
    .cs-o { border-radius: var(--card-r); padding: 24px 22px; background: var(--dark); color: var(--on-d); }
    .cs-o b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--on-d); margin-bottom: 8px; }
    .cs-o span { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--on-d-soft); }

    /* quote */
    .cs-quote { margin: 46px 0 0; padding: 30px 32px; background: var(--bg-2); border-left: 3px solid var(--c); border-radius: 0 12px 12px 0; }
    .cs-quote p { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.42; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: balance; }

    /* services tags + money line */
    .cs-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
    .cs-tags span { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-soft); background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
    .cs-money { margin-top: 24px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 66ch; }
    .cs-money a { color: var(--c-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
    .cs-money a:hover { color: var(--c); }

    /* end CTA */
    .cs-cta { max-width: 1080px; margin: 64px auto 0; padding: 0 28px; }
    .cs-cta__in { background: var(--dark); color: var(--on-d); border-radius: 14px; text-align: center; padding: 52px 40px; position: relative; overflow: hidden; }
    .cs-cta__in::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(212,120,60,0.18), transparent 55%); pointer-events: none; }
    .cs-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.3vw, 34px); letter-spacing: -0.02em; line-height: 1.18; max-width: 22ch; margin: 0 auto 14px; text-wrap: balance; color: var(--on-d); position: relative; }
    .cs-cta p { font-family: var(--font-body); font-size: 16.5px; line-height: 1.55; color: var(--on-d-soft); max-width: 52ch; margin: 0 auto 28px; position: relative; }
    .cs-cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

    /* related */
    .cs-related { margin-top: 64px; background: var(--bg-2); padding: 58px 0 62px; }
    .cs-related__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 28px; color: var(--ink); }
    .cs-related__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
    @media (min-width: 760px) { .cs-related__grid { grid-template-columns: repeat(3, 1fr); } }
    .cs-rcard { display: block; text-decoration: none; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--card-r); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
    .cs-rcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-cuivre); }
    .cs-rcard__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
    .cs-rcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
    .cs-rcard__b { padding: 16px 18px 18px; }
    .cs-rcard__tag { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-deep); }
    .cs-rcard__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin: 6px 0 0; }

    @media (max-width: 560px) {
      .cs-mobiles figure { max-width: 47%; width: 200px; }
    }