/*
Theme Name: Trouvaille
Theme URI: https://planpromos.com/
Author: Planpromos
Author URI: https://planpromos.com/
Description: Trouvaille — French Premium edition. High-converting Temu affiliate site with editorial design language for the francophone market.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trouvaille
Domain Path: /languages
Tags: affiliate, coupon, french, editorial, translation-ready, responsive-layout
*/

:root {
  /* Surfaces */
  --tv-color-bg:         #F5EFE3;
  --tv-color-bg-alt:     #F5EFE3;
  --tv-color-surface:    #FFFFFF;
  --tv-color-paper:      #F5EFE3;
  --tv-color-paper-warm: #F5EFE3;
  --tv-color-hero-blue-deep:  #021E5A;
  --tv-color-hero-blue-light: #5C94F7;
  --tv-color-red:             #C8102E;  /* PMS 186 — editorial deep red, matches navy --tv-color-accent (v2.9.0) */
  --tv-color-red-dark:        #A30D24;  /* 12% darker — also used for hover (v2.9.0) */
  --tv-color-red-hover:       #A30D24;  /* alias for red-dark, semantic name (v2.9.0) */
  --tv-color-red-active:      #840A1D;  /* 22% darker — pressed/active state (v2.9.0) */

  /* Ink */
  --tv-color-ink:        #14110F;
  --tv-color-ink-soft:   #2A2522;
  --tv-color-muted:      #6B6660;
  --tv-color-rule:       #C7CCD3;
  --tv-color-rule-soft:  #D9DEE3;

  /* Accent — deep navy. Used sparingly. */
  --tv-color-accent:     #1E3A8A;
  --tv-color-accent-dark:#1E40AF;
  --tv-color-accent-soft:#DBE4F2;
  --tv-color-success:    #166534;
  --tv-color-success-soft:#D1FAE5;

  /* Typography */
  --tv-font-display:  "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --tv-font-body:     "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tv-font-accent:   "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  --tv-fs-xs:   0.75rem;
  --tv-fs-sm:   0.875rem;
  --tv-fs-base: 1rem;
  --tv-fs-md:   1.125rem;
  --tv-fs-lg:   1.375rem;
  --tv-fs-xl:   1.625rem;
  --tv-fs-2xl:  2.25rem;
  --tv-fs-3xl:  3rem;
  --tv-fs-4xl:  clamp(2.5rem, 5.5vw, 4rem);
  --tv-fs-numeral: clamp(3.5rem, 8vw, 5.5rem);

  --tv-lh-tight:  1.1;
  --tv-lh-snug:   1.25;
  --tv-lh-normal: 1.6;
  --tv-lh-loose:  1.75;
  --tv-track-display: -0.02em;
  --tv-track-eyebrow:  0.18em;

  /* Spacing */
  --tv-space-1: 0.25rem;
  --tv-space-2: 0.5rem;
  --tv-space-3: 0.75rem;
  --tv-space-4: 1rem;
  --tv-space-5: 1.5rem;
  --tv-space-6: 2rem;
  --tv-space-7: 3rem;
  --tv-space-8: 4.5rem;
  --tv-space-9: 6rem;
  --tv-space-10: 9rem;

  /* Radius (more restrained than coupon-site version) */
  --tv-radius-sm:   4px;
  --tv-radius-md:   8px;
  --tv-radius-lg:   14px;
  --tv-radius-2xl:  20px;
  --tv-radius-pill: 999px;

  /* Shadow */
  --tv-shadow-sm: 0 1px 2px rgba(20,17,15,0.04);
  --tv-shadow-md: 0 12px 30px rgba(20,17,15,0.08);
  --tv-shadow-lg: 0 24px 60px rgba(20,17,15,0.12);

  /* Motion */
  --tv-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --tv-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --tv-dur-fast:  180ms;
  --tv-dur-base:  400ms;
  --tv-dur-slow:  700ms;

  /* Layout */
  --tv-container: 1200px;
  --tv-container-narrow: 820px;
  --tv-gutter:    clamp(1rem, 4vw, 2.5rem);
  --tv-header-h:  72px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --tv-dur-fast: 0ms; --tv-dur-base: 0ms; --tv-dur-slow: 0ms; }
}

/* Mobile (≤899px): scale down all typography ~20% via token override.
   Desktop tokens are untouched. Every component using --tv-fs-* inherits
   the smaller mobile values automatically. */
@media (max-width: 899px) {
  :root {
    --tv-fs-xs:      0.625rem;                              /* 12 → 10 px (−17%) */
    --tv-fs-sm:      0.75rem;                               /* 14 → 12 px (−14%) */
    --tv-fs-base:    0.875rem;                              /* 16 → 14 px (−12.5%) */
    --tv-fs-md:      0.9375rem;                             /* 18 → 15 px (−17%) */
    --tv-fs-lg:      1.125rem;                              /* 22 → 18 px (−18%) */
    --tv-fs-xl:      1.3125rem;                             /* 26 → 21 px (−19%) */
    --tv-fs-2xl:     1.75rem;                               /* 36 → 28 px (−22%) */
    --tv-fs-3xl:     2.375rem;                              /* 48 → 38 px (−21%) */
    --tv-fs-4xl:     clamp(2rem, 4.4vw, 3.2rem);            /* clamp(2.5,5.5vw,4) → −20% */
    --tv-fs-numeral: clamp(2.75rem, 6.4vw, 4.4rem);         /* clamp(3.5,8vw,5.5) → −20% */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tv-color-bg);
  color: var(--tv-color-ink);
  font-family: var(--tv-font-body);
  font-size: var(--tv-fs-base);
  line-height: var(--tv-lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--tv-font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--tv-space-4);
  color: var(--tv-color-ink);
}
a { color: var(--tv-color-ink); text-decoration: none; }
a:hover { color: var(--tv-color-accent); }
img, svg, video { max-width: 100%; display: block; height: auto; }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}