/* ============================================================ ClientBase V2 · Themes — vraies modifications de DA Active via : - "default" → indigo classique (intact) - "artisan" → marque humaine, terracotta, serif, formes douces - "data" → dense, mono, lignes nettes, data-feel - "audace" → palette sage+terracotta, hors-zone SaaS Chaque thème modifie : · Tokens (couleurs, fonts, radius) · Sidebar (style, padding, fond) · Topbar (height, style) · Cards (bordures, ombres, radius) · Boutons (forme, padding) · Icons (stroke-width via CSS où possible) · Headers de section (typographie) ============================================================ */ /* ============================================================ THÈME ARTISAN — chaleureux, humain, soft ============================================================ */ :root[data-v2-theme="artisan"] { --bg: oklch(98.5% 0.012 70); --bg-alt: oklch(96.5% 0.018 70); --bg-section: oklch(97.5% 0.015 70); --surface: #FFFFFF; --line: oklch(89% 0.018 70); --line-strong: oklch(82% 0.022 70); --ink: oklch(22% 0.020 30); --ink-2: oklch(36% 0.020 30); --ink-3: oklch(52% 0.018 30); --ink-4: oklch(66% 0.015 30); --accent: oklch(55% 0.22 278); --accent-ink: oklch(42% 0.22 278); --accent-soft: oklch(95% 0.04 30); /* warm soft */ --accent-soft-2: oklch(90% 0.06 30); --accent-2: oklch(62% 0.15 35); /* terracotta principal */ --accent-2-soft: oklch(95% 0.05 35); --r-3: 18px; --r-4: 26px; --sh-1: 0 2px 6px rgba(120, 80, 40, 0.04), 0 1px 2px rgba(120, 80, 40, 0.03); --sh-2: 0 10px 28px -8px rgba(120, 80, 40, 0.10), 0 3px 8px rgba(120, 80, 40, 0.04); --sh-3: 0 30px 60px -22px rgba(120, 80, 40, 0.18); } /* Typographie Fraunces sur les titres */ :root[data-v2-theme="artisan"] body { letter-spacing: -0.014em; } :root[data-v2-theme="artisan"] h1, :root[data-v2-theme="artisan"] h2, :root[data-v2-theme="artisan"] h3 { font-family: "Fraunces", "Geist", Georgia, serif !important; font-weight: 500 !important; letter-spacing: -0.028em !important; } :root[data-v2-theme="artisan"] em { color: var(--accent-2) !important; font-family: "Fraunces", serif !important; font-style: italic; } /* Sidebar plus aérée + warm */ :root[data-v2-theme="artisan"] .app-sidebar { background: linear-gradient(180deg, oklch(97% 0.02 35) 0%, var(--bg-alt) 100%) !important; border-right: 1px solid var(--line); padding-top: 22px !important; } :root[data-v2-theme="artisan"] .cb-app-nav-group { gap: 4px !important; } :root[data-v2-theme="artisan"] .cb-app-nav-group-label { font-family: "Fraunces", serif !important; font-style: italic; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; } /* Topbar avec subtile ligne sous */ :root[data-v2-theme="artisan"] .app-topbar { background: var(--bg) !important; border-bottom: 1px solid var(--line); } :root[data-v2-theme="artisan"] .app-topbar-title { font-family: "Fraunces", serif !important; font-weight: 500; } /* Cards plus douces */ :root[data-v2-theme="artisan"] .card { border-radius: var(--r-4) !important; border-color: var(--line) !important; } /* Boutons primaires en terracotta */ :root[data-v2-theme="artisan"] .btn-accent, :root[data-v2-theme="artisan"] .btn-primary { background: var(--accent-2) !important; box-shadow: 0 10px 24px -8px oklch(62% 0.15 35 / 0.45) !important; } /* Tous les boutons : plus arrondis et padding plus aéré */ :root[data-v2-theme="artisan"] .btn { border-radius: 14px !important; letter-spacing: 0; } :root[data-v2-theme="artisan"] .btn-sm { border-radius: 10px !important; } /* Icons : stroke plus fin pour rendu plus délicat */ :root[data-v2-theme="artisan"] svg[stroke="currentColor"], :root[data-v2-theme="artisan"] .cb-icon svg { stroke-width: 1.5 !important; stroke-linecap: round; stroke-linejoin: round; } /* Badges plus arrondis */ :root[data-v2-theme="artisan"] .badge { border-radius: 999px !important; padding: 4px 11px !important; } /* Hero / sections un peu plus aérées */ :root[data-v2-theme="artisan"] .container { max-width: 1140px; } /* ============================================================ THÈME DATA — dense, technique, monospace, lignes nettes ============================================================ */ :root[data-v2-theme="data"] { --bg: #FFFFFF; --bg-alt: oklch(97.5% 0.005 260); --bg-section: oklch(98% 0.004 260); --line: oklch(89% 0.008 260); --line-strong: oklch(80% 0.012 260); --accent: oklch(50% 0.20 270); /* indigo plus saturé */ --accent-ink: oklch(40% 0.20 270); --accent-2: oklch(56% 0.13 165); /* sage pour vert/up */ --accent-2-soft: oklch(95% 0.03 165); --r-3: 10px; --r-4: 14px; /* radius serrés */ } /* Tout chiffre en mono cohérent */ :root[data-v2-theme="data"] [class*="num"], :root[data-v2-theme="data"] .stat-n, :root[data-v2-theme="data"] .stat-trend, :root[data-v2-theme="data"] [class*="-price"], :root[data-v2-theme="data"] [class*="-amount"] { font-family: "Geist Mono", ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; } /* Cards plus carrées, ombre minimaliste */ :root[data-v2-theme="data"] .card { border-radius: var(--r-3) !important; box-shadow: 0 1px 0 var(--line), 0 1px 3px rgba(15,18,30,0.04) !important; border-color: var(--line) !important; } /* Boutons carrés (radius 8px) */ :root[data-v2-theme="data"] .btn { border-radius: 8px !important; } :root[data-v2-theme="data"] .btn-sm { border-radius: 6px !important; } /* Sidebar avec border verticale fine + items denses */ :root[data-v2-theme="data"] .app-sidebar { background: var(--bg) !important; border-right: 1px solid var(--line); padding-top: 12px !important; } :root[data-v2-theme="data"] .cb-app-nav-group { gap: 1px !important; } :root[data-v2-theme="data"] .cb-app-nav-group-label { font-family: "Geist Mono", monospace !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; font-weight: 600 !important; } /* Topbar avec ligne fine + titre mono */ :root[data-v2-theme="data"] .app-topbar { background: var(--bg) !important; border-bottom: 1px solid var(--line); } :root[data-v2-theme="data"] .app-topbar-title { font-family: "Geist", sans-serif !important; letter-spacing: -0.02em; } /* Icons : trait plus épais (data-feel) */ :root[data-v2-theme="data"] svg[stroke="currentColor"] { stroke-width: 2 !important; } /* Stat trend up en sage */ :root[data-v2-theme="data"] .stat-trend.up, :root[data-v2-theme="data"] [class*="trend-up"] { color: var(--accent-2) !important; } /* Tableaux avec lignes (ressemble plus à un tableur) */ :root[data-v2-theme="data"] table th, :root[data-v2-theme="data"] table td { border-bottom: 1px solid var(--line); } /* Badges carrés */ :root[data-v2-theme="data"] .badge { border-radius: 4px !important; font-family: "Geist Mono", monospace !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: 0.06em; } /* ============================================================ THÈME AUDACE — sortir de l'indigo, éditorial, premium ============================================================ */ :root[data-v2-theme="audace"] { --bg: oklch(98.5% 0.008 100); --bg-alt: oklch(96% 0.015 100); --bg-section: oklch(97.5% 0.012 100); --surface: #FFFFFF; --line: oklch(89% 0.014 100); --line-strong: oklch(82% 0.020 100); --ink: oklch(22% 0.030 130); --ink-2: oklch(36% 0.025 130); --ink-3: oklch(52% 0.020 130); --ink-4: oklch(66% 0.016 130); --accent: oklch(48% 0.10 165); /* sage profond = primary */ --accent-ink: oklch(38% 0.10 165); --accent-soft: oklch(95% 0.03 165); --accent-soft-2: oklch(89% 0.05 165); --accent-2: oklch(60% 0.16 40); /* terracotta */ --accent-2-soft: oklch(96% 0.05 40); --r-3: 14px; --r-4: 22px; } /* Fraunces italic large sur les titres */ :root[data-v2-theme="audace"] body { letter-spacing: -0.014em; } :root[data-v2-theme="audace"] h1, :root[data-v2-theme="audace"] h2, :root[data-v2-theme="audace"] h3, :root[data-v2-theme="audace"] [class*="-h1"] { font-family: "Fraunces", "Geist", Georgia, serif !important; font-weight: 400 !important; letter-spacing: -0.028em !important; } :root[data-v2-theme="audace"] em { color: var(--accent-2) !important; font-family: "Fraunces", serif !important; font-style: italic; font-weight: 500; } /* Sidebar épurée sans fond contrasté */ :root[data-v2-theme="audace"] .app-sidebar { background: var(--bg) !important; border-right: 1px solid var(--line); padding-top: 30px !important; } :root[data-v2-theme="audace"] .cb-app-nav-group { gap: 6px !important; } :root[data-v2-theme="audace"] .cb-app-nav-group + .cb-app-nav-group { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); } :root[data-v2-theme="audace"] .cb-app-nav-group-label { font-family: "Fraunces", serif !important; font-style: italic !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--ink-2) !important; } /* Topbar avec underline subtle */ :root[data-v2-theme="audace"] .app-topbar { background: var(--bg) !important; border-bottom: 1px solid var(--line); } :root[data-v2-theme="audace"] .app-topbar-title { font-family: "Fraunces", serif !important; font-weight: 400 !important; font-size: 19px !important; } /* Cards minimalistes — pas de bordure, juste fond */ :root[data-v2-theme="audace"] .card { border: 1px solid var(--line) !important; border-radius: var(--r-4) !important; box-shadow: 0 14px 40px -22px rgba(60, 70, 50, 0.16) !important; } /* Boutons : terracotta principal, plus carrés */ :root[data-v2-theme="audace"] .btn-accent, :root[data-v2-theme="audace"] .btn-primary { background: var(--accent-2) !important; border-radius: 999px !important; font-weight: 500 !important; letter-spacing: 0 !important; } :root[data-v2-theme="audace"] .btn { border-radius: 999px !important; } :root[data-v2-theme="audace"] .btn-ghost { border: 1px solid var(--line-strong) !important; background: transparent !important; } /* Icons plus délicats */ :root[data-v2-theme="audace"] svg[stroke="currentColor"] { stroke-width: 1.5 !important; } /* Badges éditoriaux */ :root[data-v2-theme="audace"] .badge { border-radius: 4px !important; font-family: "Fraunces", serif !important; font-style: italic !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; padding: 3px 9px !important; } /* ============================================================ V2 Toolkit — FAB + menu + modals (commun à tous les thèmes) ============================================================ */ .v2-fab-wrap{ position: fixed; right: 16px; bottom: 70px; z-index: 998; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; } .v2-fab{ width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, oklch(58% 0.22 290) 100%); color: #fff; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -8px oklch(55% 0.22 278 / 0.5); cursor: pointer; transition: transform .25s cubic-bezier(.32,.72,0,1), box-shadow .2s ease; } /* Le FAB suit le thème */ :root[data-v2-theme="artisan"] .v2-fab, :root[data-v2-theme="audace"] .v2-fab { background: linear-gradient(135deg, var(--accent-2) 0%, oklch(70% 0.16 50) 100%); box-shadow: 0 14px 30px -8px oklch(60% 0.16 40 / 0.5); } :root[data-v2-theme="data"] .v2-fab { border-radius: 14px; } .v2-fab:hover{ transform: translateY(-2px) scale(1.04); } .v2-fab:active{ transform: scale(0.94); } .v2-fab-menu{ display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px; box-shadow: 0 24px 50px -16px rgba(15,18,30,0.20); width: 290px; animation: v2fabIn .35s cubic-bezier(.32,.72,0,1) both; } @keyframes v2fabIn{ from{ opacity:0; transform: translateY(10px) scale(0.96); } to{ opacity:1; transform: none; } } .v2-fab-it{ display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: transparent; border: none; cursor: pointer; border-radius: 12px; text-align: left; transition: background .15s ease; } .v2-fab-it:hover{ background: var(--bg-alt); } .v2-fab-it-i{ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; } .v2-fab-it-c{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .v2-fab-it-t{ font-size: 13.5px; font-weight: 580; color: var(--ink); letter-spacing: -0.005em; } .v2-fab-it-d{ font-size: 11.5px; color: var(--ink-3); } @media (max-width: 720px){ .v2-fab-wrap{ bottom: 12px; right: 12px; } .v2-fab{ width: 48px; height: 48px; } .v2-fab-menu{ width: calc(100vw - 24px); max-width: 320px; } } /* === Page Guide : sections en alternance gauche/droite === En desktop, GuideSection bascule entre "texte gauche / mock droite" et l'inverse pour casser le rythme. En mobile, on revient à une colonne unique avec toujours texte → mock (ordre narratif respecté). */ @media (max-width: 720px) { .guide-row { grid-template-columns: 1fr !important; gap: 24px !important; } .guide-row > div:first-child { order: 1 !important; } .guide-row > div:last-child { order: 2 !important; } } /* Modal shell */ .v2-modal-bg{ position: fixed; inset: 0; z-index: 9999; background: rgba(15,18,30,0.50); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: v2bgIn .25s ease both; } @keyframes v2bgIn{ from{ opacity:0 } to{ opacity:1 } } .v2-modal{ background: var(--surface); border-radius: 20px; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px -20px rgba(15,18,30,0.35); animation: v2modalIn .35s cubic-bezier(.32,.72,0,1) both; } @keyframes v2modalIn{ from{ opacity:0; transform: translateY(20px) scale(0.96); } to{ opacity:1; transform: none; } } .v2-modal-h{ padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .v2-modal-x{ display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-alt); border: none; color: var(--ink-2); cursor: pointer; transition: background .15s ease; } .v2-modal-x:hover{ background: var(--line); color: var(--ink); } .v2-modal-body{ padding: 20px 22px 22px; overflow-y: auto; } @media (max-width: 720px){ .v2-modal{ max-height: calc(100vh - 24px); } .v2-modal-body{ padding: 16px 16px 20px; } } /* ============================================================ PWA install hint — bandeau custom (iOS + Chrome fallback) ============================================================ */ .v2-pwa-banner{ position: fixed; left: 12px; right: 12px; bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 22px 50px -18px rgba(15,18,30,0.25); z-index: 997; max-width: 480px; margin: 0 auto; animation: v2pwaIn .45s cubic-bezier(.32,.72,0,1) both; } @keyframes v2pwaIn{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform: none; } } .v2-pwa-i{ width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), oklch(58% 0.22 290)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; } .v2-pwa-c{ flex: 1; min-width: 0; } .v2-pwa-t{ font-size: 13.5px; font-weight: 580; color: var(--ink); } .v2-pwa-d{ font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; } .v2-pwa-x{ width: 26px; height: 26px; border-radius: 50%; background: var(--bg-alt); border: none; color: var(--ink-3); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* Theme picker — désormais intégré dans le dev panel V2 (cf. index.html). Anciennes classes .v2-tp/.v2-tp-btn supprimées car remplacées par un panneau caché derrière un bouton flottant 🔧. */