/**
 * Bloc Split — shokola_split
 * Réf. maquette : _claude/agence.html (.split).
 * Tokens (--paper, --magenta, --sec…) aliasés dans custom.css.
 */
.shk-split { padding: var(--sec) 0; position: relative; }
.shk-split__in {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 100px); align-items: center;
}
.shk-split--rev .shk-split__mediacol { order: 2; }

.shk-split__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shk-split__imgs .shk-split__media:nth-child(2) { margin-top: clamp(30px, 6vw, 80px); aspect-ratio: 3/4; }

.shk-split__media { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; }
.shk-split__ph { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform; }
.shk-split__reg { position: absolute; top: 14px; left: 14px; width: 22px; height: 22px; opacity: .7; mix-blend-mode: overlay; z-index: 2; }
.shk-split__reg::before, .shk-split__reg::after { content: ""; position: absolute; background: #fff; }
.shk-split__reg::before { left: 50%; top: 0; width: 1px; height: 100%; }
.shk-split__reg::after { top: 50%; left: 0; height: 1px; width: 100%; }

.shk-split__title {
    font-weight: 800; letter-spacing: -.04em; line-height: .96; font-size: clamp(2.2rem, 5vw, 4.4rem); margin: 18px 0 24px;
}
.shk-split__title em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--magenta); }
.shk-split__body { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.62; color: var(--ink-2); max-width: 52ch; }
.shk-split__body strong { color: var(--ink); font-weight: 600; }
.shk-split__body p + p { margin-top: 1em; }

@media (max-width: 860px) {
    .shk-split__in { grid-template-columns: 1fr; gap: 32px; }
    .shk-split--rev .shk-split__mediacol { order: 0; }
}