/* =============================================================================
   LOGUETOWN — Premium 2026
   Soft pivot: gold as single accent, neutralize the rest.
   Extends the existing lt-* design token system. Loads after _tokens.css and
   loguetown-polish.css so values cascade-override without !important.

   Inspirations: Airbnb spacing & cards, Linear typography & restraint,
   Vercel monochrome surfaces, Apple motion timing.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Token refinements — refined neutral palette + motion + elevation
   ----------------------------------------------------------------------------- */
:root {
  /* Neutral premium palette (warm, refined) */
  --lt-ink-0:        #0b0d10;   /* deepest text — almost-black, slight warm */
  --lt-ink-1:        #1c2024;   /* headings */
  --lt-ink-2:        #3a414a;   /* body */
  --lt-ink-3:        #5b6470;   /* muted body */
  --lt-ink-4:        #8b95a3;   /* subdued / placeholder */
  --lt-ink-5:        #b8c0cc;   /* hint */
  --lt-paper-0:      #fdfcfa;   /* page background — warm white */
  --lt-paper-1:      #f7f5f1;   /* subtle elevated */
  --lt-paper-2:      #efece6;   /* muted surface */
  --lt-line-1:       rgba(11, 13, 16, 0.06);   /* hairline */
  --lt-line-2:       rgba(11, 13, 16, 0.10);   /* divider */
  --lt-line-3:       rgba(11, 13, 16, 0.16);   /* strong divider */

  /* Gold accent — single brand color, refined */
  --lt-gold:          #b8841a;     /* primary — deeper, less saturated than #d4a017 */
  --lt-gold-hover:    #9e6f12;
  --lt-gold-soft:     #e8d49a;     /* soft fills */
  --lt-gold-wash:     rgba(184, 132, 26, 0.08);
  --lt-gold-line:     rgba(184, 132, 26, 0.22);
  --lt-gold-focus:    rgba(184, 132, 26, 0.18);
  --lt-gold-shadow:   rgba(184, 132, 26, 0.22);
  --lt-on-gold:       #ffffff;

  /* Override the lt-* semantic tokens to point at the new palette */
  --lt-color-bg:                var(--lt-paper-0);
  --lt-color-surface:           #ffffff;
  --lt-color-surface-muted:     var(--lt-paper-1);
  --lt-color-surface-elevated:  #ffffff;
  --lt-color-text:              var(--lt-ink-1);
  --lt-color-text-muted:        var(--lt-ink-3);
  --lt-color-text-subtle:       var(--lt-ink-4);
  --lt-color-border:            var(--lt-line-2);
  --lt-color-border-strong:     var(--lt-line-3);
  --lt-color-primary:           var(--lt-ink-1);          /* primary now = ink (neutral) */
  --lt-color-primary-strong:    var(--lt-ink-0);
  --lt-color-accent:            var(--lt-gold);           /* gold = single accent */
  --lt-color-accent-hover:      var(--lt-gold-hover);
  --lt-color-accent-soft:       var(--lt-gold-soft);

  /* Typography — refined scale, modular */
  --lt-font-display: "Fraunces", "Cinzel", Georgia, serif;
  --lt-font-body:    "Inter", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lt-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lt-text-xxs:     0.6875rem;   /* 11 */
  --lt-text-xs:      0.75rem;     /* 12 */
  --lt-text-sm:      0.8125rem;   /* 13 */
  --lt-text-md:      0.9375rem;   /* 15 — body */
  --lt-text-lg:      1.0625rem;   /* 17 */
  --lt-text-xl:      1.25rem;     /* 20 */
  --lt-text-2xl:     1.625rem;    /* 26 */
  --lt-text-3xl:     2.125rem;    /* 34 */
  --lt-text-4xl:     2.75rem;     /* 44 */
  --lt-text-5xl:     3.625rem;    /* 58 */
  --lt-text-6xl:     4.5rem;      /* 72 */
  --lt-tracking-tight: -0.022em;
  --lt-tracking-normal: -0.01em;
  --lt-tracking-eyebrow: 0.14em;
  --lt-leading-tight: 1.08;
  --lt-leading-snug:  1.22;
  --lt-leading-body:  1.55;

  /* Spacing — 4px base, generous */
  --lt-s-0:   0;
  --lt-s-1:   0.25rem;
  --lt-s-2:   0.5rem;
  --lt-s-3:   0.75rem;
  --lt-s-4:   1rem;
  --lt-s-5:   1.25rem;
  --lt-s-6:   1.5rem;
  --lt-s-7:   1.75rem;
  --lt-s-8:   2rem;
  --lt-s-10:  2.5rem;
  --lt-s-12:  3rem;
  --lt-s-16:  4rem;
  --lt-s-20:  5rem;
  --lt-s-24:  6rem;
  --lt-s-32:  8rem;

  /* Radii — softer, more refined */
  --lt-r-xs:   4px;
  --lt-r-sm:   8px;
  --lt-r-md:   12px;
  --lt-r-lg:   16px;
  --lt-r-xl:   20px;
  --lt-r-2xl:  28px;
  --lt-r-pill: 999px;
  --lt-radius-sm: var(--lt-r-sm);
  --lt-radius-md: var(--lt-r-md);
  --lt-radius-lg: var(--lt-r-lg);

  /* Elevation — stacked, soft */
  --lt-elev-1: 0 1px 2px rgba(11, 13, 16, 0.04), 0 1px 3px rgba(11, 13, 16, 0.06);
  --lt-elev-2: 0 2px 4px rgba(11, 13, 16, 0.04), 0 4px 12px rgba(11, 13, 16, 0.06);
  --lt-elev-3: 0 4px 8px rgba(11, 13, 16, 0.05), 0 12px 24px rgba(11, 13, 16, 0.08);
  --lt-elev-4: 0 8px 16px rgba(11, 13, 16, 0.06), 0 24px 48px rgba(11, 13, 16, 0.10);
  --lt-elev-5: 0 16px 32px rgba(11, 13, 16, 0.08), 0 40px 80px rgba(11, 13, 16, 0.14);
  --lt-shadow-card:       var(--lt-elev-2);
  --lt-shadow-card-hover: var(--lt-elev-3);
  --lt-shadow-lg:         var(--lt-elev-4);

  /* Focus rings */
  --lt-ring-neutral: 0 0 0 3px rgba(11, 13, 16, 0.10);
  --lt-ring-gold:    0 0 0 3px var(--lt-gold-focus);
  --lt-ring-danger:  0 0 0 3px rgba(220, 38, 38, 0.18);

  /* Motion — refined easings, intentional durations */
  --lt-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);            /* deceleration */
  --lt-ease-in:     cubic-bezier(0.55, 0, 0.85, 0);
  --lt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lt-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);          /* gentle overshoot */
  --lt-dur-instant: 80ms;
  --lt-dur-fast:    160ms;
  --lt-dur-base:    240ms;
  --lt-dur-slow:    420ms;
  --lt-dur-slower:  640ms;

  /* Components */
  --lt-control-height:        46px;
  --lt-control-height-sm:     38px;
  --lt-control-height-lg:     54px;
  --lt-control-radius:        var(--lt-r-md);
  --lt-card-radius:           var(--lt-r-lg);
  --lt-card-border:           1px solid var(--lt-line-1);
  --lt-card-bg:               #ffffff;

  /* Container widths */
  --lt-container-sm: 720px;
  --lt-container-md: 960px;
  --lt-container-lg: 1200px;
  --lt-container-xl: 1320px;

  /* Header / nav */
  --lt-header-height: 68px;
  --lt-header-bg:     rgba(253, 252, 250, 0.86);
  --lt-header-bg-scrolled: rgba(255, 255, 255, 0.78);
  --lt-header-border: var(--lt-line-1);
}

