/* ===== PLATEFORMES PURCHASE PAGE UX IMPROVEMENTS ===== */

.highlight-card {
    background: linear-gradient(165deg, rgba(30, 20, 50, 0.7) 0%, rgba(15, 10, 30, 0.9) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    padding: 20px 28px !important;
    /* Reduced from 24px 35px */
    /* Vertically more compact */
    border-radius: var(--radius-2xl) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(59, 130, 246, 0.5) !important;
    margin-top: 0 !important;
    /* Spacing handled by carousel margin-bottom */
    margin-bottom: 20px !important;
}

.highlight-card.with-image {
    padding: 0 !important;
}

.highlight-card.with-image .xyz-image-container {
    height: 180px;
    /* Reduced from 220px */
    border-radius: 0;
    width: 100%;
}

.highlight-card.with-image .highlight-card-main {
    padding: 30px !important;
}

.regulation-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}


.platforms-carousel-container {
    margin-bottom: 35px !important;
    width: 100% !important;
    overflow: visible !important;
    /* Avoid horizontal scroll during animations */
}

.platforms-carousel {
    width: 100% !important;
}


.highlight-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
    transition: transform 0.6s ease !important;
}

.highlight-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.2) !important;
}

.highlight-card:hover::before {
    transform: translate(10%, 10%) !important;
}

