/* ============================================================
   Kit média public (/kit-media, 2026-10-19) — vue media-kit/index.
   Chargé par cette seule page. Les couleurs des pastilles sont
   celles du kit (MediaKitService::kit()['colors'], même ordre).
   ============================================================ */
.mk-section .pc-block-title-lg { margin-top: 40px; }
.mk-section .pc-block-title-lg:first-child { margin-top: 0; }

.mk-pitch {
    max-width: 900px; margin: 0 0 10px; padding: 20px 24px;
    font-size: 18px; line-height: 1.7;
    border-left: 4px solid #f747f2; border-radius: 0 10px 10px 0;
    background: rgba(168, 85, 247, 0.08);
}

.mk-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 900px; }
.mk-logo-tile { display: flex; align-items: center; justify-content: center; padding: 34px 26px; border-radius: 12px; border: 1px solid rgba(168, 85, 247, 0.35); }
.mk-logo-tile img { width: 100%; height: auto; }
.mk-logo-tile-dark { background: #1b1b1b; }
.mk-logo-tile-light { background: #f5f5f4; }
.mk-actions { margin: 20px 0 0; }
/* `.pc-section a` (rose) passerait devant `.btn-light` : on rend au bouton son texte sombre. */
.mk-section .mk-actions .btn-light { color: #1b1b1b; }

.mk-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; max-width: 900px; margin-bottom: 18px; }
.mk-color { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid rgba(168, 85, 247, 0.35); border-radius: 10px; }
.mk-swatch { display: block; height: 56px; border-radius: 8px; margin-bottom: 6px; border: 1px solid rgba(128, 128, 128, 0.35); }
.mk-swatch-0 { background: #f747f2; }
.mk-swatch-1 { background: #a855f7; }
.mk-swatch-2 { background: #1b1b1b; }
.mk-swatch-3 { background: #ffffff; }
.mk-color-name { font-weight: 600; }
.mk-color-hex { font-size: 14px; color: #f747f2; }
.mk-color-usage { font-size: 13px; opacity: .7; line-height: 1.4; }
.mk-gradient { max-width: 900px; height: 46px; border-radius: 10px; background: linear-gradient(135deg, #f747f2 0%, #a855f7 100%); }

.mk-link { max-width: 900px; padding: 14px 18px; border-radius: 10px; border: 1px dashed rgba(168, 85, 247, 0.6); word-break: break-all; }
.mk-link code { font-size: 16px; color: #f747f2; }