/* Dark / Grand Line theme refinements — keep navy+gold identity, soften the gold */
body.lt-accueil-gl,
body.lt-acheter-gl,
[data-theme="dark"] {
  --lt-color-bg:               #08101e;
  --lt-color-surface:          #0e1a2e;
  --lt-color-surface-muted:    #0a1424;
  --lt-color-surface-elevated: #122039;
  --lt-color-text:             #f0ece2;
  --lt-color-text-muted:       rgba(240, 236, 226, 0.62);
  --lt-color-text-subtle:      rgba(240, 236, 226, 0.42);
  --lt-color-border:           rgba(240, 236, 226, 0.08);
  --lt-color-border-strong:    rgba(240, 236, 226, 0.16);
  --lt-color-accent:           #d4a017;
  --lt-color-accent-hover:     #f0c842;
  --lt-color-accent-soft:      rgba(212, 160, 23, 0.14);
  --lt-card-bg:                #0e1a2e;
  --lt-card-border:            1px solid rgba(240, 236, 226, 0.06);
  --lt-elev-1: 0 1px 2px rgba(0,0,0,0.4),  0 1px 3px rgba(0,0,0,0.3);
  --lt-elev-2: 0 2px 6px rgba(0,0,0,0.42), 0 6px 16px rgba(0,0,0,0.35);
  --lt-elev-3: 0 4px 12px rgba(0,0,0,0.5), 0 16px 36px rgba(0,0,0,0.45);
  --lt-elev-4: 0 8px 24px rgba(0,0,0,0.55),0 32px 64px rgba(0,0,0,0.55);
  --lt-elev-5: 0 16px 40px rgba(0,0,0,0.6),0 50px 100px rgba(0,0,0,0.6);
  --lt-shadow-card:       var(--lt-elev-2);
  --lt-shadow-card-hover: var(--lt-elev-3);
  --lt-ring-neutral:      0 0 0 3px rgba(240, 236, 226, 0.12);
  --lt-header-bg:         rgba(8, 16, 30, 0.78);
  --lt-header-bg-scrolled:rgba(8, 16, 30, 0.92);
  --lt-header-border:     rgba(240, 236, 226, 0.06);
}

