/* Section publique « Connecteurs » (18/10/2026) : /tarifs (clair) et /agence (sombre).
   Noms d'outils en texte, sans logo de marque. */
.kc { padding: 24px 24px 8px; }
.kc-inner { max-width: 1100px; margin: 0 auto; }
.kc-titre { text-align: center; font-size: 2rem; font-weight: 800; margin: 40px 0 8px; color: #1e1b4b; }
.kc-sous { text-align: center; color: #6b7280; margin: 0 0 32px; }
.kc-blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kc-bloc { border-radius: 16px; padding: 26px 26px 22px; }
.kc-bloc--large { grid-column: 1 / -1; }
.kc-bloc h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; }
.kc-effet { margin: 0 0 18px; line-height: 1.55; font-size: .95rem; }
.kc-fam { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; align-items: start; padding: 6px 0; }
.kc-fam-nom { font-size: .85rem; font-weight: 700; padding-top: 6px; }
.kc-noms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kc-noms li { padding: 5px 12px; border-radius: 99px; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.kc-note { margin: 16px 0 0; font-size: .84rem; line-height: 1.5; }
.kc-bloc:not(.kc-bloc--large) .kc-fam { grid-template-columns: 1fr; gap: 6px; padding: 8px 0 4px; }
.kc-bloc:not(.kc-bloc--large) .kc-fam-nom { padding-top: 0; }

/* Clair (/tarifs) */
.kc--clair .kc-bloc { background: #fff; border: 1px solid #e5e7eb; }
.kc--clair .kc-bloc h3 { color: #1e1b4b; }
.kc--clair .kc-effet { color: #374151; }
.kc--clair .kc-fam-nom, .kc--clair .kc-note { color: #6b7280; }
.kc--clair .kc-noms li { background: #f3f4f6; color: #1f2937; }

/* Sombre (/agence) : reprend les variables de la page */
.kc--sombre { padding: 100px 0 40px; background: var(--deep, #0f1535); }
.kc--sombre .kc-inner { max-width: var(--maxw, 1140px); padding: 0 24px; }
.kc--sombre .kc-bloc { background: var(--surface, #151b3a); border: 1px solid var(--border, rgba(79,70,229,.2)); }
.kc--sombre .kc-bloc h3 { color: var(--txt-br, #f8fafc); }
.kc--sombre .kc-effet { color: var(--txt, #cbd5e1); }
.kc--sombre .kc-fam-nom, .kc--sombre .kc-note { color: #94a3b8; }
.kc--sombre .kc-noms li { background: rgba(255,255,255,.06); color: var(--txt-br, #f8fafc); border: 1px solid rgba(255,255,255,.08); }

@media (max-width: 768px) {
    .kc-blocs { grid-template-columns: 1fr; }
    .kc-fam { grid-template-columns: 1fr; }
    .kc-fam-nom { padding-top: 0; }
    .kc-titre { font-size: 1.6rem; }
    .kc--sombre { padding: 64px 0 24px; }
}