/**
 * Bloc Séquence — shokola_sequence
 * Réf. maquette : _claude/agence.html (.values).
 */
.shk-sequence {
    --ease: cubic-bezier(.16, 1, .3, 1);
    background: var(--ink); color: var(--paper); padding: 0 0 var(--sec);
}
.shk-sequence__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }

.shk-sequence__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.shk-sequence__visual {
    aspect-ratio: 1; border-radius: 4px; position: relative; overflow: hidden; max-height: 46vh;
    background-size: cover; background-position: center; transition: background .8s var(--ease);
}
.shk-sequence__big {
    position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900;
    font-size: clamp(6rem, 16vw, 14rem); letter-spacing: -.05em; color: rgba(255, 255, 255, .16); transition: opacity .5s;
}
.shk-sequence__heading { font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.6rem, 3vw, 2.4rem); }

.shk-sequence__list { display: flex; flex-direction: column; }
.shk-sequence-item {
    min-height: 90vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0;
    border-top: 1px solid rgba(251, 250, 246, .16);
}
.shk-sequence-item .no { font-family: var(--mono); font-size: .78rem; color: var(--cyan); letter-spacing: .1em; margin-bottom: 18px; }
.shk-sequence-item h3 { font-weight: 800; letter-spacing: -.035em; line-height: .98; font-size: clamp(2.2rem, 5.5vw, 4.6rem); margin-bottom: 24px; }
.shk-sequence-item h3 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--magenta); }
.shk-sequence-item p { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: rgba(251, 250, 246, .74); max-width: 48ch; }

@media (max-width: 860px) {
    .shk-sequence__in { grid-template-columns: 1fr; }
    .shk-sequence__sticky { position: relative; height: auto; padding: var(--sec) 0 20px; }
    .shk-sequence__visual { max-height: 240px; }
    .shk-sequence-item { min-height: auto; padding: 48px 0; }
}