/* -----------------------------------------------------------------------------
   2. Base — typography, links, focus, accessibility
   ----------------------------------------------------------------------------- */
body {
  font-family: var(--lt-font-body);
  font-size:   var(--lt-text-md);
  line-height: var(--lt-leading-body);
  color:       var(--lt-color-text);
  background:  var(--lt-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "kern";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lt-font-display);
  color: var(--lt-color-primary-strong);
  letter-spacing: var(--lt-tracking-tight);
  line-height: var(--lt-leading-tight);
  font-weight: 600;
}

/* Display headline — used for hero */
.lt-display {
  font-family: var(--lt-font-display);
  font-size: clamp(2.5rem, 6vw, var(--lt-text-6xl));
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--lt-color-primary-strong);
}
.lt-display em,
.lt-display .lt-italic-accent {
  font-style: italic;
  color: var(--lt-color-accent);
  font-weight: 400;
}

/* Eyebrow — small uppercase label above headings */
.lt-eyebrow {
  display: inline-block;
  font-size: var(--lt-text-xs);
  font-weight: 600;
  letter-spacing: var(--lt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--lt-color-text-muted);
}
.lt-eyebrow--gold { color: var(--lt-color-accent); }

/* Lead paragraph */
.lt-lead {
  font-size: var(--lt-text-lg);
  line-height: 1.55;
  color: var(--lt-color-text-muted);
  max-width: 60ch;
}

/* Subtle text variants */
.lt-text-muted   { color: var(--lt-color-text-muted); }
.lt-text-subtle  { color: var(--lt-color-text-subtle); }

/* Refined focus across the app — gold for actionable, neutral for inputs */
:where(a, button, [role="button"]):focus-visible {
  outline: none;
  box-shadow: var(--lt-ring-gold);
  border-radius: var(--lt-r-sm);
}
:where(input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--lt-ring-gold);
}

/* Selection */
::selection { background: var(--lt-gold-wash); color: var(--lt-color-primary-strong); }

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   3. Layout primitives
   ----------------------------------------------------------------------------- */
