/* ==============================================
   bankiris.fr — Custom CSS Override
   Palette : Copper #D97706 + Graphite #111827
   Logo gradient : #F59E0B → #D97706 → #92400E
   ============================================== */

/* =========================================================================
 * Self-hosted fonts (M5 Vague 3 SEO, 2026-06-01)
 * Remplace les <link> Google Fonts (fonts.googleapis.com + fonts.gstatic.com).
 * Gain : suppression 2 DNS lookups + 2 TLS handshakes 3rd-party + élimination
 * tracking RGPD implicite Google. Source : Google Fonts v20/v25 (charset latin
 * U+0000-00FF uniquement, downloaded 2026-06-01).
 *
 * Note technique : Inter et Lexend Deca sont servis par Google sous forme de
 * fonts VARIABLES (un seul WOFF2 par famille couvrant tous les poids latin).
 * Les 9 @font-face ci-dessous pointent donc vers 2 fichiers physiques :
 *   - /fonts/inter.woff2        (~47 KiB, couvre weights 400-800)
 *   - /fonts/lexend-deca.woff2  (~39 KiB, couvre weights 400-700)
 * font-display: swap → affichage immédiat en font système puis bascule,
 * comportement identique à l'URL Google Fonts précédente.
 * ========================================================================= */

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend Deca';
    src: url('/fonts/lexend-deca.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lexend Deca';
    src: url('/fonts/lexend-deca.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lexend Deca';
    src: url('/fonts/lexend-deca.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lexend Deca';
    src: url('/fonts/lexend-deca.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bk-copper: #D97706;
    --bk-copper-light: #F59E0B;
    --bk-copper-dark: #92400E;
    --bk-copper-soft: #FDBA74;
    --bk-graphite: #111827;
    --bk-graphite-soft: #4B5563;
    --bk-muted: #6B7280;
    --bk-cream: #FFFBF5;
}

/* ---- Couleur primaire : Copper ---- */
.text-primary { color: var(--bk-copper) !important; }
.bg-primary   { background-color: var(--bk-copper) !important; }
.border-primary { border-color: var(--bk-copper) !important; }

.btn-primary {
    background-color: var(--bk-copper) !important;
    border-color: var(--bk-copper) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bk-copper-dark) !important;
    border-color: var(--bk-copper-dark) !important;
}

.btn-outline-primary {
    color: var(--bk-copper) !important;
    border-color: var(--bk-copper) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--bk-copper) !important;
    color: #fff !important;
}

.btn-primary-square {
    background-color: var(--bk-copper) !important;
    border-color: var(--bk-copper) !important;
    color: #fff !important;
}
.btn-primary-square:hover {
    background-color: var(--bk-copper-dark) !important;
}

.btn-warning {
    background-color: var(--bk-copper-light) !important;
    border-color: var(--bk-copper-light) !important;
    color: var(--bk-graphite) !important;
}
.btn-warning:hover {
    background-color: var(--bk-copper) !important;
    color: #fff !important;
}

/* ---- Header ---- */
.header.default {
    background: #fff;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
}
/* Override agressif des règles du template Worthy :
   - .navbar-brand img { height: 40px } (fixe)  → on passe à 95px
   - .navbar .navbar-brand { flex: 0 0 200px }   → on passe à 380px (ratio logo 3.75:1) */
.header.default .navbar-brand {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    flex: 0 0 460px !important;
    max-width: 460px;
}
.header.default .navbar-brand img {
    height: 115px !important;
    max-height: 115px !important;
    width: auto !important;
    max-width: 100%;
}
@media (max-width: 991px) {
    .header.default .navbar-brand {
        flex: 0 0 320px !important;
        max-width: 320px;
    }
    .header.default .navbar-brand img {
        height: 80px !important;
        max-height: 80px !important;
    }
}
.navbar .nav-link { font-weight: 500; color: var(--bk-graphite) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--bk-copper) !important; }
.contact-number a:not(.btn) { color: var(--bk-copper) !important; }

/* Navbar : items sur une seule ligne dès LG */
.header .navbar-nav {
    flex-wrap: nowrap !important;
    align-items: center;
}
.header .navbar .navbar-nav .nav-link {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-right: 4px !important;
    font-size: 14px !important;
    white-space: nowrap;
}
.header .navbar-nav li > a i:not(.fa-chevron-down) {
    color: inherit !important;
    margin-left: 0 !important;
}
/* Chevron du dropdown Modules : espacement et taille flat */
.header .navbar-nav .dropdown-toggle .fa-chevron-down {
    margin-left: 10px !important;
    font-size: 0.65em !important;
    opacity: 0.55;
    vertical-align: middle;
}
.header .navbar-nav .nav-link-mon-espace i {
    color: var(--bk-copper) !important;
}

