/* ========================================
   PAGE PLATFORM/ABOUT - TYPOLOGIE
   docs/typologie-couleurs-themes-contraste.md
   Bloc dédié : .page-platform-about-typology (wrapper du contenu about uniquement).
   Ne pas mettre cette classe sur le body : les variables --cfy-* doivent rester
   isolées dans le wrapper pour ne pas affecter le footer ni le reste du layout.
   Calibré comme en dark mode (lisible en mode clair ou sombre).
   ======================================== */

/* Forcer le fond sombre sur les conteneurs parents (nk-content) qui contiennent le wrapper — évite le fond blanc */
.nk-content-body:has(.page-platform-about-typology),
.nk-content:has(.page-platform-about-typology) .nk-content-body,
.nk-content:has(.page-platform-about-typology),
.nk-content-inner:has(.page-platform-about-typology) {
    background: #0a0a0a !important;
    color: #f8f9fa !important;
}

/* Variables Commercify → typologie (scopées au wrapper .page-platform-about-typology uniquement) */
.page-platform-about-typology {
    --cfy-primary: #ffcc00 !important;
    --cfy-primary-light: #e6b800 !important;
    --cfy-primary-dark: #e6b800 !important;
    --cfy-bg-primary: #0a0a0a !important;
    --cfy-bg-secondary: #141c26 !important;
    --cfy-bg-tertiary: #101924 !important;
    --cfy-text-primary: #f8f9fa !important;
    --cfy-text-secondary: #8094ae !important;
    --cfy-text-muted: #adb5bd !important;
    --cfy-border-color: rgba(255, 255, 255, 0.1) !important;
    --cfy-white: #f8f9fa !important;
    --cfy-gradient-primary: linear-gradient(135deg, #ffcc00 0%, #e6b800 100%) !important;
    background: #0a0a0a !important;
    color: #f8f9fa !important;
}

/* Bordures type dark (uniquement à l'intérieur du wrapper) */
.page-platform-about-typology .cfy-hero,
.page-platform-about-typology .cfy-section,
.page-platform-about-typology .cfy-card,
.page-platform-about-typology .cfy-container,
.page-platform-about-typology .cfy-badge,
.page-platform-about-typology .cfy-hashtag,
.page-platform-about-typology .cfy-nav,
.page-platform-about-typology .cfy-feature {
    --bs-border-color: rgba(255, 255, 255, 0.1) !important;
}

.page-platform-about-typology .cfy-hero,
.page-platform-about-typology .cfy-section,
.page-platform-about-typology .cfy-card,
.page-platform-about-typology .cfy-container,
.page-platform-about-typology .cfy-badge,
.page-platform-about-typology .cfy-hashtag,
.page-platform-about-typology .cfy-nav,
.page-platform-about-typology .cfy-feature,
.page-platform-about-typology [class*="border"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hero */
.page-platform-about-typology .cfy-hero {
    background: #0a0a0a !important;
    color: #f8f9fa !important;
}

.page-platform-about-typology .cfy-hero-title,
.page-platform-about-typology .cfy-hero-video-title {
    color: #f8f9fa !important;
}

.page-platform-about-typology .cfy-hero-subtitle,
.page-platform-about-typology .cfy-video-title-text {
    color: #8094ae !important;
}

/* Sections (override inline style border-top) */
.page-platform-about-typology .cfy-section {
    background: #141c26 !important;
}

.page-platform-about-typology .cfy-section[style*="border-top"] {
    border-top-color: #ffcc00 !important;
}

.page-platform-about-typology .cfy-section-title,
.page-platform-about-typology .cfy-section-subtitle {
    color: #f8f9fa !important;
}

.page-platform-about-typology .cfy-section-subtitle {
    color: #8094ae !important;
}

/* Badge */
.page-platform-about-typology .cfy-badge,
.page-platform-about-typology .cfy-badge-primary {
    background: rgba(255, 204, 0, 0.2) !important;
    color: #ffcc00 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Hashtags (override inline / style dans la section) */
.page-platform-about-typology .cfy-hashtag {
    background: rgba(255, 204, 0, 0.12) !important;
    color: #ffcc00 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.page-platform-about-typology .cfy-hashtag:hover {
    background: rgba(255, 204, 0, 0.25) !important;
    color: #ffcc00 !important;
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.2) !important;
}

/* Cartes */
.page-platform-about-typology .cfy-card {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8f9fa !important;
}

.page-platform-about-typology .cfy-card:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.page-platform-about-typology .cfy-card-body {
    color: #f8f9fa !important;
}

.page-platform-about-typology .cfy-card-body p,
.page-platform-about-typology .cfy-feature-text {
    color: #8094ae !important;
}

/* Titres dans cartes (inline color: var(--cfy-primary) → accent) */
.page-platform-about-typology .cfy-card-body h2,
.page-platform-about-typology .cfy-card-body h3,
.page-platform-about-typology .cfy-card-body h4,
.page-platform-about-typology .cfy-feature-title,
.page-platform-about-typology .cfy-mb-4[style*="color"] {
    color: #ffcc00 !important;
}

/* Carte gradient (style inline var(--cfy-gradient-primary)) */
.page-platform-about-typology .cfy-card[style*="gradient"] {
    background: #101924 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8f9fa !important;
}

.page-platform-about-typology .cfy-card[style*="gradient"] .cfy-feature-icon,
.page-platform-about-typology .cfy-card[style*="gradient"] h2,
.page-platform-about-typology .cfy-card[style*="gradient"] p {
    color: #f8f9fa !important;
}

/* Feature */
.page-platform-about-typology .cfy-feature {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8f9fa !important;
}

.page-platform-about-typology .cfy-feature-icon {
    color: #ffcc00 !important;
}

/* Nav tabs */
.page-platform-about-typology .cfy-nav {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.page-platform-about-typology .cfy-nav-link {
    color: #8094ae !important;
}

.page-platform-about-typology .cfy-nav-link:hover {
    color: #ffcc00 !important;
    background: rgba(255, 204, 0, 0.08) !important;
}

.page-platform-about-typology .cfy-nav-link.active {
    color: #ffcc00 !important;
    background: #101924 !important;
    border-bottom-color: #ffcc00 !important;
}

/* Boutons */
.page-platform-about-typology .cfy-btn,
.page-platform-about-typology .cfy-btn-primary,
.page-platform-about-typology .cfy-btn-black-glossy {
    background: #ffcc00 !important;
    border-color: #ffcc00 !important;
    color: #000000 !important;
}

.page-platform-about-typology .cfy-btn:hover,
.page-platform-about-typology .cfy-btn-primary:hover,
.page-platform-about-typology .cfy-btn-black-glossy:hover {
    background: #e6b800 !important;
    border-color: #e6b800 !important;
    color: #000000 !important;
}

.page-platform-about-typology .cfy-btn:focus {
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25) !important;
}

/* Contrôles vidéo carrousel */
.page-platform-about-typology .cfy-carousel-controls {
    background: #141c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffcc00 !important;
}

.page-platform-about-typology .cfy-carousel-controls:hover {
    background: rgba(255, 204, 0, 0.15) !important;
    color: #ffcc00 !important;
}

/* Liens */
.page-platform-about-typology a {
    color: #ffcc00 !important;
}

.page-platform-about-typology a:hover {
    color: #e6b800 !important;
}

/* Texte général */
.page-platform-about-typology .cfy-text-center,
.page-platform-about-typology .row,
.page-platform-about-typology .container-fluid {
    color: inherit !important;
}

.page-platform-about-typology h1,
.page-platform-about-typology h2,
.page-platform-about-typology h3,
.page-platform-about-typology h4 {
    color: #f8f9fa !important;
}

.page-platform-about-typology p {
    color: #8094ae !important;
}