/* ==========================================================================
   Kapital Beratung Ag. — « Nos Solutions de Financement » et « Nos Chiffres Clés »
   ==========================================================================

   Styles des deux sections reprises du projet camis (Tomcikova-Consulting),
   transposées dans la palette de Kapital Beratung Ag. :

     - onglets des produits de crédit : chaque onglet présente un produit,
       image à gauche, carte détaillée à droite (montant, durée, taux,
       atouts, bouton) ;
     - soulignement noir du titre de la section des chiffres clés.

   ⚠️ Classes préfixées « lc- » (loan card) : aucun risque de collision avec
      style.css, header-footer.css, home-charts.css ou Bootstrap.
   ⚠️ Les couleurs viennent de la charte : #000000 (noir) et #34bd6b (accent).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Soulignement de titre (chiffres clés)
   -------------------------------------------------------------------------- */
.lc-underline {
    width: 60px;
    height: 3px;
    background: var(--secondary-color, #34bd6b);
    margin: 0.9rem auto 0;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Onglets des solutions de financement
   -------------------------------------------------------------------------- */
.lc-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.75rem;
    margin-bottom: 2rem;
    /* La barre d'onglets défile horizontalement sur mobile plutôt que de
       passer à la ligne : les libellés restent lisibles. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (min-width: 992px) {
    .lc-tabs {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

.lc-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    border: 1px solid #e7e7e7;
    background: #fff;
    color: #000000;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.lc-tab:hover {
    background: #f1f1f1;
    border-color: #dbdbdb;
    color: #000000;
}

.lc-tab.active {
    background: #000000;
    border-color: #000000;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.lc-tab i {
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Panneau d'un produit
   -------------------------------------------------------------------------- */
.lc-media {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    height: 100%;
    min-height: 420px;
}

.lc-media img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
}

.lc-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.lc-title {
    color: #000000;
    font-weight: 800;
    margin-bottom: 0.6rem;
}

.lc-desc {
    color: #6d6d6d;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.lc-note {
    font-size: 0.85rem;
    color: #6d6d6d;
    margin-bottom: 1.5rem;
}

.lc-note i {
    color: #000000;
}

/* Deux repères chiffrés : le montant et la durée, côte à côte */
.lc-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.lc-metric {
    background: #f7f9fb;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.lc-metric-label {
    display: block;
    font-size: 0.78rem;
    color: #6d6d6d;
    margin-bottom: 0.2rem;
}

.lc-metric-value {
    color: #000000;
    font-weight: 700;
    font-size: 1.02rem;
}

.lc-metric-value--accent {
    color: #34bd6b;
}

.lc-checks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lc-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #6d6d6d;
    font-size: 0.95rem;
    padding: 0.25rem 0;
}

.lc-checks i {
    color: #34bd6b;
    margin-top: 0.28rem;
}

/* Le bouton reste collé au bas de la carte, quelle que soit la hauteur */
.lc-cta {
    margin-top: auto;
    padding-top: 1.6rem;
}