/* Dropdown header : flat & sobre.
   Le template Worthy crée sa flèche avec ::before ET ::after en bleu (#064CDB)
   sur .navbar .navbar-nav .dropdown.nav-item .nav-link — on les neutralise tous. */
.header .navbar-nav .dropdown-toggle::after,
.header .navbar .navbar-nav .dropdown.nav-item .nav-link::before,
.header .navbar .navbar-nav .dropdown.nav-item .nav-link::after,
.navbar .navbar-nav .dropdown.nav-item .nav-link::before,
.navbar .navbar-nav .dropdown.nav-item .nav-link::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}
.header .navbar-nav .dropdown-menu {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.10);
    padding: 6px 0;
    margin-top: 8px;
    min-width: 240px;
}
.header .navbar-nav .dropdown-menu .dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    color: var(--bk-graphite);
    transition: background .15s, color .15s;
}
.header .navbar-nav .dropdown-menu .dropdown-item:hover,
.header .navbar-nav .dropdown-menu .dropdown-item:focus {
    background: #FFFBF5;
    color: var(--bk-copper);
}

/* ---- Hero / Banner gradients ---- */
.hero-copper {
    background: linear-gradient(135deg, var(--bk-copper-light) 0%, var(--bk-copper) 50%, var(--bk-graphite) 100%);
}
.hero-graphite {
    background: linear-gradient(135deg, var(--bk-graphite) 0%, var(--bk-graphite-soft) 100%);
}

/* ---- Pricing cards ---- */
.pricing {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.pricing:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(217, 119, 6, .15);
}
.pricing.active {
    border: 2px solid var(--bk-copper);
    box-shadow: 0 8px 25px rgba(217, 119, 6, .2);
}
.pricing .pricing-plan { padding: 20px; }
.pricing-price strong { font-size: 3rem; font-weight: 700; color: var(--bk-copper); }
.pricing-price sup { font-size: 1.2rem; color: var(--bk-copper); vertical-align: super; }
.pricing-list li {
    padding: 8px 15px;
    border-bottom: 1px solid #f1f3f5;
    font-size: 0.9rem;
}
.pricing-list li:last-child { border-bottom: none; }

/* ---- Toggle 6/12 mois (Tarifs) ---- */
.engagement-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
}
.engagement-toggle button {
    border: none;
    background: transparent;
    padding: 8px 22px;
    border-radius: 999px;
    font-weight: 600;
    color: var(--bk-muted);
    cursor: pointer;
    transition: all .2s;
    font-size: 14px;
}
.engagement-toggle button.active {
    background: var(--bk-copper);
    color: #fff;
    box-shadow: 0 2px 6px rgba(217, 119, 6, .25);
}
.engagement-toggle .badge-promo {
    background: #FEF3C7;
    color: var(--bk-copper-dark);
    margin-left: 6px;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ---- Modules cards (Home + Modules pages) ---- */
.module-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 28px 24px;
    height: 100%;
    transition: all .25s;
}
.module-card:hover {
    border-color: var(--bk-copper);
    box-shadow: 0 12px 32px rgba(217, 119, 6, .12);
    transform: translateY(-2px);
}
.module-card .module-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--bk-copper-light), var(--bk-copper));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}
/* ---- Calculette ROI ---- */
.roi-calculator {
    background: linear-gradient(135deg, var(--bk-cream) 0%, #fff 100%);
    border: 2px solid var(--bk-copper-soft);
    border-radius: 14px;
    padding: 32px;
}
.roi-calculator label { font-weight: 600; color: var(--bk-graphite); margin-bottom: 6px; }
.roi-calculator .roi-result {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    border-left: 4px solid var(--bk-copper);
}
.roi-calculator .roi-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--bk-copper);
    line-height: 1;
}
.roi-calculator .roi-label { color: var(--bk-muted); font-size: 13px; }

/* ---- Feature info icons ---- */
.feature-info-icon i { color: var(--bk-copper); }

/* ---- Section titles ---- */
.section-title h2 { color: var(--bk-graphite); }
.section-title h2::after {
    background-color: var(--bk-copper);
}

