/* Trouvia: shared tokens and components. No build step. */
:root {
  color-scheme: light dark;

  --bg: light-dark(#eef3f1, #0a1512);
  --surface: light-dark(#ffffff, #11211c);
  --surface-2: light-dark(#e2ebe7, #182c26);
  --ink: light-dark(#0e2019, #eaf2ee);
  --muted: light-dark(#475a52, #a3b8af);
  --line: light-dark(#c5d2cc, #2a433c);
  --edge: light-dark(#0e2019, #050c0a);          /* hard outlines and offset shadows */
  --spruce: light-dark(#0f4d3c, #74dfb7);        /* brand as text / strokes */
  --spruce-fill: light-dark(#0f4d3c, #17624d);   /* brand as a filled surface */
  --on-spruce: #f3fbf7;
  --yellow: #ffd12e;
  --yellow-deep: #f2b800;
  --on-yellow: #0e2019;
  --coral: light-dark(#c93225, #ff8377);         /* coral as text */
  --coral-fill: #ff5a4e;
  --focus: light-dark(#0b57d0, #9cc2ff);

  /* listing types */
  --t-weekend: #ffd12e;
  --t-sale: #ff5a4e;
  --t-spotted: #ff9a3d;
  --t-bazaar: #4d8dff;
  --t-repair: #1fc2b0;
  --t-reuse: #17624d;

  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  --header-h: 60px;
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) { color-scheme: dark; }
:root:has(> head > meta[name="color-scheme"][content="light"]) { color-scheme: light; }

/* Language switching: French is the default; the inactive language is removed from the page. */
html[lang^="fr"] [lang="en"],
html[lang^="en"] [lang="fr"] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 6.2vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--spruce); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--yellow); color: var(--on-yellow); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--yellow); color: var(--on-yellow); padding: 10px 14px; border-radius: var(--r-s); font-weight: 700; }
.skip:focus { top: 8px; }
.kicker { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; color: var(--spruce); margin: 0 0 .8em; }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--muted); max-width: 46ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.nowrap { white-space: nowrap; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--line);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 12px; }
.site-header.wide .wrap { width: calc(100% - 2 * clamp(12px, 2vw, 24px)); max-width: none; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; flex: none; }
.brand svg, .brand img { height: 34px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a {
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  color: var(--ink); text-decoration: none; padding: 8px 11px; border-radius: 999px;
}
.site-nav a:hover { background: var(--surface-2); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.tools { display: flex; align-items: center; gap: 6px; }
.tool-btn {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .04em;
}
.tool-btn:hover { border-color: var(--ink); }
.tool-btn svg { width: 18px; height: 18px; }
/* Theme toggle shows the action that applies to the scheme currently rendered. */
.theme-toggle .when-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) .theme-toggle .when-dark { display: contents; }
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) .theme-toggle .when-light { display: none; }
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle .when-dark { display: contents; }
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle .when-light { display: none; }

@media (max-width: 560px) {
  .site-nav a { padding: 8px 8px; font-size: .92rem; }
  .site-nav .hide-s { display: none; }
  .brand svg, .brand img { height: 28px; }
  .tool-btn { min-width: 36px; height: 36px; padding: 0 8px; }
  .site-header .wrap { gap: 6px; }
}
@media (max-width: 359px) {
  .brand { width: 19px; overflow: hidden; }   /* mark only on very small screens */
  .brand svg { max-width: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.1;
  padding: .82em 1.25em; border-radius: 999px; text-decoration: none;
  border: 2px solid var(--edge); background: var(--surface); color: var(--ink);
  box-shadow: 0 3px 0 var(--edge);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--edge); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.btn.primary { background: var(--yellow); color: var(--on-yellow); }
.btn.spruce { background: var(--spruce-fill); color: var(--on-spruce); }
.btn.ghost { box-shadow: none; border-color: var(--line); background: transparent; }
.btn.ghost:hover { border-color: var(--ink); transform: none; }
.btn.sm { font-size: .9rem; padding: .6em .95em; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Price sticker motif ---------- */
.sticker {
  --size: 64px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--yellow); color: var(--on-yellow);
  border: 2px solid var(--edge);
  font-family: var(--font-display); font-weight: 800; font-size: calc(var(--size) * .4); line-height: 1;
  letter-spacing: -.03em;
  rotate: -7deg;
  box-shadow: 2px 3px 0 var(--edge);
}
.sticker.r { rotate: 6deg; }
.sticker.coral { background: var(--coral-fill); }
.sticker.white { background: #fff; }
.sticker.mint { background: #8ee7c5; }
.sticker small { font-size: .5em; font-weight: 700; }

.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .03em;
  padding: .28em .7em; border-radius: 999px; border: 1.5px solid var(--edge);
  background: var(--surface); color: var(--ink); white-space: nowrap;
}
.badge.example { background: var(--yellow); color: var(--on-yellow); rotate: -2deg; }
.badge.winter { background: var(--spruce-fill); color: var(--on-spruce); border-color: transparent; }
.badge .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--yellow); }

.card {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-l);
  padding: clamp(18px, 2.4vw, 28px);
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
th, td { text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--font-display); font-weight: 700; background: var(--surface-2); white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num { font-family: var(--font-display); font-weight: 500; }
tr.total td.num { font-weight: 700; }
tr.total > * { font-weight: 700; background: var(--surface-2); }
.yes, .no { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.yes { color: var(--spruce); }
.no { color: var(--coral); }

/* ---------- Footer ---------- */
.state:empty { display: none; }
.site-footer { border-top: 1.5px solid var(--line); margin-top: clamp(48px, 8vw, 96px); padding: 36px 0 48px; font-size: .93rem; color: var(--muted); }
.site-footer .cols { display: grid; gap: 28px; grid-template-columns: 1.2fr 1fr 1.6fr; }
.site-footer h3 { font-size: .95rem; color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.site-footer .brand svg { height: 40px; }
@media (max-width: 800px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* ---------- Logo ---------- */
.logo { overflow: visible; }
.logo .lg-pin-body { fill: var(--spruce-fill); }
.logo .lg-sticker-face { fill: var(--yellow); stroke: var(--edge); stroke-width: 2.5; }
.logo .lg-glyph { fill: none; stroke: var(--on-yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logo .lg-shadow { fill: var(--ink); opacity: .16; }
.logo .lg-l { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.logo .lg-dot { fill: var(--yellow); stroke: var(--edge); stroke-width: 2.5; }
.logo :is(.lg-pin, .lg-sticker, .lg-dot, .lg-shadow) { transform-box: fill-box; transform-origin: 50% 50%; }
.logo .lg-pin { transform-origin: 50% 100%; }
.logo .lg-sticker { rotate: -10deg; }

@media (prefers-reduced-motion: no-preference) {
  .logo.play .lg-pin { animation: lg-drop .9s cubic-bezier(.3, 0, .4, 1) both; }
  .logo.play .lg-shadow { animation: lg-shadow .9s ease-out both; }
  .logo.play .lg-sticker { animation: lg-spin .7s .55s cubic-bezier(.2, 1.4, .4, 1) both; }
  .logo.play .lg-l { stroke-dasharray: 1; animation: lg-draw .45s calc(.75s + var(--i, 0) * .07s) ease-out both; }
  .logo.play .lg-dot { animation: lg-pop .5s 1.45s cubic-bezier(.2, 1.8, .4, 1) both; }
  .brand:hover .logo:not(.play) .lg-sticker { animation: lg-wiggle .5s ease; }
}
@keyframes lg-drop {
  0% { transform: translateY(-120%) scaleY(1.08); opacity: 0; }
  12% { opacity: 1; }
  46% { transform: translateY(0) scale(1.12, .82); }
  64% { transform: translateY(-16%) scale(.96, 1.05); }
  82% { transform: translateY(0) scale(1.05, .94); }
  100% { transform: none; }
}
@keyframes lg-shadow {
  0% { transform: scale(.2); opacity: 0; }
  46% { transform: scale(1.25); opacity: .22; }
  64% { transform: scale(.8); opacity: .12; }
  100% { transform: none; opacity: .16; }
}
@keyframes lg-spin { from { scale: 0; rotate: -200deg; } to { scale: 1; rotate: -10deg; } }
@keyframes lg-draw { from { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes lg-pop { from { scale: 0; } to { scale: 1; } }
@keyframes lg-wiggle { 0%, 100% { rotate: -10deg; } 35% { rotate: 14deg; } 70% { rotate: -18deg; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (max-width: 560px) {
  table { font-size: .86rem; }
  th, td { padding: .6em .55em; }
}