/* ============================================================= B-COCKPIT 360° — Thème de la verticale bancaire Fondation : @font-face, tokens --bq-*, styles de base, composants partagés par les pages /banque/. Scopé via .banque-page (posé sur ) — ADR-07 : aucune interference avec variables.css ni les 6 pages existantes. Source spec : Docs/ux-design-bcockpit360-2026-08-15.md (§2, §5) ============================================================= */ /* ---------- Polices auto-hébergées (variables, sous-ensemble latin) ---------- */ @font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-var-latin.woff2') format('woff2-variations'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-var-latin.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Tokens d'identité --bq-* (spec UX §2.2) ---------- */ .banque-page { /* Bleu Marine Institutionnel */ --bq-navy-950: #08152A; --bq-navy-900: #0B1F3A; --bq-navy-800: #12294D; --bq-navy-700: #1B3A66; --bq-navy-100: #E3E8F0; /* Or / Bronze */ --bq-gold-500: #C9A24B; /* decoratif + texte sur navy (6,9:1) */ --bq-gold-600: #9C7A2E; /* texte gold >= 18px sur fond clair */ --bq-gold-700: #7C5F22; /* texte gold < 18px sur fond clair */ /* Fonds */ --bq-paper: #F6F4EF; --bq-white: #FFFFFF; /* Texte */ --bq-ink: var(--bq-navy-900); --bq-ink-muted: var(--color-gray-600); /* Typographie */ --bq-font-display: 'Playfair Display', Georgia, serif; --bq-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-family: var(--bq-font-body); color: var(--bq-ink); background: var(--bq-white); } /* ---------- Styles de base ---------- */ .banque-page h1, .banque-page h2, .banque-page h3 { font-family: var(--bq-font-display); color: var(--bq-ink); line-height: 1.15; } .banque-page h3 { font-weight: var(--font-weight-semibold); } /* Playfair 600 : lisibilite a petite taille (spec UX §2.2) */ /* Neutralisation du .container flex global (header.css:71) — scopée au contenu et au footer de la verticale ; le header conserve son flex (nav) identique aux pages existantes. Bug latent préexistant du dépôt (revue UX incrément 1). */ .banque-page main .container, .banque-page footer .container { display: block; } /* Liens du contenu uniquement (header/footer conservent leurs couleurs existantes). .bq-btn est exclu : un lien-bouton garde la couleur de sa variante (corrige le conflit de spécificité relevé par la revue UX incrément 1). */ .banque-page main a:not(.bq-btn) { color: var(--bq-navy-700); } /* Focus visible partout (spec UX §6) */ .banque-page a:focus-visible, .banque-page button:focus-visible, .banque-page [tabindex]:focus-visible { outline: 2px solid var(--bq-navy-700); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Sections ---------- */ .bq-section { padding: var(--spacing-16) 0; } .bq-section--paper { background: var(--bq-paper); } .bq-section--navy { background: var(--bq-navy-900); color: var(--bq-white); } .bq-section--navy h2 { color: var(--bq-white); } .bq-section-head { max-width: 760px; margin: 0 auto var(--spacing-12); text-align: center; } .bq-section-head h2 { font-size: var(--font-size-4xl); margin-bottom: var(--spacing-4); } .bq-section-head p { font-size: var(--font-size-lg); color: var(--bq-ink-muted); } /* ---------- Hero ---------- */ .bq-hero { background: var(--bq-navy-900); color: var(--bq-white); padding: calc(var(--spacing-16) + var(--header-height)) 0 var(--spacing-16); text-align: center; } .bq-hero h1 { color: var(--bq-white); font-size: clamp(2rem, 5vw, var(--font-size-6xl)); max-width: 18ch; margin: 0 auto var(--spacing-6); } .bq-hero .bq-hero-sub { color: var(--bq-gold-500); font-size: var(--font-size-xl); max-width: 56ch; margin: 0 auto var(--spacing-10); } .bq-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--spacing-4); justify-content: center; } /* ---------- Boutons (spec UX §5 — variantes) ---------- */ .bq-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); min-height: 44px; /* cible tactile (spec UX §6) */ padding: var(--spacing-3) var(--spacing-8); border-radius: var(--radius-md); font-family: var(--bq-font-body); font-weight: var(--font-weight-semibold); text-decoration: none; cursor: pointer; transition: var(--transition-base); } .bq-btn--primary { background: var(--bq-navy-800); color: var(--bq-white); } .bq-btn--primary:hover { background: var(--bq-navy-700); } /* Or plein : reserve au CTA Programme Pilote — texte >= 18px requis (contraste 4,0:1, spec UX §4.2) */ .bq-btn--gold { background: var(--bq-gold-600); color: var(--bq-navy-900); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); } .bq-btn--gold:hover { background: var(--bq-gold-500); } .bq-btn--outline { background: transparent; color: var(--bq-navy-900); border: 1.5px solid var(--bq-gold-600); } .bq-btn--outline:hover { border-color: var(--bq-gold-700); color: var(--bq-gold-700); } /* Variante pour hero/sections sombres */ .bq-hero .bq-btn--outline, .bq-section--navy .bq-btn--outline { color: var(--bq-white); border-color: var(--bq-gold-600); } .bq-btn--link { background: none; border: none; padding: 0; color: var(--bq-navy-700); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Cards ---------- */ .bq-card { background: var(--bq-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-8); height: 100%; transition: var(--transition-base); } .bq-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .bq-card, .bq-btn { transition: none; } .bq-card:hover { transform: none; } } /* ---------- Iconographie (spec UX §2.3 — trait fin 1.5px, ligne, auto-hébergée) ---------- */ .bq-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--bq-navy-100); color: var(--bq-navy-800); margin-bottom: var(--spacing-4); } .bq-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .bq-icon--gold { background: var(--bq-navy-950); color: var(--bq-gold-500); } .bq-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Grille 3 colonnes — composant partagé (Accueil + Expertises) ---------- Historique : initialement dans banque-home.css, déplacée ici le 15/08 après constat que banque/expertises.html la réutilise sans charger banque-home.css. */ .bq-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-8); } .bq-grid-3 .bq-card h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-3); } .bq-grid-3 .bq-card p { color: var(--bq-ink-muted); } @media (max-width: 1023px) { .bq-grid-3 { grid-template-columns: 1fr; gap: var(--spacing-6); } } /* ---------- Encadré Programme Banque Pilote (spec UX §5) ---------- */ .bq-pilot { background: var(--bq-navy-800); border: 2px solid var(--bq-gold-500); border-radius: var(--radius-md); padding: var(--spacing-12); color: var(--bq-white); position: relative; } .bq-pilot-badge { display: inline-block; background: var(--bq-gold-700); /* 5,97:1 avec texte blanc — conforme toute taille (revue UX incrément 1) */ color: var(--bq-white); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); border-radius: var(--radius-full); padding: var(--spacing-2) var(--spacing-4); margin-bottom: var(--spacing-4); letter-spacing: 0.05em; } /* ---------- Bloc Héritage (récit — spec UX §5, pages Expertises) ---------- */ .bq-heritage-quote { background: var(--bq-paper); border-left: 3px solid var(--bq-gold-500); padding: var(--spacing-6); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-top: var(--spacing-4); } .bq-caption { font-size: var(--font-size-sm); color: var(--bq-ink-muted); border-top: 1px solid var(--bq-navy-100); padding-top: var(--spacing-3); margin-top: var(--spacing-6); } /* ---------- Bannière produit (Accueil §3) ---------- */ .bq-product-banner { background: var(--bq-navy-800); border-top: 3px solid var(--bq-gold-500); border-radius: var(--radius-md); color: var(--bq-white); padding: var(--spacing-12); text-align: center; } .bq-product-banner .bq-product-name { font-family: var(--bq-font-display); font-size: var(--font-size-5xl); color: var(--bq-white); margin-bottom: var(--spacing-4); }