/**
 * Bloc Colonnes — shokola_colonnes
 * Réf. maquette : _claude/agence.html (.do).
 */
.shk-colonnes { padding: var(--sec) 0; background: var(--paper-2); }
.shk-colonnes__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 72px); }
.shk-colonnes__title { font-weight: 800; letter-spacing: -.04em; line-height: .95; font-size: clamp(2.4rem, 6vw, 5rem); margin-top: 14px; }
.shk-colonnes__title em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--magenta); }

.shk-colonnes__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 40px); }
.shk-colonnes__col h3 {
    font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta);
    padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; font-weight: 500;
}
.shk-colonnes__col ul { list-style: none; margin: 0; padding: 0; }
.shk-colonnes__col li {
    padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 500;
    display: flex; justify-content: space-between; align-items: center; transition: color .3s, padding-left .3s; cursor: default;
}
.shk-colonnes__col li:hover { color: var(--magenta); padding-left: 8px; }
.shk-colonnes__col li span { font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); }

@media (max-width: 860px) { .shk-colonnes__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .shk-colonnes__cols { grid-template-columns: 1fr; } }