.highlight-card h3 {
    font-size: var(--font-size-xl) !important;
    margin-bottom: var(--spacing-sm) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    color: var(--color-text-primary) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.highlight-card .inform-section-p {
    font-size: 1.05rem !important;
    line-height: 1.74 !important;
    color: var(--color-text-secondary) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0 !important;
    max-width: 82% !important;
}

/* Nouveau conteneur pour aligner P et Bouton */
.highlight-card-main {
    display: flex !important;
    align-items: center !important;
    /* Centered vertically for compactness */
    justify-content: space-between !important;
    gap: 20px !important;
}

/* Button UX */
.info-toggle-wrapper {
    margin-top: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
}

/* Global Button Override for this Page */
.btn-primary {
    background: var(--card-color, #3b82f6) !important;
    padding: 10px 24px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    filter: none !important;
}

.highlight-card .btn-icon {
    transition: transform 0.3s ease !important;
}

.highlight-card .btn-primary:hover .btn-icon {
    transform: translateX(3px) !important;
}

/* Reveal content polish */
.highlight-card .reveal-content {
    border-top: 1px solid rgba(59, 130, 246, 0.2) !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
}

.highlight-card .card-reveal-p {
    border-top: none !important;
    padding-top: 0 !important;
    font-size: 1rem !important;
    line-height: 1.76 !important;
    letter-spacing: -0.01em !important;
}

/* List items in reveal */
.highlight-card .fiscalite-points {
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    margin-top: 20px !important;
    border-left: 4px solid var(--color-primary) !important;
}

.highlight-card .point-item {
    margin-bottom: 12px !important;
}

.highlight-card .point-item:last-child {
    margin-bottom: 0 !important;
}

/* Indicators Override */
.carousel-indicators .carousel-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
}

/* Responsive */
@media (max-width: 992px) {
    .regulation-grid {
        max-width: 100% !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .highlight-card {
        padding: 20px !important;
    }

    .highlight-card-main {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .highlight-card .inform-section-p {
        max-width: 100% !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .info-toggle-wrapper {
        justify-content: center !important;
    }

    .highlight-card .btn-primary {
        width: 100% !important;
        justify-content: center !important;
    }

    .regulation-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   PREMIUM PLATFORM CARDS (From Niveau 1)
   ======================================== */

.platform-card-premium {
    background: var(--color-bg-card) !important;
    border-radius: 20px !important;
    padding: 0 !important;
    /* Managed by internal divs for image support */
    border: 1px solid rgba(59, 130, 246, 0.1) !important;
    transition: all 0.4s ease;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

.platform-card-premium .xyz-image-container {
    height: 160px !important;
}

.xyz-image-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: transparent !important;
}

.xyz-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.6s ease;
}

.platform-card-premium:hover .xyz-image-container img {
    transform: scale(1.05);
}

.platform-content-premium {
    padding: 1.5rem 2rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.platform-card-premium:hover {
    transform: translateY(-5px) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.2) !important;
}

.platform-header-premium {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    /* Reduced from 25px */
    padding: 20px 20px 0 !important;
    /* Reduced from 25px 25px 0 */
}

.platform-title-group h3 {
    font-size: 1.4rem !important;
    margin: 0 !important;
    color: white !important;
}

.badge-mica-small {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}

.badge-psan-small {
    background: #2563eb;
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}

.platform-features-premium {
    margin-bottom: 15px !important;
    /* Reduced from 25px */
    padding: 0 20px !important;
    /* Reduced from 0 25px */
}

.feature-row-p {
    display: flex !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 0.9rem !important;
}

.feature-row-p:last-child {
    border-bottom: none !important;
}

.feature-label {
    color: var(--color-text-secondary) !important;
}

.feature-value {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

.platform-actions-premium {
    display: flex !important;
    gap: 15px !important;
    margin-top: auto !important;
    padding: 0 20px 20px !important;
    /* Reduced from 0 25px 25px */
}

.platform-actions-premium .btn {
    flex: 1 !important;
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.platform-actions-premium .btn-outline {
    background: transparent !important;
    border: 1px solid var(--card-color, #3b82f6) !important;
    color: white !important;
    opacity: 0.9 !important;
}

.platform-actions-premium .btn-outline,
.platform-actions-premium .btn-outline span,
.platform-actions-premium .btn-outline i,
.platform-actions-premium .btn-outline svg {
    color: white !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

.platform-actions-premium .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    opacity: 1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.platform-actions-premium .btn-primary,
.platform-actions-premium .btn-purple,
.platform-actions-premium .btn-gradient-purple {
    background: var(--card-color, #7c3af7) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.platform-actions-premium .btn-primary:hover,
.platform-actions-premium .btn-purple:hover,
.platform-actions-premium .btn-gradient-purple:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    filter: none !important;
}

.featured-banner {
    position: absolute !important;
    top: 15px !important;
    right: -30px !important;
    background: #10b981 !important;
    color: white !important;
    padding: 4px 35px !important;
    transform: rotate(45deg) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    z-index: 1 !important;
    letter-spacing: 1px !important;
}

/* ========================================
   ROBUST CAROUSEL OVERHAUL
   ======================================== */

.platforms-carousel-container {
    padding: 0 0 40px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}

.platforms-carousel-wrapper {
    overflow: visible !important;
    width: 100% !important;
}

.platforms-carousel {
    display: block !important;
    /* Desactivate flex which breaks absolute positions */
    position: relative !important;
    height: 480px !important;
    /* Reduced from 550px */
    width: 100% !important;
    margin: 0 auto !important;
}

/* Base style for ALL platform cards in the carousel */
.xyz-image-container {
    height: 160px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
    background: #0f0a1e !important;
    /* Fallback dark */
}

.xyz-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.xyz-image-container img.contain {
    object-fit: contain !important;
}

.platforms-carousel .platform-card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: var(--color-bg-card) !important;
    border: 1px solid rgba(59, 130, 246, 0.1) !important;
    border-radius: 20px !important;
}

/* ACTIVE CARD - Center */
.platforms-carousel .platform-card.active {
    width: 420px !important;
    /* Reduced from 500px */
    /* Slightly narrower to fit better with arrows */
    height: auto !important;
    min-height: 420px !important;
    /* Reduced from 480px */
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 100 !important;
    opacity: 1 !important;
    padding: 0 !important;
    /* Header image goes edge-to-edge */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

.platforms-carousel .platform-card.active .xyz-image-container {
    height: 260px !important;
    /* Reduced from 320px */
    /* Slightly taller for better 16:9/square balance */
    background: transparent !important;
    /* Remove the black background */
}

.platforms-carousel .platform-card.active .xyz-image-container img {
    object-fit: cover !important;
    /* Fill the entire area, no black bands */
    object-position: center bottom !important;
    /* Keep the bottom part (name/logo) visible */
}



/* LATERAL CARDS - Small Boxes */
.platforms-carousel .platform-card.left,
.platforms-carousel .platform-card.right {
    width: 120px !important;
    height: 120px !important;
    z-index: 10 !important;
    opacity: 0.6 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

.platforms-carousel .platform-card.left {
    transform: translate(calc(-50% - 340px - (var(--distance) * 100px)), -50%) scale(calc(1 - var(--distance) * 0.15)) !important;
}

.platforms-carousel .platform-card.right {
    transform: translate(calc(-50% + 340px + (var(--distance) * 100px)), -50%) scale(calc(1 - var(--distance) * 0.15)) !important;
}

/* Hide everything except Header for side cards */
/* Hide everything except Content Wrapper for side cards (this hides image and banners) */
.platforms-carousel .platform-card.left>*:not(.platform-content-premium),
.platforms-carousel .platform-card.right>*:not(.platform-content-premium) {
    display: none !important;
}

/* Inside Content Wrapper, hide everything except Header */
.platforms-carousel .platform-card.left .platform-content-premium>*:not(.platform-header-premium),
.platforms-carousel .platform-card.right .platform-content-premium>*:not(.platform-header-premium) {
    display: none !important;
}

/* Buttons have inline display:flex !important — use visibility+position to bypass */
.platforms-carousel .platform-card.left .platform-actions-premium,
.platforms-carousel .platform-card.right .platform-actions-premium {
    position: absolute !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* h4 and p have no inline display — hide safely */
.platforms-carousel .platform-card.left h4,
.platforms-carousel .platform-card.right h4,
.platforms-carousel .platform-card.left p,
.platforms-carousel .platform-card.right p {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure Content Wrapper fills the card */
.platforms-carousel .platform-card.left .platform-content-premium,
.platforms-carousel .platform-card.right .platform-content-premium {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Layout Header in side cards to center the title */
.platforms-carousel .platform-card.left .platform-header-premium,
.platforms-carousel .platform-card.right .platform-header-premium {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Show Title Group in side cards */
.platforms-carousel .platform-card.left .platform-title-group,
.platforms-carousel .platform-card.right .platform-title-group {
    display: block !important;
}

/* Hide Badges in side cards to avoid clutter */
.platforms-carousel .platform-card.left .badge-container,
.platforms-carousel .platform-card.right .badge-container {
    display: none !important;
}

.platforms-carousel .platform-card.left h3,
.platforms-carousel .platform-card.right h3 {
    font-size: 0.85rem !important;
    text-align: center !important;
    margin: 0 !important;
    color: var(--color-text-secondary) !important;
    font-weight: 600 !important;
}

/* HIDE TITLE IN ACTIVE CARD (Main View) */
.platforms-carousel .platform-card.active .platform-title-group {
    display: none !important;
}

/* ARROWS REPOSITIONING & STYLING */
.platforms-carousel-container .carousel-nav {
    position: absolute !important;
    top: 85% !important;
    /* Aligné avec la ligne des boutons d'action de la carte */
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    border: none !important;
    color: white !important;
    z-index: 150 !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.platforms-carousel-container .carousel-nav:hover {
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6) !important;
}

.platforms-carousel-container .carousel-nav:active {
    transform: translateY(-50%) scale(0.95) !important;
}

.platforms-carousel-container .carousel-prev {
    left: calc(50% - 360px) !important;
}

.platforms-carousel-container .carousel-next {
    right: calc(50% - 360px) !important;
}

/* Ajustement pour les écrans moyens (tablettes et petits ordinateurs) */
@media (max-width: 1200px) {
    .platforms-carousel-container .carousel-prev {
        left: 30px !important;
    }

    .platforms-carousel-container .carousel-next {
        right: 30px !important;
    }
}

/* INDICATORS - Moved to global styles.css */

/* ========================================
   PREMIUM FAQ & INFO BARS (From Niveau 1)
   ======================================== */
.premium-info-bar {
    background: rgba(15, 12, 26, 1) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    border-radius: 24px !important;
    padding: 15px 25px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 40px 0 !important;
    width: 100% !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.4s ease !important;
}

.faq-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 50px auto !important;
}

.premium-info-bar.faq-style {
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .faq-container {
        grid-template-columns: 1fr !important;
    }
}

.info-bar-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 15px !important;
}

@media (max-width: 768px) {
    .info-bar-main {
        flex-direction: column !important;
        text-align: center !important;
    }
}

.info-bar-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
}

@media (max-width: 768px) {
    .info-bar-left {
        flex-direction: column !important;
    }
}

.info-bar-icon-box {
    width: 40px !important;
    /* Reduced from 48px */
    height: 40px !important;
    /* Reduced from 48px */
    background: rgba(30, 24, 52, 1) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1) !important;
    overflow: hidden !important;
}

.info-bar-icon-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.info-bar-content h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    color: white !important;
}

.info-bar-content h3 span {
    color: white !important;
}

.info-bar-content p {
    margin: 5px 0 0 !important;
    color: white !important;
    font-size: 0.97rem !important;
    line-height: 1.72 !important;
    letter-spacing: -0.01em !important;
}

.btn-premium-action {
    background: rgba(30, 24, 52, 0.6) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    padding: 8px 20px !important;
    border-radius: 100px !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
}

.btn-premium-action:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    transform: translateX(5px) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
}

.info-bar-reveal {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.premium-info-bar.active .info-bar-reveal {
    max-height: 800px !important;
    opacity: 1 !important;
    margin-top: 25px !important;
    padding-top: 25px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mica-standards-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 15px !important;
}

.mica-standards-list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
}

.mica-standards-list li span.check {
    color: #10b981 !important;
    font-weight: 800 !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.lead-text-centered {
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 auto 30px !important;
    color: var(--color-text-secondary) !important;
    font-size: 1.1rem !important;
    line-height: 1.76 !important;
    letter-spacing: -0.01em !important;
}

/* ========================================
   COULEUR DYNAMIQUE PAR CARTE (--card-color)
   Appliquée via JS sur le container lors de chaque transition
   ======================================== */

/* Boutons de navigation (prev/next) */
.platforms-carousel-container.themed .carousel-nav {
    background: linear-gradient(135deg, var(--active-color, #3b82f6), color-mix(in srgb, var(--active-color, #3b82f6) 70%, white)) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--active-color, #3b82f6) 60%, transparent) !important;
    transition: background 0.5s ease, box-shadow 0.5s ease !important;
}

.platforms-carousel-container.themed .carousel-nav:hover {
    box-shadow: 0 6px 25px color-mix(in srgb, var(--active-color, #3b82f6) 80%, transparent) !important;
}

/* Carte active — contour coloré */
.platforms-carousel.themed .platform-card.active {
    border-color: var(--active-color, #3b82f6) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px color-mix(in srgb, var(--active-color, #3b82f6) 40%, transparent) !important;
}

/* Bouton principal (Explorer, Télécharger) dans la carte active */
.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-primary,
.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-gradient-purple {
    background: linear-gradient(135deg, var(--active-color, #8b5cf6), color-mix(in srgb, var(--active-color, #8b5cf6) 60%, black)) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--active-color, #8b5cf6) 50%, transparent) !important;
    transition: background 0.5s ease, box-shadow 0.5s ease !important;
}

.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-primary:hover {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--active-color, #8b5cf6) 70%, transparent) !important;
}

/* Bouton outline (Détails) dans la carte active */
.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-outline {
    border-color: var(--active-color, #8b5cf6) !important;
    color: white !important;
    transition: border-color 0.5s ease, color 0.5s ease !important;
}

.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-outline:hover {
    background: color-mix(in srgb, var(--active-color, #8b5cf6) 15%, transparent) !important;
    color: white !important;
}

.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-outline,
.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-outline span,
.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-outline i,
.platforms-carousel.themed .platform-card.active .platform-actions-premium .btn-outline svg {
    color: white !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Indicateurs (dots) de progression */
.carousel-indicators.themed .carousel-indicator.active {
    background: var(--active-color, #3b82f6) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--active-color, #3b82f6) 70%, transparent) !important;
    transition: background 0.5s ease, box-shadow 0.5s ease !important;
}

/* ========================================
   BADGES DYNAMIQUES PAR COULEUR DE CARTE
   Badge principal (psan-small) = couleur solide
   Badge secondaire (mica-small) = dégradé dérivé
   ======================================== */

/* Badge psan-small (ex: "Portefeuille Numérique") — couleur pleine */
.platforms-carousel.themed .platform-card.active .badge-psan-small {
    background: var(--active-color, #2563eb) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--active-color, #2563eb) 50%, transparent) !important;
    transition: background 0.5s ease, box-shadow 0.5s ease !important;
}

/* Badge mica-small (ex: "MiCA", "Sécurité Max") — dégradé dérivé */
.platforms-carousel.themed .platform-card.active .badge-mica-small {
    background: linear-gradient(135deg,
            var(--active-color, #3b82f6),
            color-mix(in srgb, var(--active-color, #3b82f6) 65%, white)) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--active-color, #3b82f6) 40%, transparent) !important;
    transition: background 0.5s ease, box-shadow 0.5s ease !important;
}

/* Badge featured (ex: sur les cartes avec class featured) */
.platforms-carousel.themed .platform-card.active .badge-featured {
    background: linear-gradient(135deg,
            var(--active-color, #7c3aed),
            color-mix(in srgb, var(--active-color, #7c3aed) 70%, black)) !important;
    transition: background 0.5s ease !important;
}