/* =====================================================================
 * Destination : /assets/css/pages/kredit.css
 * Rôle        : Styles PROPRES À LA FICHE D'UN PRÊT (/kredit.php?slug=…)
 *               Chargé automatiquement après /assets/css/main.css
 *               La couleur du produit arrive via la variable --accent.
 * Version     : 2.0 – Corporate / Trust & Security
 *
 * Sommaire : 01 En-tête · 02 Mini-simulateur · 03 Sous-navigation
 *            04 Überblick · 05 Vorteile · 06 Voraussetzungen
 *            07 Exemples · 08 Ablauf · 09 FAQ · 10 Autres prêts
 *            11 CTA mobile · 12 404 · 13 Responsive
 * ===================================================================== */

/* 01. EN-TÊTE ======================================================== */
.product-hero { position: relative; overflow: hidden; }
.product-hero::after {
    content: "";
    position: absolute;
    right: -10%; top: -30%;
    width: 60%; height: 140%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
    opacity: .55;
    pointer-events: none;
}
.product-hero .container { position: relative; z-index: 1; }
.product-kicker { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.product-icon {
    display: grid; place-items: center;
    width: 54px; height: 54px;
    font-size: 1.35rem;
    color: var(--white);
    background: var(--accent);
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius);
    box-shadow: 0 14px 28px -12px var(--accent);
    animation: float 5s ease-in-out infinite;
}
.product-subtitle { margin: -.25rem 0 .9rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #93C5FD; }
.product-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.product-keys li { padding: .8rem .95rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.product-keys span { display: block; font-size: .74rem; color: #CBD5E1; }
.product-keys strong { font-family: var(--font-display); font-size: .98rem; font-weight: 800; color: var(--white); }

/* 02. MINI-SIMULATEUR =============================================== */
.mini-calc {
    position: relative;
    padding: 1.6rem;
    color: var(--text);
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.mini-calc::before { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 0 0 4px 4px; }
.mini-calc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.2rem; font-family: var(--font-display); font-weight: 800; color: var(--navy); }
.mini-calc-head i { color: var(--accent); margin-right: .3rem; }
.mini-field { margin-bottom: 1.1rem; }
.mini-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .45rem; }
.mini-field-top label { font-weight: 700; font-size: .9rem; color: var(--text-2); }
.mini-field-top output { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mini-limits { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .75rem; color: var(--muted); }
.mini-result { margin: 1.25rem 0 1rem; padding: 1.1rem 1.2rem; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.mini-result > span { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mini-result > strong { display: block; margin: .15rem 0 .8rem; font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.mini-result > strong.is-updated { animation: pulseScale .45s var(--ease); }
.mini-result dl { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; margin: 0; padding-top: .8rem; text-align: left; border-top: 1px dashed var(--border-2); }
.mini-result dl div { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.mini-result dt { font-weight: 500; color: var(--muted); }
.mini-result dd { margin: 0; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.mini-more { display: block; margin-top: .8rem; text-align: center; font-size: .88rem; font-weight: 700; color: var(--blue); }
.mini-more i { margin-right: .3rem; }
.mini-note { margin: .8rem 0 0; font-size: .76rem; color: var(--muted); text-align: center; }

/* 03. SOUS-NAVIGATION =============================================== */
.subnav {
    position: sticky;
    top: var(--header-h, 76px);
    z-index: 90;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.subnav .container { display: flex; align-items: center; gap: 1rem; }
.subnav ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a:not(.btn-ac) {
    position: relative;
    display: block;
    padding: 1rem .9rem;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-2);
    white-space: nowrap;
}
.subnav a:not(.btn-ac)::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 3px; background: var(--blue); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform var(--speed) var(--ease); }
.subnav a:not(.btn-ac):hover, .subnav a.is-active { color: var(--blue); }
.subnav a.is-active::after { transform: scaleX(1); }
.subnav-cta { flex-shrink: 0; }

/* 04. ÜBERBLICK ===================================================== */
#ueberblick, #vorteile, #voraussetzungen, #beispiele, #ablauf, #fragen { scroll-margin-top: calc(var(--header-h, 76px) + 64px); }
.product-content h3 { margin: 1.75rem 0 .75rem; font-size: 1.35rem; }
.product-content h3:first-child { margin-top: .5rem; }
.product-content p { color: var(--text-2); line-height: 1.75; }
.product-content ul { padding-left: 0; list-style: none; }
.product-content ul li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; color: var(--text-2); }
.product-content ul li::before { content: "\f00c"; position: absolute; left: 0; top: .1rem; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--green); }
.product-content strong { color: var(--navy); }
.product-img { margin-bottom: 1.25rem; border-radius: var(--radius-lg); }
img.product-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; background: var(--bg); box-shadow: var(--shadow-lg); }
.facts-card { padding: 1.4rem; background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.facts-card h2 { margin-bottom: 1rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.facts-card dl { margin: 0; }
.facts-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .92rem; border-bottom: 1px solid var(--border); }
.facts-card dl div:last-child { border-bottom: 0; }
.facts-card dt { font-weight: 500; color: var(--text-2); }
.facts-card dd { margin: 0; font-weight: 800; color: var(--navy); text-align: right; }

/* 05. VORTEILE ====================================================== */
.feature-tile { position: relative; padding: 1.5rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.feature-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; font-size: 1.15rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, white); border-radius: var(--radius); transition: background-color .3s, color .3s; }
.feature-tile:hover .feature-icon { color: var(--white); background: var(--accent); }
.feature-tile p { margin: 0; font-weight: 600; color: var(--text); }

/* 06. VORAUSSETZUNGEN =============================================== */
.req-card .ac-card-title { font-size: 1.15rem; }
.doc-list { display: grid; gap: .5rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.doc-list li { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem .8rem; font-size: .92rem; font-weight: 600; background: var(--bg); border-radius: var(--radius-sm); }
.doc-list i { margin-top: .2rem; color: var(--blue); }
.req-note { font-size: .85rem; color: var(--text-2); }
.req-note i { margin-right: .3rem; color: var(--green); }

/* 07. EXEMPLES ====================================================== */
.examples-table { min-width: 560px; }
.examples-table thead th.num { text-align: right; }
.rate-link { display: inline-block; padding: .3rem .6rem; font-weight: 700; color: var(--navy); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.rate-link:hover { color: var(--white); background: var(--blue); }

/* 08. ABLAUF ======================================================== */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow-step { position: relative; padding: 1.75rem 1.4rem 1.5rem; text-align: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.flow-step:not(:last-child)::after {
    content: "\f054";
    position: absolute;
    right: -1.15rem; top: 50%;
    z-index: 1;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem;
    color: var(--white);
    background: var(--green);
    border: 3px solid var(--white);
    border-radius: 50%;
    transform: translateY(-50%);
}
.flow-num { position: absolute; top: .8rem; left: 1rem; font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--accent) 18%, white); }
.flow-icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 1rem; font-size: 1.4rem; color: var(--white); background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, white); }
.flow-step h3 { font-size: 1.08rem; }
.flow-step p { margin: 0; font-size: .9rem; color: var(--text-2); }

/* 09. FAQ =========================================================== */
.faq-intro { color: var(--text-2); }

/* 10. AUTRES PRÊTS ================================================== */
.other-card { display: flex; flex-direction: column; padding: 1.5rem; color: var(--text); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.other-card:hover { color: var(--text); transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.other-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1rem; font-size: 1.2rem; color: var(--white); background: var(--accent); border-radius: var(--radius); }
.other-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.other-card p { flex: 1; font-size: .9rem; color: var(--text-2); }
.other-meta { font-size: .82rem; font-weight: 700; color: var(--muted); }
.other-more { margin-top: .9rem; font-weight: 700; color: var(--accent); }
.other-more i { transition: transform var(--speed) var(--ease); }
.other-card:hover .other-more i { transform: translateX(4px); }

/* 11. CTA MOBILE ==================================================== */
.sticky-apply { display: none; }

/* 12. 404 =========================================================== */
.not-found-box { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
.not-found-box .ac-icon { margin-left: auto; margin-right: auto; }

/* 13. RESPONSIVE ==================================================== */
@media (max-width: 1199.98px) {
    .product-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .flow { grid-template-columns: repeat(2, 1fr); }
    .flow-step:nth-child(2)::after { display: none; }
    .subnav-cta { display: none; }
    .sticky-apply {
        position: fixed;
        left: .75rem; right: .75rem; bottom: .75rem;
        z-index: 95;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .7rem .8rem .7rem 1.1rem;
        background: var(--navy);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        visibility: hidden;
        transform: translateY(140%);
        transition: transform .4s var(--ease), visibility 0s linear .4s;
    }
    .sticky-apply.is-visible { visibility: visible; transform: none; transition: transform .4s var(--ease), visibility 0s; }
    .sticky-apply span { display: block; font-size: .75rem; color: #CBD5E1; }
    .sticky-apply strong { font-family: var(--font-display); color: var(--white); }
}
@media (max-width: 767.98px) {
    .mini-calc { padding: 1.3rem; }
    .mini-result > strong { font-size: 1.9rem; }
    .mini-result dl { grid-template-columns: 1fr; }
    .flow { grid-template-columns: 1fr; }
    .flow-step:not(:last-child)::after { display: none; }
}
@media (max-width: 575.98px) {
    .product-keys { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .product-keys li { padding: .65rem .75rem; }
    .product-keys strong { font-size: .88rem; }
}
@media print {
    .subnav, .sticky-apply, .mini-calc a { display: none !important; }
}