/* static/css/programs.css - Styles premium page programme */
:root {
    --epim-primary: #0f3b63;
    /* bleu nuit */
    --epim-gold: #d4af37;
    /* accent or */
}

.bg-gold {
    background-color: var(--epim-gold) !important;
    color: #111
}

.bg-soft {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%)
}

.program-hero {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: end;
    padding: 3rem 0
}

.program-hero .hero-media {
    position: absolute;
    inset: 0;
    opacity: .22;
    filter: saturate(1.1) contrast(1.1)
}

.program-hero .hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.6)
}

.program-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55))
}

.program-hero .stat {
    min-width: 120px
}

.program-hero .stat-number {
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1
}

.program-hero .stat-label {
    opacity: .9
}

.section-title {
    font-weight: 800;
    margin-bottom: 1rem
}

.card-kpi .kpi-icon {
    font-size: 1.8rem;
    color: var(--epim-primary)
}

.card-kpi .kpi-title {
    font-weight: 600
}

.card-benefit .benefit-icon {
    font-size: 1.8rem;
    color: var(--epim-primary);
    margin-bottom: .25rem
}

.feature-item {
    display: flex;
    gap: .75rem
}

.feature-item .feature-bullet {
    width: .6rem;
    height: .6rem;
    background: var(--epim-gold);
    border-radius: 9999px;
    margin-top: .5rem
}

.kpi-compact {
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .75rem 1rem
}

.kpi-compact span {
    display: block;
    font-weight: 800;
    color: var(--epim-primary)
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: #ecf1f6;
    color: #0b2440;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

@media (max-width: 767.98px) {
    .program-hero {
        min-height: 40vh;
        padding: 2rem 0
    }

    .program-hero .stat {
        min-width: 100px
    }
}