/* ========================================================= BillXpert - THEME GLOBAL (sombre / clair) --------------------------------------------------------- - Centralise les couleurs & styles communs (header, footer, boutons, liens, effets globaux). - Toutes les pages peuvent se baser sur ces variables. - Thème sombre par défaut, thème clair via .theme-light sur ou . ========================================================= */ /* ------------------------------ 1) PALETTE & TOKENS DE BASE ------------------------------ */ /* Couleurs "marque" (stables, indépendantes du thème) */ :root { --bx-brand-navy: #0d1b2a; /* même fond que le header de Conditions */ --bx-brand-navy-2: #14223b; /* fond de la 1ère section Conditions */ --bx-brand-blue: #2563eb; --bx-brand-blue-deep: #1e3a8a; --bx-brand-sky: #60a5fa; /* Radii & divers */ --bx-radius-lg: 18px; --bx-radius-xl: 22px; } /* THEME SOMBRE (par défaut) */ :root, html.theme-dark, body.theme-dark { color-scheme: dark; /* Fond global : même couleur que le header (comme Conditions) */ --bx-bg-main: var(--bx-brand-navy); --bx-bg-solid: var(--bx-brand-navy); --bx-bg-soft: var(--bx-brand-navy-2); /* Surfaces (cartes, blocs) alignées sur navy / navy-2 */ --bx-surface: var(--bx-brand-navy-2); --bx-surface-soft: var(--bx-brand-navy); --bx-surface-strong: #020617; --bx-card: var(--bx-brand-navy-2); /* Texte */ --bx-text: #e8eef6; --bx-text-dim: #c8d2df; --bx-text-muted: rgba(148, 163, 184, 0.95); /* Liens & accents */ --bx-link: #dbe8ff; --bx-link-hover: #ffffff; --bx-accent: var(--bx-brand-blue); --bx-accent-soft: var(--bx-brand-sky); /* Bordures & glass */ --bx-border-subtle: rgba(255, 255, 255, 0.06); --bx-border-strong: rgba(31, 41, 55, 0.9); --bx-border-accent: rgba(96, 165, 250, 0.9); --bx-glass: rgba(255, 255, 255, 0.06); /* Header / footer */ --bx-header-bg: var(--bx-brand-navy); --bx-header-panel-bg: var(--bx-brand-navy-2); --bx-footer-bg: var(--bx-brand-navy); --bx-header-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); --bx-footer-shadow: 0 -8px 20px rgba(0, 0, 0, 0.5); /* Boutons verre (CTA header, etc.) */ --bx-btn-glass-fg: #e5f0ff; --bx-btn-glass-bg: radial-gradient( circle at 0% 0%, rgba(96, 165, 250, 0.45), transparent 55% ), rgba(255, 255, 255, 0.06); --bx-btn-glass-border: rgba(96, 165, 250, 0.7); --bx-btn-glass-hover-fg: #0b1220; --bx-btn-glass-hover-bg: linear-gradient(135deg, #60a5fa, #38bdf8); --bx-btn-glass-hover-border: rgba(191, 219, 254, 1); /* Tokens rétrocompatibles pour les pages existantes */ --bx-navy: var(--bx-brand-navy); --bx-navy-2: var(--bx-brand-navy-2); --bx-blue: var(--bx-brand-blue); --bx-sky: var(--bx-brand-sky); --bx-border: rgba(255, 255, 255, 0.12); } /* THEME CLAIR (inversion des lettres / fonds) */ html.theme-light, body.theme-light { color-scheme: light; --bx-bg-main: #f3f4f6; --bx-bg-solid: #f9fafb; --bx-bg-soft: #e5edf7; --bx-surface: #ffffff; --bx-surface-soft: #f3f4f6; --bx-surface-strong: #e5edf7; --bx-card: #ffffff; --bx-text: #0f172a; --bx-text-dim: #4b5563; --bx-text-muted: #6b7280; /* Liens : un bleu assez foncé pour rester lisible en petit */ --bx-link: #1f3a8a; --bx-link-hover: #111827; --bx-accent: #2563eb; --bx-accent-soft: #60a5fa; --bx-border-subtle: rgba(15, 23, 42, 0.08); --bx-border-strong: rgba(15, 23, 42, 0.15); --bx-border-accent: rgba(37, 99, 235, 0.4); --bx-glass: rgba(15, 23, 42, 0.03); --bx-header-bg: #ffffff; --bx-header-panel-bg: #e5edf7; --bx-footer-bg: #ffffff; --bx-header-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); --bx-footer-shadow: 0 -8px 20px rgba(15, 23, 42, 0.12); --bx-btn-glass-fg: #0f172a; --bx-btn-glass-bg: radial-gradient( circle at 0% 0%, rgba(37, 99, 235, 0.12), transparent 55% ), rgba(255, 255, 255, 0.9); --bx-btn-glass-border: rgba(37, 99, 235, 0.45); --bx-btn-glass-hover-fg: #f9fafb; --bx-btn-glass-hover-bg: linear-gradient(135deg, #2563eb, #1e40af); --bx-btn-glass-hover-border: rgba(15, 23, 42, 0.9); /* Tokens rétrocompatibles */ --bx-navy: #ffffff; --bx-navy-2: #e5edf7; --bx-blue: #2563eb; --bx-sky: #60a5fa; --bx-border: rgba(15, 23, 42, 0.08); } /* ------------------------------------------------- 2) RESET GLOBAL & FOND / TEXTE PAR DEFAUT ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; } body { background: var(--bx-bg-main); color: var(--bx-text); } /* Liens génériques (hors styles spécifiques) */ a { color: var(--bx-link); text-decoration: none; } a:hover { color: var(--bx-link-hover); } /* ------------------------------------------------- 3) HEADER GLOBAL (barre + panneau + boutons) ------------------------------------------------- */ /* Ancienne barre simple (classe utilisée avant) */ .bx-header-bar { background-color: var(--bx-header-bg); box-shadow: var(--bx-header-shadow); border-bottom: 1px solid var(--bx-border-subtle); } /* Nouveau header partiel PHP : on applique les mêmes tokens */ .bx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--bx-text); } .bx-header-inner { position: relative; } .bx-header-main { background-color: var(--bx-header-bg); box-shadow: var(--bx-header-shadow); border-bottom: 1px solid var(--bx-border-subtle); } .bx-header-main-row { max-width: 1120px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bx-header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .bx-header-logo img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); } .bx-header-logo-text { display: flex; flex-direction: column; line-height: 1.1; } .bx-header-logo-title { font-weight: 600; letter-spacing: -0.02em; font-size: 15px; color: var(--bx-text); } .bx-header-logo-sub { font-size: 11px; color: var(--bx-text-muted); } /* Nav principale */ .bx-header-nav { display: none; align-items: center; gap: 24px; font-size: 14px; color: var(--bx-text-dim); } .bx-header-nav a { text-decoration: none; color: inherit; transition: color 0.18s ease-out; } .bx-header-nav a:hover { color: var(--bx-link-hover); } /* visible à partir de 768px (desktop) */ @media (min-width: 768px) { .bx-header-nav { display: flex; } } /* Panneau déroulant */ .bx-header-panel-wrap { position: absolute; left: 0; right: 0; top: 100%; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s ease-out, transform 0.25s ease-out; } .bx-header-inner:hover .bx-header-panel-wrap { opacity: 1; transform: translateY(0); pointer-events: auto; } .bx-header-panel { background-color: var(--bx-header-panel-bg); border-top: 1px solid var(--bx-border-subtle); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6); } .bx-header-panel-inner { max-width: 1120px; margin: 0 auto; padding: 16px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 12px; color: var(--bx-text-dim); } @media (min-width: 1024px) { .bx-header-panel-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .bx-header-panel-title { color: var(--bx-text); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } /* ------------------------------ Liens de menu (header / footer) ------------------------------ */ .bx-menu-link { display: block; padding: 0.35rem 0.55rem; border-radius: 0.65rem; color: var(--bx-link); background: transparent; transition: all 0.18s ease-out; border: 1px solid transparent; } .bx-menu-link:hover { background: var(--bx-glass); border-color: var(--bx-border-accent); color: var(--bx-link-hover); box-shadow: 0 0 8px rgba(96, 165, 250, 0.4), inset 0 0 12px rgba(96, 165, 250, 0.2); } /* ------------------------------ Bouton "verre" premium ------------------------------ */ .bx-btn-glass { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.4rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; color: var(--bx-btn-glass-fg); text-decoration: none; background: var(--bx-btn-glass-bg); border: 1px solid var(--bx-btn-glass-border); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.7), 0 8px 20px rgba(15, 23, 42, 0.8); transition: all 0.22s ease-out, box-shadow 0.28s ease-out; } .bx-btn-glass:hover { color: var(--bx-btn-glass-hover-fg); background: var(--bx-btn-glass-hover-bg); border-color: var(--bx-btn-glass-hover-border); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.8), 0 14px 30px rgba(37, 99, 235, 0.85); transform: translateY(-1px) scale(1.03); } /* ------------------------------------------------- 4) FOOTER GLOBAL ------------------------------------------------- */ .bx-footer { background-color: var(--bx-footer-bg); color: rgba(255, 255, 255, 0.75); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; border-top: 1px solid var(--bx-border-subtle); box-shadow: var(--bx-footer-shadow); margin-top: 0; font-size: 14px; } /* En thème clair, on force du texte foncé dans le footer */ html.theme-light .bx-footer, body.theme-light .bx-footer { color: var(--bx-text-dim); } .bx-footer-main { max-width: 1120px; margin: 0 auto; padding: 40px 16px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 24px; } @media (max-width: 800px) { .bx-footer-main { grid-template-columns: 1fr; } } .bx-footer-logo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .bx-footer-logo-row img { width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); } .bx-footer-title { font-weight: 600; color: var(--bx-text); } .bx-footer-text { color: var(--bx-text-dim); line-height: 1.6; margin: 0; } .bx-footer-col-title { font-weight: 500; color: var(--bx-text); margin-bottom: 12px; } .bx-footer ul { list-style: none; margin: 0; padding: 0; } .bx-footer li + li { margin-top: 6px; } .bx-footer-link { display: inline-block; padding: 4px 6px; border-radius: 10px; color: var(--bx-link); text-decoration: none; border: 1px solid transparent; background: transparent; transition: all 0.18s ease-out; font-size: 14px; } .bx-footer-link:hover { background: var(--bx-glass); border-color: var(--bx-border-accent); color: var(--bx-link-hover); box-shadow: 0 0 8px rgba(96, 165, 250, 0.4), inset 0 0 12px rgba(96, 165, 250, 0.2); } .bx-footer-bottom { border-top: 1px solid var(--bx-border-subtle); padding: 12px 16px 14px; text-align: center; font-size: 12px; color: var(--bx-text-muted); } /* ------------------------------------------------- 5) TOKENS POUR LES PAGES EXISTANTES (ex : accueil) ------------------------------------------------- */ /* Rayon commun pour les anciennes cartes / sections */ html.theme-dark, body.theme-dark, html.theme-light, body.theme-light { --bx-radius: var(--bx-radius-lg); } /* ------------------------------------------------- 6) EFFETS GLOBAUX : ANIMATIONS / REVEAL / SPLIT ------------------------------------------------- */ /* Animation simple d’apparition de page */ [data-bx-page-anim] { opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease-out, transform 0.35s ease-out; } .bx-page-visible { opacity: 1; transform: translateY(0); } /* Effets lettres / reveal */ @media (prefers-reduced-motion: no-preference) { .bx-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.45s ease, transform 0.45s ease; will-change: opacity, transform; } .bx-reveal.in { opacity: 1; transform: none; } .bx-reveal.out { opacity: 0; transform: translateY(18px); } .bx-split { display: inline-block; word-break: keep-all; overflow-wrap: normal; hyphens: none; } .bx-word { display: inline-block; white-space: nowrap; } .bx-char { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; white-space: pre; } .bx-split.in .bx-char { opacity: 1; transform: none; } .bx-split.out .bx-char { opacity: 0; transform: translateY(14px); } } /* ------------------------------------------------- 7) OVERRIDES DE LISIBILITÉ EN THÈME CLAIR ------------------------------------------------- */ /* En clair, tout le texte fin / secondaire doit rester bien foncé */ html.theme-light body { color: var(--bx-text); } html.theme-light .bx-section-sub, html.theme-light .bx-status-progress-label, html.theme-light .bx-status-list, html.theme-light .bx-blog-meta, html.theme-light .bx-blog-excerpt, html.theme-light .bx-blog-link { color: var(--bx-text-dim); } html.theme-light .bx-blog-link:hover { color: var(--bx-link-hover); }