/* ---- Footer ---- */
.footer { background: var(--bk-graphite); }
.footer p { color: #cbd5e1 !important; }
.footer h5.text-primary { color: var(--bk-copper-light) !important; }
.footer-link a { color: #cbd5e1 !important; }
.footer-link a:hover { color: var(--bk-copper-light) !important; }
.footer .contact-item i { color: #94a3b8 !important; }
.footer .contact-item a,
.footer .contact-address a { color: #cbd5e1 !important; }
.footer .contact-item a:hover,
.footer .contact-address a:hover { color: var(--bk-copper-light) !important; }
.footer-bottom {
    background: #0a0f1a;
    border-top: 1px solid #1f2937;
}
.footer-bottom p,
.footer-bottom a { color: #94a3b8 !important; }
.footer-bottom a:hover { color: var(--bk-copper-light) !important; }

/* ---- Back to top ---- */
.back-to-top { background-color: var(--bk-copper) !important; }
.back-to-top:hover { background-color: var(--bk-copper-dark) !important; }

/* ---- Accordion ---- */
.accordion .accordion-icon.card-header button {
    background: var(--bk-copper) !important;
    border: 2px solid var(--bk-copper) !important;
    color: #fff !important;
}
.accordion .accordion-icon.card-header button.collapsed {
    background: none !important;
    border: 2px solid #dfdfdf !important;
    color: var(--bk-graphite) !important;
}
.accordion .accordion-icon.card-header button.collapsed:hover {
    border-color: var(--bk-copper) !important;
    color: var(--bk-copper) !important;
}
.accordion .accordion-icon.card-header button:focus {
    box-shadow: 0 0 0 0.2rem rgba(217, 119, 6, .25) !important;
    outline: none !important;
}

/* ---- Header inner sections ---- */
.header-inner { padding: 80px 0; }
.header-inner-title h1 { font-size: 2.2rem; color: #fff; }

/* ---- Breadcrumb ----
   Override du template Worthy qui positionne `.header-inner .breadcrumb` en
   absolute (`bottom:-14%; left:50%`) pour faire une "pilule" flottante.
   Le parent `.header-inner` n'ayant pas `position:relative`, le breadcrumb
   se projetait au milieu de la page. On le remet dans le flux normal,
   centré sous le titre. */
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--bk-copper) !important; }
.breadcrumb-item.active span { color: var(--bk-copper) !important; }

.header-inner .breadcrumb {
    position: static;
    bottom: auto;
    left: auto;
    -webkit-transform: none;
            transform: none;
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 0;
    margin: 18px 0 0 0;
    border-radius: 0;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}
/* Sur les bannières hero (copper comme graphite), le fil d'Ariane reste
   discret en blanc semi-transparent — lisible sans concurrencer le titre.
   `!important` requis pour battre la règle générique `.breadcrumb-item a`
   et la classe `text-warning` posée dans le HTML d'origine. */
.header-inner .breadcrumb .breadcrumb-item a,
.header-inner .breadcrumb .breadcrumb-item a i {
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-transition: color 0.15s ease;
    transition: color 0.15s ease;
}
.header-inner .breadcrumb .breadcrumb-item a:hover,
.header-inner .breadcrumb .breadcrumb-item a:hover i {
    color: #ffffff !important;
    text-decoration: none;
}
.header-inner .breadcrumb .breadcrumb-item.active span {
    color: #ffffff !important;
    font-weight: 500;
}
.header-inner .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4) !important;
    padding: 0 0.55rem;
}

/* ---- Tables ---- */
.table thead.thead-dark { background: var(--bk-graphite); }
.table .bg-primary { background-color: var(--bk-copper) !important; }

/* ---- Forms ---- */
.form-control:focus {
    border-color: var(--bk-copper) !important;
    box-shadow: 0 0 0 .2rem rgba(217, 119, 6, .25) !important;
}

/* ---- Alerts ---- */
.alert-success { border-left: 4px solid var(--bk-copper); }

/* ---- Trial banner ---- */
.trial-banner {
    background: linear-gradient(90deg, var(--bk-copper-light) 0%, var(--bk-copper) 100%);
    color: #fff;
    padding: 12px 0;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
}
.trial-banner a { color: #fff; text-decoration: underline; }
.trial-banner a:hover { color: var(--bk-cream); }

/* ---- Cookie notice (information bandeau bas) ---- */
.bk-cookie-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 720px;
    margin: 0 auto;
    background: #ffffff;
    color: var(--bk-graphite, #111827);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--bk-copper, #D97706);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 14px 18px;
    z-index: 9998;
    font-size: 0.92rem;
    line-height: 1.45;
}
.bk-cookie-notice-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.bk-cookie-notice-text {
    flex: 1 1 320px;
    margin: 0;
    color: #4B5563;
}
.bk-cookie-notice-text strong { color: var(--bk-graphite, #111827); }
.bk-cookie-notice-link {
    margin-left: 6px;
    color: var(--bk-copper, #D97706);
    text-decoration: underline;
    white-space: nowrap;
}
.bk-cookie-notice-link:hover { color: #92400E; }
.bk-cookie-notice-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---- Politique cookies (page /cookies) - tables ---- */
.space-ptb table code {
    background: rgba(217, 119, 6, 0.08);
    color: var(--bk-copper, #D97706);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.88em;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .header-inner { padding: 50px 0; }
    .header-inner-title h1 { font-size: 1.8rem; }
    .pricing-price strong { font-size: 2.5rem; }
    .roi-calculator { padding: 20px; }

    .bk-cookie-notice {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 12px 14px;
        font-size: 0.85rem;
    }
    .bk-cookie-notice-inner { gap: 8px; }
    .bk-cookie-notice-btn { width: 100%; }
}

/* =========================================================================
 * A11y — WCAG AA contraste (M2.5 a11y fixes, 2026-06-01)
 * Bootstrap .text-muted = #6c757d → ratio 4.0:1 sur fond blanc (< seuil 4.5:1).
 * Override en #5a6268 → ratio 5.5:1 sur fond blanc, reste visuellement « muted ».
 * ========================================================================= */
.text-muted {
    color: #5a6268 !important;
}

/* =========================================================================
 * A11y — WCAG 1.4.1 liens distinguables (M2.5 a11y addendum, 2026-06-01)
 * Lighthouse flag : « Links rely on color to be distinguishable ». Ajoute
 * underline + bold sur les zones identifiées :
 *   - .alert : encarts contextuels (ex. « Vous êtes courtier RAC ? » sur modules)
 *   - .blog-content : corps Markdown rendu des articles de blog
 * Exclusion :not(.btn) pour préserver les boutons (.btn-primary, etc.)
 * qui sont déjà visuellement distinguables (fond/bordure/padding).
 * ========================================================================= */
.alert a:not(.btn),
.blog-content a:not(.btn) {
    text-decoration: underline;
    font-weight: 600;
}

/* =========================================================================
 * Nav mobile — fix contraste burger menu (2026-06-01)
 * Le template Worthy applique un fond bleu foncé sur .navbar-collapse en
 * breakpoint mobile (< 992px = Bootstrap navbar-expand-lg), avec les liens
 * en couleur graphite (cf. ligne 173 plus haut) → texte noir sur fond bleu
 * foncé = illisible. On force ici le menu mobile en fond blanc, bordure
 * haute copper (signature BankIris), texte graphite, hover copper —
 * cohérent avec le rendu desktop des liens.
 * ========================================================================= */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-collapse {
        background: #ffffff !important;
        border-top: 3px solid var(--bk-copper);
        border-radius: 0 0 8px 8px;
        margin-top: 12px;
        padding: 8px 20px 16px;
        box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
    }
    .navbar-expand-lg .navbar-collapse .nav-link {
        color: var(--bk-graphite) !important;
        padding: 14px 4px !important;
        border-bottom: 1px solid #f3f4f6;
        white-space: normal !important;
        font-size: 15px !important;
    }
    .navbar-expand-lg .navbar-collapse .nav-item:last-child .nav-link {
        border-bottom: none;
    }
    .navbar-expand-lg .navbar-collapse .nav-link:hover,
    .navbar-expand-lg .navbar-collapse .nav-link:focus,
    .navbar-expand-lg .navbar-collapse .nav-link.active {
        color: var(--bk-copper) !important;
    }
    /* CTA Mon Espace en mobile : visuellement distinct en bas du menu */
    .navbar-expand-lg .navbar-collapse .nav-link-mon-espace {
        background: var(--bk-cream);
        border-radius: 6px;
        margin-top: 8px;
        padding-left: 14px !important;
        border-bottom: none !important;
    }
    /* Dropdown Modules en mobile : on laisse Bootstrap/Popper gérer le positionnement
       (touche pas à position/float/transform sinon le dropdown ne s'ouvre plus).
       Mais le template Worthy applique un fond bleu foncé + texte clair + max-height
       avec scrollbar — on neutralise ces 3 effets ciblément (sans toucher au position). */
    .navbar-expand-lg .navbar-collapse .dropdown-menu {
        background-color: #ffffff !important;
        max-height: none !important;
        overflow: visible !important;
        min-width: 220px !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 6px 16px rgba(17, 24, 39, 0.10) !important;
    }
    .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
        background-color: transparent !important;
        color: var(--bk-graphite) !important;
        white-space: normal !important;
    }
    .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:hover,
    .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:focus {
        background-color: var(--bk-cream) !important;
        color: var(--bk-copper) !important;
    }
    .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-header {
        color: var(--bk-graphite-soft) !important;
        background-color: transparent !important;
    }
    .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-divider {
        border-top-color: #e5e7eb !important;
    }
}

/* =========================================================================
 * Carte auteur articles blog — signature E-E-A-T (2026-06-01)
 * Donne un accent copper/cream signature BankIris à la carte _AuthorCard
 * (rendue en bas des articles blog), au lieu du Bootstrap card générique.
 * Cohérent avec les encarts `.alert` palette copper du reste du site.
 * ========================================================================= */
.author-card {
    background: linear-gradient(135deg, #FFFBF5 0%, #FFFFFF 100%);
    border-left: 4px solid var(--bk-copper) !important;
}
.author-card h3 a { transition: color 0.2s; }
.author-card h3 a:hover { color: var(--bk-copper) !important; }