.lt-container        { max-width: var(--lt-container-lg); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.lt-container--sm    { max-width: var(--lt-container-sm); }
.lt-container--md    { max-width: var(--lt-container-md); }
.lt-container--xl    { max-width: var(--lt-container-xl); }
.lt-container--full  { max-width: none; }

.lt-section          { padding-block: clamp(3rem, 8vw, 6rem); }
.lt-section--tight   { padding-block: clamp(2rem, 5vw, 3.5rem); }
.lt-section--hero    { padding-block: clamp(4rem, 10vw, 8rem); }

.lt-stack > * + *    { margin-top: var(--lt-s-4); }
.lt-stack-sm > * + * { margin-top: var(--lt-s-2); }
.lt-stack-lg > * + * { margin-top: var(--lt-s-6); }
.lt-stack-xl > * + * { margin-top: var(--lt-s-10); }

.lt-cluster          { display: flex; flex-wrap: wrap; gap: var(--lt-s-3); align-items: center; }
.lt-cluster--sm      { gap: var(--lt-s-2); }
.lt-cluster--lg      { gap: var(--lt-s-4); }

.lt-grid             { display: grid; gap: var(--lt-s-6); }
.lt-grid--2          { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lt-grid--3          { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lt-grid--4          { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* -----------------------------------------------------------------------------
   4. Buttons — refined .lt-btn variants
   ----------------------------------------------------------------------------- */
.lt-btn {
  --lt-btn-bg:       var(--lt-color-primary-strong);
  --lt-btn-color:    #ffffff;
  --lt-btn-border:   transparent;
  --lt-btn-shadow:   var(--lt-elev-1);
  --lt-btn-shadow-h: var(--lt-elev-2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lt-s-2);
  height: var(--lt-control-height);
  padding-inline: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--lt-r-md);
  font-family: var(--lt-font-body);
  font-size: var(--lt-text-md);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--lt-btn-color);
  background: var(--lt-btn-bg);
  border: 1px solid var(--lt-btn-border);
  box-shadow: var(--lt-btn-shadow);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform   var(--lt-dur-fast) var(--lt-ease-out),
    box-shadow  var(--lt-dur-base) var(--lt-ease-out),
    background  var(--lt-dur-base) var(--lt-ease-out),
    border-color var(--lt-dur-base) var(--lt-ease-out),
    color       var(--lt-dur-base) var(--lt-ease-out);
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.lt-btn:hover {
  background: var(--lt-btn-bg);
  filter: brightness(1.08);
  box-shadow: var(--lt-btn-shadow-h);
  transform: translateY(-1px);
}
.lt-btn:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.96);
  transition-duration: var(--lt-dur-instant);
}
.lt-btn:disabled,
.lt-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; filter: none;
}

/* Variants */
.lt-btn--accent {
  --lt-btn-bg:       var(--lt-color-accent);
  --lt-btn-color:    var(--lt-on-gold);
  --lt-btn-shadow:   0 1px 2px var(--lt-gold-shadow), 0 4px 12px var(--lt-gold-shadow);
  --lt-btn-shadow-h: 0 2px 4px var(--lt-gold-shadow), 0 10px 24px var(--lt-gold-shadow);
}
.lt-btn--accent:hover { background: var(--lt-color-accent-hover); filter: none; }

.lt-btn--ghost {
  --lt-btn-bg:       transparent;
  --lt-btn-color:    var(--lt-color-text);
  --lt-btn-border:   var(--lt-color-border-strong);
  --lt-btn-shadow:   none;
  --lt-btn-shadow-h: var(--lt-elev-1);
}
.lt-btn--ghost:hover {
  --lt-btn-bg: var(--lt-color-surface-muted);
  filter: none;
  border-color: var(--lt-color-border-strong);
}

.lt-btn--subtle {
  --lt-btn-bg:       var(--lt-color-surface-muted);
  --lt-btn-color:    var(--lt-color-text);
  --lt-btn-shadow:   none;
  --lt-btn-shadow-h: var(--lt-elev-1);
}
.lt-btn--subtle:hover { filter: none; background: var(--lt-paper-2); }

.lt-btn--link {
  --lt-btn-bg: transparent;
  --lt-btn-color: var(--lt-color-text);
  --lt-btn-shadow: none;
  --lt-btn-shadow-h: none;
  padding-inline: 0;
  height: auto;
  border: 0;
}
.lt-btn--link:hover { color: var(--lt-color-accent); transform: none; filter: none; }

