@import "tailwindcss";

/* ───────── Toveli design tokens (maquette toveli.png, 2026-10-17) ─────────
   Direction : luxe discret, convivialité québécoise, technologie invisible.
   Rouge signature + blanc cassé + gris encre ; contraste AA vérifié. */
:root {
  --tv-red: #e0263c;          /* accent principal (logo, CTA, prix) */
  --tv-red-dark: #b81d30;     /* hover / texte sur fond clair (AA 6.1:1) */
  --tv-red-soft: #fdeef0;     /* fonds de badges */
  --tv-ink: #15181d;          /* texte principal */
  --tv-ink-2: #4b5260;        /* texte secondaire (AA 7.6:1) */
  --tv-ink-3: #7a8190;        /* texte tertiaire / libellés (AA 4.6:1) */
  --tv-line: #e6e8ec;         /* bordures */
  --tv-bg: #ffffff;
  --tv-bg-2: #f6f7f9;         /* fonds de sections */
  --tv-green: #1f9d55;
  --tv-green-soft: #e8f6ee;
  --tv-amber: #c77700;
  --tv-amber-soft: #fff4e0;
  --tv-blue: #2563eb;
  --tv-blue-soft: #e8efff;
  --tv-radius: 14px;
  --tv-radius-sm: 10px;
  --tv-shadow: 0 1px 2px rgba(21,24,29,.05), 0 8px 24px -12px rgba(21,24,29,.18);
  --background: var(--tv-bg);
  --foreground: var(--tv-ink);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-brand: var(--tv-red);
  --color-brand-dark: var(--tv-red-dark);
  --color-brand-soft: var(--tv-red-soft);
  --color-ink: var(--tv-ink);
  --color-ink-2: var(--tv-ink-2);
  --color-ink-3: var(--tv-ink-3);
  --color-line: var(--tv-line);
  --color-surface: var(--tv-bg);
  --color-surface-2: var(--tv-bg-2);
  --color-good: var(--tv-green);
  --color-good-soft: var(--tv-green-soft);
  --color-warn: var(--tv-amber);
  --color-warn-soft: var(--tv-amber-soft);
  --color-info: var(--tv-blue);
  --color-info-soft: var(--tv-blue-soft);
  --radius-card: var(--tv-radius);
  --radius-sm: var(--tv-radius-sm);
  --shadow-card: var(--tv-shadow);
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "tnum";
  line-height: 1.5;
}

/* Composants de base */
.tv-card { background: var(--tv-bg); border: 1px solid var(--tv-line); border-radius: var(--tv-radius); box-shadow: var(--tv-shadow); }
.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; }
.tv-chip[data-active="true"], .tv-chip:hover { border-color: var(--tv-red); color: var(--tv-red-dark); background: var(--tv-red-soft); }
.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; }
.tv-btn:active { transform: translateY(1px); }
.tv-btn-primary { background: var(--tv-red); color: #fff; }
.tv-btn-primary:hover { background: var(--tv-red-dark); }
.tv-btn-ghost { background: #fff; color: var(--tv-ink); border: 1px solid var(--tv-line); }
.tv-btn-ghost:hover { border-color: var(--tv-ink-3); }
.tv-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .6rem; font-size: .75rem; font-weight: 600; }
.tv-price { font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tv-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tv-ink-3); font-weight: 600; }
.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; }
.tv-input:focus { border-color: var(--tv-red); box-shadow: 0 0 0 3px var(--tv-red-soft); }
.tv-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--tv-line); overflow-x: auto; scrollbar-width: none; }
.tv-tabs::-webkit-scrollbar { display: none; }
.tv-tab { padding: .7rem 0; font-size: .9rem; font-weight: 600; color: var(--tv-ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.tv-tab[aria-selected="true"], .tv-tab[data-active="true"] { color: var(--tv-red-dark); border-color: var(--tv-red); }
.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); }
@keyframes tv-sh { to { background-position: -200% 0; } }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
:focus-visible { outline: 2px solid var(--tv-red); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* MapLibre */
.maplibregl-ctrl-attrib { font-size: 10px !important; }
.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; }
.tv-marker:hover, .tv-marker[data-active="true"] { background: var(--tv-red); color: #fff; }