/**
 * Kolirys — Pages détail fonctionnalités
 */

.page-feature-detail {
    background: var(--k-surface-page);
    color: var(--k-text-primary);
    font-family: var(--k-font-family);
    overflow-x: clip;
    width: 100%;
}

.page-feature-detail .kl-hero {
    padding-top: calc(var(--kl-nav-h) + 52px);
}

.page-feature-detail .kl-hero__accent {
    color: var(--k-accent-highlight);
}

/* ── Fil d'Ariane visuel ── */
.kl-feat-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--k-font-size-sm);
    color: var(--k-text-muted);
    margin-bottom: var(--k-spacing-md);
}

.kl-feat-crumb a {
    color: var(--k-brand-secondary);
    text-decoration: none;
    font-weight: var(--k-font-weight-medium);
}

.kl-feat-crumb a:hover { text-decoration: underline; }

.kl-feat-crumb__sep { opacity: 0.4; }

/* ── Carte highlight ── */
.kl-feat-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--k-spacing-3xl);
    align-items: center;
    padding: var(--k-spacing-2xl) 0;
}

.kl-feat-highlight + .kl-feat-highlight {
    border-top: 1px solid var(--k-border-subtle);
}

.kl-feat-highlight--reverse .kl-feat-highlight__media { order: -1; }

.kl-feat-highlight__frame {
    background: var(--k-surface-card);
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-xl);
    padding: var(--k-spacing-xl);
    box-shadow: var(--k-shadow-md);
    text-align: center;
}

.kl-feat-highlight__frame img {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--k-radius-md);
}

.kl-feat-highlight__frame--plain {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.kl-feat-highlight__frame--plain img {
    max-width: 340px;
    filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.12));
}

/* ── Tip box ── */
.kl-feat-tip {
    background: linear-gradient(135deg, var(--k-brand-primary) 0%, var(--k-brand-secondary) 100%);
    border-radius: var(--k-radius-lg);
    padding: var(--k-spacing-xl);
    color: #fff;
    margin: var(--k-spacing-lg) 0;
}

.kl-feat-tip__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--k-font-size-md);
    font-weight: var(--k-font-weight-bold);
    margin: 0 0 var(--k-spacing-sm);
    color: #fff;
}

.kl-feat-tip__title .fa { color: #fbbf24; }

.kl-feat-tip p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--k-font-size-sm);
    margin: 0 0 8px;
    line-height: var(--k-line-height-relaxed);
}

.kl-feat-tip p:last-child { margin-bottom: 0; }

/* ── Grille de points ── */
.kl-feat-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--k-spacing-md);
    margin: var(--k-spacing-lg) 0;
}

.kl-feat-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--k-spacing-md);
    background: var(--k-surface-card);
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-md);
}

.kl-feat-point__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--k-radius-sm);
    background: var(--k-success-soft);
    color: var(--k-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.kl-feat-point__text {
    font-size: var(--k-font-size-sm);
    color: var(--k-text-secondary);
    line-height: var(--k-line-height-normal);
    margin: 0;
}

.kl-feat-point__text strong {
    color: var(--k-text-primary);
    display: block;
    margin-bottom: 2px;
}

/* ── Étapes ── */
.kl-feat-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--k-spacing-md);
    counter-reset: featstep;
}

.kl-feat-step {
    text-align: center;
    padding: var(--k-spacing-lg);
    background: var(--k-surface-card);
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-lg);
}

.kl-feat-step::before {
    counter-increment: featstep;
    content: counter(featstep);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto var(--k-spacing-sm);
    border-radius: 50%;
    background: var(--k-brand-gradient);
    color: #fff;
    font-weight: var(--k-font-weight-bold);
    font-size: var(--k-font-size-sm);
}

.kl-feat-step__title {
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-bold);
    margin: 0 0 6px;
    color: var(--k-text-primary);
}

.kl-feat-step__text {
    font-size: 0.8125rem;
    color: var(--k-text-secondary);
    margin: 0;
    line-height: var(--k-line-height-normal);
}

/* ── Contact cards (assistance) ── */
.kl-feat-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--k-spacing-lg);
}

.kl-feat-contact {
    padding: var(--k-spacing-xl);
    background: var(--k-surface-card);
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-lg);
    text-align: center;
    transition: box-shadow var(--k-transition-base), border-color var(--k-transition-base);
}

.kl-feat-contact:hover {
    border-color: var(--k-border-strong);
    box-shadow: var(--k-shadow-md);
}

.kl-feat-contact__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--k-spacing-md);
    border-radius: 50%;
    background: var(--k-info-soft);
    color: var(--k-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.kl-feat-contact__title {
    font-size: var(--k-font-size-base);
    font-weight: var(--k-font-weight-bold);
    margin: 0 0 8px;
}

.kl-feat-contact__text {
    font-size: var(--k-font-size-sm);
    color: var(--k-text-secondary);
    margin: 0 0 var(--k-spacing-sm);
}

.kl-feat-contact__action {
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    color: var(--k-brand-secondary);
    text-decoration: none;
}

.kl-feat-contact__action:hover { text-decoration: underline; }

/* ── Banques ── */
.kl-feat-banks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: var(--k-spacing-lg);
}

.kl-feat-banks img {
    height: 32px;
    width: auto;
    opacity: 0.85;
    filter: grayscale(20%);
    transition: opacity 0.2s;
}

.kl-feat-banks img:hover { opacity: 1; filter: none; }

/* ── Liens connexes ── */
.kl-feat-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--k-spacing-md);
}

.kl-feat-related__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--k-spacing-md) var(--k-spacing-lg);
    background: var(--k-surface-card);
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--k-transition-base);
}

.kl-feat-related__item:hover {
    border-color: var(--k-brand-secondary);
    box-shadow: var(--k-shadow-sm);
    text-decoration: none;
    color: inherit;
    transform: translateY(-2px);
}

.kl-feat-related__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--k-radius-sm);
    background: var(--k-info-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--k-brand-secondary);
}

.kl-feat-related__label {
    font-size: var(--k-font-size-sm);
    font-weight: var(--k-font-weight-semibold);
    color: var(--k-text-primary);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .page-feature-detail .kl-hero__visual.d-none {
        display: flex !important;
    }

    .page-feature-detail .kl-hero__visual-stack { display: none; }

    .page-feature-detail .kl-hero__content { text-align: center; }
    .page-feature-detail .kl-hero__content .kl-lead { margin-left: auto; margin-right: auto; }
    .page-feature-detail .kl-hero__cta { justify-content: center; }
}

@media (max-width: 1024px) {
    .kl-feat-highlight { grid-template-columns: 1fr; gap: var(--k-spacing-xl); }
    .kl-feat-highlight--reverse .kl-feat-highlight__media { order: 0; }
    .kl-feat-steps { grid-template-columns: repeat(2, 1fr); }
    .kl-feat-related { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .page-feature-detail .kl-hero { padding-top: calc(var(--kl-nav-h) + 28px); }
    .kl-feat-points { grid-template-columns: 1fr; }
    .kl-feat-steps { grid-template-columns: 1fr; }
    .kl-feat-contact-grid { grid-template-columns: 1fr; }
}