/* Sizes */
.lt-btn--sm    { height: var(--lt-control-height-sm); font-size: var(--lt-text-sm); padding-inline: var(--lt-s-4); }
.lt-btn--lg    { height: var(--lt-control-height-lg); font-size: var(--lt-text-lg); padding-inline: var(--lt-s-7); }
.lt-btn--block { width: 100%; }

/* Premium accent — adds shine sweep on hover */
.lt-btn--premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lt-btn--premium::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--lt-dur-slower) var(--lt-ease-out);
  pointer-events: none;
  z-index: 1;
}
.lt-btn--premium:hover::after { transform: translateX(120%); }
.lt-btn--premium > * { position: relative; z-index: 2; }

/* Icon-only round button */
.lt-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--lt-r-pill);
  background: var(--lt-color-surface);
  border: 1px solid var(--lt-color-border);
  color: var(--lt-color-text);
  cursor: pointer;
  transition: background var(--lt-dur-base) var(--lt-ease-out),
              border-color var(--lt-dur-base) var(--lt-ease-out),
              transform var(--lt-dur-fast) var(--lt-ease-out);
}
.lt-icon-btn:hover { background: var(--lt-color-surface-muted); transform: translateY(-1px); border-color: var(--lt-color-border-strong); }
.lt-icon-btn:active { transform: scale(0.94); }

/* -----------------------------------------------------------------------------
   5. Chips / pills / badges
   ----------------------------------------------------------------------------- */
.lt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--lt-s-2);
  padding: 0.45rem 0.85rem;
  border-radius: var(--lt-r-pill);
  font-size: var(--lt-text-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--lt-color-text);
  background: var(--lt-color-surface);
  border: 1px solid var(--lt-color-border);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lt-dur-fast) var(--lt-ease-out),
              border-color var(--lt-dur-fast) var(--lt-ease-out),
              color var(--lt-dur-fast) var(--lt-ease-out),
              transform var(--lt-dur-fast) var(--lt-ease-out);
}
.lt-chip:hover {
  background: var(--lt-color-surface-muted);
  border-color: var(--lt-color-border-strong);
  transform: translateY(-1px);
}
.lt-chip.is-active,
.lt-chip[aria-pressed="true"] {
  background: var(--lt-color-primary-strong);
  color: #ffffff;
  border-color: var(--lt-color-primary-strong);
}
.lt-chip--gold.is-active,
.lt-chip--gold[aria-pressed="true"] {
  background: var(--lt-color-accent);
  border-color: var(--lt-color-accent);
  color: var(--lt-on-gold);
}

