/* ============================================================
   Bloc Titre de section — shokola_titre
   + style de base du composant .shk-cmp-title (en-tête de section).
   Tokens : framework Kakao (--color-*, --font-*).
   ============================================================ */
.shk-titre {
    padding: clamp(24px, 4vw, 48px) 0;
}
.shk-titre--center {
    text-align: center;
}

/* Composant : titre de section — même peau que .shk-section-title (custom.css) */
.shk-cmp-title {
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.03em;
    font-size: clamp(2.1rem, 5.4vw, 4.6rem);
    max-width: 16ch;
    color: var(--color-dark);
    margin: 8px 0 0;
}
.shk-titre--center .shk-cmp-title {
    margin-left: auto;
    margin-right: auto;
}

/* Convention d'accent unique : <em> = italique serif, couleur secondaire */
.shk-cmp-title em {
    font-family: var(--font-3);
    font-style: italic;
    font-weight: 500;
    color: var(--color-secondaire);
}

/* --- Layouts ---------------------------------------------------------- */

/* Numéro de section (repris de .shk-section-num) */
.shk-titre .shk-section-num {
    display: block;
    font-family: var(--font-2);
    font-size: .74rem;
    letter-spacing: .12em;
    color: var(--color-secondaire);
    margin-bottom: 12px;
}

/* Chapô (repris de .shk-lead) */
.shk-titre .shk-lead {
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    max-width: 54ch;
    line-height: 1.55;
    color: var(--color-ink-2);
    margin: 18px 0 0;
}
.shk-titre--center .shk-lead {
    margin-left: auto;
    margin-right: auto;
}

/* Peau sombre */
.shk-titre--dark {
    background: var(--color-dark);
    color: var(--color-paper);
    padding: clamp(40px, 6vw, 80px) 0;
}
.shk-titre--dark .shk-cmp-title { color: var(--color-paper); }
.shk-titre--dark .shk-section-num { color: var(--color-primaire); }
.shk-titre--dark .shk-lead { color: var(--color-paper); opacity: .8; }