TypeScript 50.6%
JavaScript 46.1%
SQL 2.1%
Shell 0.6%
CSS 0.5%
1@import "tailwindcss";23/* ───────── Toveli design tokens (maquette toveli.png, 2026-10-17) ─────────4 Direction : luxe discret, convivialité québécoise, technologie invisible.5 Rouge signature + blanc cassé + gris encre ; contraste AA vérifié. */6:root {7 --tv-red: #e0263c; /* accent principal (logo, CTA, prix) */8 --tv-red-dark: #b81d30; /* hover / texte sur fond clair (AA 6.1:1) */9 --tv-red-soft: #fdeef0; /* fonds de badges */10 --tv-ink: #15181d; /* texte principal */11 --tv-ink-2: #4b5260; /* texte secondaire (AA 7.6:1) */12 --tv-ink-3: #7a8190; /* texte tertiaire / libellés (AA 4.6:1) */13 --tv-line: #e6e8ec; /* bordures */14 --tv-bg: #ffffff;15 --tv-bg-2: #f6f7f9; /* fonds de sections */16 --tv-green: #1f9d55;17 --tv-green-soft: #e8f6ee;18 --tv-amber: #c77700;19 --tv-amber-soft: #fff4e0;20 --tv-blue: #2563eb;21 --tv-blue-soft: #e8efff;22 --tv-radius: 14px;23 --tv-radius-sm: 10px;24 --tv-shadow: 0 1px 2px rgba(21,24,29,.05), 0 8px 24px -12px rgba(21,24,29,.18);25 --background: var(--tv-bg);26 --foreground: var(--tv-ink);27}2829@theme inline {30 --color-background: var(--background);31 --color-foreground: var(--foreground);32 --color-brand: var(--tv-red);33 --color-brand-dark: var(--tv-red-dark);34 --color-brand-soft: var(--tv-red-soft);35 --color-ink: var(--tv-ink);36 --color-ink-2: var(--tv-ink-2);37 --color-ink-3: var(--tv-ink-3);38 --color-line: var(--tv-line);39 --color-surface: var(--tv-bg);40 --color-surface-2: var(--tv-bg-2);41 --color-good: var(--tv-green);42 --color-good-soft: var(--tv-green-soft);43 --color-warn: var(--tv-amber);44 --color-warn-soft: var(--tv-amber-soft);45 --color-info: var(--tv-blue);46 --color-info-soft: var(--tv-blue-soft);47 --radius-card: var(--tv-radius);48 --radius-sm: var(--tv-radius-sm);49 --shadow-card: var(--tv-shadow);50 --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;51}5253html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }54body {55 background: var(--background);56 color: var(--foreground);57 font-family: var(--font-sans);58 font-feature-settings: "cv11", "ss01", "tnum";59 line-height: 1.5;60}6162/* Composants de base */63.tv-card { background: var(--tv-bg); border: 1px solid var(--tv-line); border-radius: var(--tv-radius); box-shadow: var(--tv-shadow); }64.tv-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--tv-line); border-radius: 999px; padding: .35rem .8rem; font-size: .8125rem; font-weight: 500; color: var(--tv-ink-2); background: #fff; white-space: nowrap; }65.tv-chip[data-active="true"], .tv-chip:hover { border-color: var(--tv-red); color: var(--tv-red-dark); background: var(--tv-red-soft); }66.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 999px; padding: .6rem 1.15rem; font-weight: 600; font-size: .9rem; transition: background .15s, color .15s, transform .05s; }67.tv-btn:active { transform: translateY(1px); }68.tv-btn-primary { background: var(--tv-red); color: #fff; }69.tv-btn-primary:hover { background: var(--tv-red-dark); }70.tv-btn-ghost { background: #fff; color: var(--tv-ink); border: 1px solid var(--tv-line); }71.tv-btn-ghost:hover { border-color: var(--tv-ink-3); }72.tv-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .6rem; font-size: .75rem; font-weight: 600; }73.tv-price { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }74.tv-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tv-ink-3); font-weight: 600; }75.tv-input { width: 100%; border: 1px solid var(--tv-line); border-radius: 999px; padding: .65rem 1rem .65rem 2.6rem; background: #fff; color: var(--tv-ink); outline: none; }76.tv-input:focus { border-color: var(--tv-red); box-shadow: 0 0 0 3px var(--tv-red-soft); }77.tv-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--tv-line); overflow-x: auto; scrollbar-width: none; }78.tv-tabs::-webkit-scrollbar { display: none; }79.tv-tab { padding: .7rem 0; font-size: .9rem; font-weight: 600; color: var(--tv-ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }80.tv-tab[aria-selected="true"], .tv-tab[data-active="true"] { color: var(--tv-red-dark); border-color: var(--tv-red); }81.tv-skeleton { background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%); background-size: 200% 100%; animation: tv-sh 1.2s infinite; border-radius: var(--tv-radius-sm); }82@keyframes tv-sh { to { background-position: -200% 0; } }83.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }84:focus-visible { outline: 2px solid var(--tv-red); outline-offset: 2px; border-radius: 4px; }85@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }8687/* MapLibre */88.maplibregl-ctrl-attrib { font-size: 10px !important; }89.tv-marker { background: #fff; border: 1.5px solid var(--tv-red); color: var(--tv-red-dark); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; box-shadow: var(--tv-shadow); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }90.tv-marker:hover, .tv-marker[data-active="true"] { background: var(--tv-red); color: #fff; }91