.lt-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: var(--lt-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--lt-r-sm);
  background: var(--lt-color-surface-muted);
  color: var(--lt-color-text);
  border: 1px solid var(--lt-line-1);
}
.lt-badge--gold    { background: var(--lt-gold-wash); color: var(--lt-color-accent); border-color: var(--lt-gold-line); }
.lt-badge--neutral { /* default */ }
.lt-badge--success { background: rgba(22, 101, 52, 0.08); color: #166534; border-color: rgba(22,101,52,0.18); }
.lt-badge--warn    { background: rgba(202, 138, 4, 0.10);  color: #854d0e; border-color: rgba(202,138,4,0.22); }
.lt-badge--danger  { background: rgba(220, 38, 38, 0.08);  color: #991b1b; border-color: rgba(220,38,38,0.18); }
.lt-badge--live {
  background: rgba(16, 163, 74, 0.10);
  color: #15803d;
  border-color: rgba(16,163,74,0.22);
}
.lt-badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: lt-pulse-dot 1.6s ease-out infinite;
}
@keyframes lt-pulse-dot {
  0%   { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0); }
}

/* -----------------------------------------------------------------------------
   6. Cards — premium listing cards (Airbnb-inspired)
   ----------------------------------------------------------------------------- */
.lt-card {
  background: var(--lt-card-bg);
  border-radius: var(--lt-card-radius);
  border: var(--lt-card-border);
  overflow: hidden;
  transition: box-shadow var(--lt-dur-base) var(--lt-ease-out),
              transform  var(--lt-dur-base) var(--lt-ease-out),
              border-color var(--lt-dur-base) var(--lt-ease-out);
}
.lt-card--elevated { box-shadow: var(--lt-shadow-card); }
.lt-card--hover:hover {
  box-shadow: var(--lt-shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--lt-color-border-strong);
}

/* Listing card — image-led, Airbnb-style */
.lt-listing-card {
  display: flex; flex-direction: column;
  background: transparent;
  border-radius: var(--lt-r-lg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.lt-listing-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--lt-r-lg);
  background: var(--lt-color-surface-muted);
  box-shadow: var(--lt-elev-1);
  transition: box-shadow var(--lt-dur-base) var(--lt-ease-out);
}
.lt-listing-card:hover .lt-listing-card__media {
  box-shadow: var(--lt-elev-3);
}
.lt-listing-card__img,
.lt-listing-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--lt-dur-slower) var(--lt-ease-out),
              opacity   var(--lt-dur-slow)   var(--lt-ease-out);
}
.lt-listing-card:hover .lt-listing-card__img,
.lt-listing-card:hover .lt-listing-card__media img {
  transform: scale(1.04);
}
.lt-listing-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--lt-paper-1), var(--lt-paper-2));
  color: var(--lt-color-text-subtle);
  font-size: var(--lt-text-xl);
}
.lt-listing-card__badge {
  position: absolute;
  top: var(--lt-s-3); left: var(--lt-s-3);
  z-index: 2;
}
.lt-listing-card__fav {
  position: absolute;
  top: var(--lt-s-3); right: var(--lt-s-3);
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: var(--lt-r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(11, 13, 16, 0.06);
  color: var(--lt-color-text);
  cursor: pointer;
  transition: background var(--lt-dur-base) var(--lt-ease-out),
              transform  var(--lt-dur-fast) var(--lt-ease-out),
              color      var(--lt-dur-base) var(--lt-ease-out);
}
.lt-listing-card__fav:hover { background: #ffffff; transform: scale(1.06); color: #e11d48; }
.lt-listing-card__fav.is-active { color: #e11d48; }
.lt-listing-card__body {
  padding-block: var(--lt-s-3);
  display: flex; flex-direction: column;
  gap: var(--lt-s-1);
}
.lt-listing-card__title {
  font-family: var(--lt-font-body);
  font-size: var(--lt-text-md);
  font-weight: 600;
  color: var(--lt-color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lt-listing-card__meta {
  font-size: var(--lt-text-sm);
  color: var(--lt-color-text-muted);
  display: flex; align-items: center; gap: var(--lt-s-2);
}
.lt-listing-card__price {
  font-family: var(--lt-font-body);
  font-size: var(--lt-text-md);
  font-weight: 700;
  color: var(--lt-color-primary-strong);
  margin-top: var(--lt-s-1);
}
.lt-listing-card__price small {
  font-size: var(--lt-text-xs);
  font-weight: 500;
  color: var(--lt-color-text-muted);
  margin-left: 0.2rem;
}

/* -----------------------------------------------------------------------------
   7. Inputs — refined fields
   ----------------------------------------------------------------------------- */
.lt-input,
.lt-select,
.lt-textarea {
  display: block;
  width: 100%;
  height: var(--lt-control-height);
  padding: 0 var(--lt-s-4);
  border-radius: var(--lt-control-radius);
  border: 1px solid var(--lt-color-border);
  background: var(--lt-color-surface);
  color: var(--lt-color-text);
  font-family: var(--lt-font-body);
  font-size: var(--lt-text-md);
  line-height: 1.4;
  transition: border-color var(--lt-dur-fast) var(--lt-ease-out),
              box-shadow var(--lt-dur-fast) var(--lt-ease-out),
              background var(--lt-dur-fast) var(--lt-ease-out);
}
.lt-textarea { min-height: 120px; padding-block: var(--lt-s-3); resize: vertical; }
.lt-input:hover, .lt-select:hover, .lt-textarea:hover { border-color: var(--lt-color-border-strong); }
.lt-input:focus, .lt-select:focus, .lt-textarea:focus {
  outline: none;
  border-color: var(--lt-color-accent);
  box-shadow: var(--lt-ring-gold);
}
.lt-input::placeholder,
.lt-textarea::placeholder { color: var(--lt-color-text-subtle); }

.lt-label {
  display: inline-block;
  font-size: var(--lt-text-sm);
  font-weight: 600;
  color: var(--lt-color-text);
  margin-bottom: var(--lt-s-2);
  letter-spacing: -0.005em;
}
.lt-field { display: flex; flex-direction: column; }

/* Search input — refined, premium */
.lt-search {
  position: relative;
  display: flex; align-items: center;
  height: var(--lt-control-height-lg);
  border-radius: var(--lt-r-pill);
  background: var(--lt-color-surface);
  border: 1px solid var(--lt-color-border);
  padding: 0 0.5rem 0 var(--lt-s-5);
  transition: border-color var(--lt-dur-base) var(--lt-ease-out),
              box-shadow var(--lt-dur-base) var(--lt-ease-out);
}
.lt-search:focus-within {
  border-color: var(--lt-color-accent);
  box-shadow: var(--lt-ring-gold);
}
.lt-search__icon {
  width: 18px; height: 18px;
  color: var(--lt-color-text-muted);
  flex-shrink: 0;
}
.lt-search__input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding-inline: var(--lt-s-3);
  font-size: var(--lt-text-md);
  color: var(--lt-color-text);
  min-width: 0;
}
.lt-search__input::placeholder { color: var(--lt-color-text-subtle); }
.lt-search__submit {
  height: calc(var(--lt-control-height-lg) - 12px);
  padding-inline: var(--lt-s-5);
  border: 0;
  border-radius: var(--lt-r-pill);
  background: var(--lt-color-accent);
  color: var(--lt-on-gold);
  font-weight: 600;
  font-size: var(--lt-text-sm);
  cursor: pointer;
  transition: background var(--lt-dur-fast) var(--lt-ease-out),
              transform var(--lt-dur-fast) var(--lt-ease-out);
}
.lt-search__submit:hover { background: var(--lt-color-accent-hover); transform: scale(1.02); }

/* -----------------------------------------------------------------------------
   8. Skeleton loaders
   ----------------------------------------------------------------------------- */
.lt-skel {
  position: relative;
  overflow: hidden;
  background: var(--lt-paper-1);
  border-radius: var(--lt-r-md);
}
.lt-skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: lt-shimmer 1.6s var(--lt-ease-in-out) infinite;
}
[data-theme="dark"] .lt-skel,
body.lt-accueil-gl .lt-skel,
body.lt-acheter-gl .lt-skel { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .lt-skel::after,
body.lt-accueil-gl .lt-skel::after,
body.lt-acheter-gl .lt-skel::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
}
@keyframes lt-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.lt-skel--line   { height: 0.875rem; border-radius: var(--lt-r-sm); }
.lt-skel--title  { height: 1.5rem;   border-radius: var(--lt-r-sm); }
.lt-skel--media  { aspect-ratio: 4/5; border-radius: var(--lt-r-lg); }
.lt-skel--circle { border-radius: 50%; }

/* Skeleton listing card */
.lt-skel-card {
  display: flex; flex-direction: column; gap: var(--lt-s-3);
}
.lt-skel-card .lt-skel--media { width: 100%; }
.lt-skel-card .lt-skel--line:nth-child(2) { width: 80%; }
.lt-skel-card .lt-skel--line:nth-child(3) { width: 50%; }

/* -----------------------------------------------------------------------------
   9. Empty states
   ----------------------------------------------------------------------------- */
.lt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--lt-s-16) var(--lt-s-6);
  gap: var(--lt-s-4);
  color: var(--lt-color-text-muted);
}
.lt-empty__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--lt-color-surface-muted);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lt-color-text-subtle);
}
.lt-empty__title {
  font-family: var(--lt-font-display);
  font-size: var(--lt-text-2xl);
  color: var(--lt-color-text);
  margin: 0;
}
.lt-empty__msg {
  font-size: var(--lt-text-md);
  max-width: 44ch;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   10. Glass surface — subtle, refined glassmorphism
   ----------------------------------------------------------------------------- */
.lt-glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.lt-glass--dark {
  background: rgba(8, 16, 30, 0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* -----------------------------------------------------------------------------
   11. Reveal animations (IntersectionObserver-driven via data-reveal)
       Used progressively; respects prefers-reduced-motion above.
   ----------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--lt-dur-slow) var(--lt-ease-out),
    transform var(--lt-dur-slow) var(--lt-ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger — set --reveal-delay via inline style or data-* */
[data-reveal][data-reveal-delay="1"].is-visible { transition-delay: 60ms; }
[data-reveal][data-reveal-delay="2"].is-visible { transition-delay: 120ms; }
[data-reveal][data-reveal-delay="3"].is-visible { transition-delay: 180ms; }
[data-reveal][data-reveal-delay="4"].is-visible { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="5"].is-visible { transition-delay: 300ms; }
[data-reveal][data-reveal-delay="6"].is-visible { transition-delay: 360ms; }

/* Image fade-in once loaded — for <img data-blur-up> */
img[data-blur-up] {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.02);
  transition:
    opacity   var(--lt-dur-slow) var(--lt-ease-out),
    filter    var(--lt-dur-slow) var(--lt-ease-out),
    transform var(--lt-dur-slow) var(--lt-ease-out);
}
img[data-blur-up].is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* -----------------------------------------------------------------------------
   12. Hover lift utility — for cards / interactive elements
   ----------------------------------------------------------------------------- */
.lt-hover-lift {
  transition: transform var(--lt-dur-base) var(--lt-ease-out),
              box-shadow var(--lt-dur-base) var(--lt-ease-out);
}
.lt-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--lt-elev-3);
}

