/* Facturalia — habillage de marque : boutons et sélecteur de thème. La classe `dark` est posée par le script inline de . */ /* Bouton principal : le dégradé du logo (brand/README.md), qui glisse vers le vert au survol. */ .btn-brand { color: #fff; background-image: linear-gradient(135deg, #2570C9 0%, #1585C2 45%, #17BCA5 100%); background-size: 160% 100%; background-position: 0 0; box-shadow: 0 1px 3px rgba(12, 49, 91, .25); transition: background-position .3s ease, box-shadow .3s ease, transform .15s ease; } .btn-brand:hover { background-position: 100% 0; box-shadow: 0 4px 14px rgba(23, 188, 165, .35); } .btn-brand:active { transform: translateY(1px); } .btn-brand:focus-visible { outline: 2px solid #17BCA5; outline-offset: 2px; } /* Sélecteur de thème (auto / clair / sombre), repris de linkinfo. */ .theme-switch { position: relative; display: inline-flex; align-items: center; padding: 3px; border-radius: 9999px; background-color: rgba(255, 255, 255, .6); border: 1px solid #d4d4d8; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04); } html.dark .theme-switch { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } .theme-switch__thumb { position: absolute; top: 3px; left: 3px; width: 32px; height: 28px; border-radius: 9999px; background: linear-gradient(135deg, #2570C9 0%, #1585C2 45%, #17BCA5 100%); box-shadow: 0 1px 3px rgba(12, 49, 91, .3); transition: transform .28s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } html.dark .theme-switch__thumb { background: linear-gradient(135deg, #1585C2, #2DCF9F); box-shadow: 0 1px 8px rgba(45, 207, 159, .45); } .theme-switch[data-theme-pref="auto"] .theme-switch__thumb { transform: translateX(0); } .theme-switch[data-theme-pref="light"] .theme-switch__thumb { transform: translateX(32px); } .theme-switch[data-theme-pref="dark"] .theme-switch__thumb { transform: translateX(64px); } .theme-switch__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: 0; background: none; border-radius: 9999px; cursor: pointer; color: #52525b; transition: color .2s ease; } html.dark .theme-switch__btn { color: #a1a1aa; } .theme-switch__btn:hover { color: #1585C2; } html.dark .theme-switch__btn:hover { color: #17BCA5; } .theme-switch__btn[aria-checked="true"], html.dark .theme-switch__btn[aria-checked="true"] { color: #fff; } .theme-switch__btn:focus-visible { outline: 2px solid #1585C2; outline-offset: 2px; } .theme-switch__btn svg { width: 15px; height: 15px; } .theme-switch__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } /* Tant que le JS n'a pas pris la main, le curseur ne doit pas s'animer. */ .theme-switch:not([data-ready]) .theme-switch__thumb { transition: none; } /* Transition douce lors du basculement (posée par JS le temps du switch). */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease, box-shadow .3s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; } .theme-switch__thumb { transition: none !important; } } /* -------------------------------------------------------------------------- Graphiques du tableau de bord — palette validée (clair / sombre) -------------------------------------------------------------------------- */ :root { --chart-1: #1585C2; /* série 1 : facturé */ --chart-2: #2DCF9F; /* série 2 : encaissé (vert menthe du logo) */ --chart-ramp-1: #6BB8E4; /* rampe ordinale, du moins au plus sévère */ --chart-ramp-2: #3A9FD8; --chart-ramp-3: #1585C2; --chart-ramp-4: #0F66A8; --chart-ramp-5: #0C315B; --chart-grid: #e4e4e7; --chart-text: #52525b; --chart-surface: #ffffff; } html.dark { --chart-1: #0F79B5; --chart-2: #12A995; --chart-ramp-1: #0A5E9F; --chart-ramp-2: #1585C2; --chart-ramp-3: #3FA3DB; --chart-ramp-4: #7CC4EA; --chart-ramp-5: #B8E0F5; --chart-grid: rgba(255, 255, 255, .1); --chart-text: #a1a1aa; --chart-surface: #0b2440; } .chart { position: relative; } .chart svg { display: block; max-width: 100%; height: auto; overflow: visible; } .chart svg[viewBox]:not([width]) { width: 100%; } .chart .bar { transition: opacity .15s ease; cursor: default; } .chart .bar.is-dim { opacity: .55; } .chart .grid line { stroke: var(--chart-grid); stroke-width: 1; } .chart .axis text, .chart .label { fill: var(--chart-text); font-size: 11px; } .chart .value { fill: var(--chart-text); font-size: 11px; font-variant-numeric: tabular-nums; } .chart-tooltip { position: absolute; pointer-events: none; z-index: 20; min-width: 9rem; background: var(--chart-surface); border: 1px solid var(--chart-grid); border-radius: .75rem; box-shadow: 0 8px 24px rgba(12, 49, 91, .18); padding: .5rem .75rem; font-size: 12px; line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; } .chart-tooltip.is-visible { opacity: 1; transform: none; } .chart-tooltip .tt-title { color: var(--chart-text); margin-bottom: .25rem; } .chart-tooltip .tt-row { display: flex; align-items: center; gap: .5rem; } .chart-tooltip .tt-key { width: 12px; height: 2px; border-radius: 1px; flex: none; } .chart-tooltip .tt-value { font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; } .chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 12px; color: var(--chart-text); } .chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; }