.lc-cta .button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.95rem 1.5rem;
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .lc-media,
    .lc-media img {
        min-height: 260px;
    }

    .lc-card {
        padding: 1.5rem 1.25rem;
    }

    .lc-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .lc-metrics {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   GRAPHIQUES — reprise à l'identique du projet camis
   ==========================================================================

   Géométrie, structure du SVG et animation viennent du projet camis
   (Tomcikova-Consulting). Seule la palette change : les noirs de Crédit
   Horizon remplacent ceux de camis, la marque restant celle du site.

   Principe de l'animation : les éléments restent dans leur état de départ
   (barres écrasées, textes transparents, anneau effacé, barres de progression
   vides) tant que la classe .anime n'est pas posée sur la section. C'est le
   script en bas de page qui la pose, à l'entrée de la section dans l'écran.
   Sans JavaScript, .anime n'arrive jamais — et comme les états de départ sont
   portés par les mêmes règles que l'état final, le graphique reste alors
   entièrement visible.
   ========================================================================== */

.section-chiffres {
    --c-primaire: #000000;
    --c-primaire-fonce: #000000;
    --c-accent: #34bd6b;
    --c-accent-profond: #000000;
    --c-bordure: #E6EBF2;
    --c-texte-muet: #64748B;

    background-color: #ffffff;
    /* La barre de navigation est fixe : sans cette marge, un lien vers
       #chiffres place le titre de la section sous la navbar. */
    scroll-margin-top: 90px;
}

/* Cartes */
.carte-avantage {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--c-bordure);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.icone-avantage {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--c-primaire);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-avantage h5 {
    font-weight: 700;
    color: var(--c-primaire-fonce);
    font-size: 1.05rem !important;
}

/* Graphiques */
.chart-svg {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    display: block;
}

.donut-svg {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Liste à puces cochées */
.liste-chiffres {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem !important;
}

.liste-chiffres li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    color: #495057;
}

.liste-chiffres li:last-child {
    margin-bottom: 0;
}

.liste-chiffres i {
    color: var(--c-accent-profond);
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

/* Barres de progression : la largeur finale est portée par --largeur */
.progress-campagne {
    height: 8px;
    border-radius: 999px;
    background: var(--c-bordure);
    overflow: hidden;
}

.progress-campagne-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-accent), var(--c-primaire));
    width: 0;
    transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}

.section-chiffres.anime .progress-campagne-bar {
    width: var(--largeur, 0%);
}

/* Barres du graphique : déployées de bas en haut, avec décalage */
.chart-svg .barre-chiffre {
    transform-box: fill-box;
    transform-origin: bottom center;
    transform: scaleY(0);
    transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--retard, 0s);
}

.section-chiffres.anime .chart-svg .barre-chiffre {
    transform: scaleY(1);
}

/* Valeurs et années : fondu, avec décalage */
.chart-svg .txt-chiffre,
.donut-svg .txt-chiffre {
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: var(--retard, 0s);
}

.section-chiffres.anime .chart-svg .txt-chiffre,
.section-chiffres.anime .donut-svg .txt-chiffre {
    opacity: 1;
}

/* Anneau : l'arc se dessine, --offset étant la partie non parcourue */
.anneau-chiffre {
    stroke-dasharray: 326.7;
    stroke-dashoffset: 326.7;
    transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}

.section-chiffres.anime .anneau-chiffre {
    stroke-dashoffset: var(--offset, 0);
}

/* Survol d'une carte : l'animation rejoue */
@keyframes tc-barres {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes tc-anneau {
    from { stroke-dashoffset: 326.7; }
    to { stroke-dashoffset: var(--offset, 0); }
}

@keyframes tc-fondu {
    from { opacity: 0; }
    to { opacity: 1; }
}

.section-chiffres.anime .carte-avantage:hover .chart-svg .barre-chiffre {
    animation: tc-barres 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: var(--retard, 0s);
}

.section-chiffres.anime .carte-avantage:hover .anneau-chiffre {
    animation: tc-anneau 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s backwards;
}

.section-chiffres.anime .carte-avantage:hover .chart-svg .txt-chiffre,
.section-chiffres.anime .carte-avantage:hover .donut-svg .txt-chiffre {
    animation: tc-fondu 0.5s ease backwards;
    animation-delay: var(--retard, 0s);
}

/* « Animations réduites » : tout est affiché immédiatement */
@media (prefers-reduced-motion: reduce) {
    .chart-svg .barre-chiffre,
    .chart-svg .txt-chiffre,
    .donut-svg .txt-chiffre,
    .anneau-chiffre,
    .progress-campagne-bar {
        transition: none !important;
    }

    .section-chiffres.anime .carte-avantage:hover .chart-svg .barre-chiffre,
    .section-chiffres.anime .carte-avantage:hover .anneau-chiffre,
    .section-chiffres.anime .carte-avantage:hover .chart-svg .txt-chiffre,
    .section-chiffres.anime .carte-avantage:hover .donut-svg .txt-chiffre {
        animation: none !important;
    }
}