/* -----------------------------------------------------------------------------
   13. Sticky surfaces / divider
   ----------------------------------------------------------------------------- */
.lt-divider {
  height: 1px;
  background: var(--lt-color-border);
  margin-block: var(--lt-s-6);
}
.lt-divider--strong { background: var(--lt-color-border-strong); }

.lt-sticky-top {
  position: sticky;
  top: calc(var(--lt-header-height) + var(--lt-s-4));
}

/* -----------------------------------------------------------------------------
   14. Trust signals strip — marketplace credibility row
   ----------------------------------------------------------------------------- */
.lt-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lt-s-6);
  padding: var(--lt-s-8) var(--lt-s-6);
  background: var(--lt-color-surface);
  border: 1px solid var(--lt-color-border);
  border-radius: var(--lt-r-xl);
}
.lt-trust-item {
  display: flex; align-items: flex-start; gap: var(--lt-s-3);
}
.lt-trust-item__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--lt-r-md);
  background: var(--lt-gold-wash);
  color: var(--lt-color-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.lt-trust-item__title {
  font-weight: 600;
  font-size: var(--lt-text-md);
  color: var(--lt-color-text);
  margin: 0 0 0.15rem 0;
}
.lt-trust-item__desc {
  font-size: var(--lt-text-sm);
  color: var(--lt-color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   15. Mobile / touch refinements
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .lt-section       { padding-block: clamp(2rem, 6vw, 3.5rem); }
  .lt-section--hero { padding-block: clamp(2.5rem, 8vw, 4rem); }
  .lt-display       { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.06; }
  .lt-btn           { height: 48px; }  /* larger touch target */
  .lt-chip          { padding: 0.5rem 0.95rem; font-size: var(--lt-text-md); }
}

/* Hover only on devices that support hover — prevents stuck hover on touch */
@media (hover: none) {
  .lt-listing-card:hover .lt-listing-card__img { transform: none; }
  .lt-hover-lift:hover { transform: none; box-shadow: var(--lt-elev-2); }
  .lt-btn:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   16. Scrollbar refinement (Webkit + Firefox)
   ----------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--lt-color-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--lt-color-border-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--lt-r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--lt-ink-4); background-clip: padding-box; border: 2px solid transparent; }