/* Tendu : jetons de la boutique (par-dessus public/base.css). Le dessin de chaque page est dans site.css.
   Direction (refonte du 12/11/2026) : page de vente d'équipement de sport haut de gamme. Vert forêt et ivoire,
   bois d'érable en matière, une seule famille de caractères (Archivo, variable en graisse et en chasse) :
   titres très grands, larges et légers ; surtitres en capitales étendues ; texte en chasse normale.
   Clair seulement (règle du SPEC : pas de mode sombre pour une boutique).
   V4 (13/11/2026) : ce design est repris tel quel à la demande d'Alex, sans voile sur les photos ni picto dessiné. */

/* Police auto-hébergée (sous-ensemble latin, SIL OFL), servie depuis /assets/fonts/, préchargée par shop.json. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Jetons du SPEC */
  --bg: #F4EEE3;            /* ivoire : fond du site */
  --surface: #FBF8F2;       /* papier : panneaux, tiroir */
  --ink: #16201C;           /* encre vert-noir : 15,6:1 sur --bg */
  --muted: #565C55;         /* texte secondaire : 6,1:1 sur --bg */
  --line: #DCD2C1;          /* filets */
  --accent: #15302A;        /* vert forêt : boutons, logotype, sections sombres (12,9:1 sur --bg) */
  --accent-ink: #F4EEE3;    /* ivoire sur le vert */
  --radius: 4px;            /* angles nets : un équipement, pas une appli */
  --tint: #E8DCC8;          /* fond des encarts du moteur (livraison, offre en un clic) */
  --ok: #15302A;
  --warn: #A8071A;
  --shadow-pop: none;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Jetons propres à Tendu */
  --forest: #15302A;
  --forest-deep: #0E211D;
  --forest-line: rgba(244, 238, 227, 0.18);
  --ivory: #F4EEE3;
  --ivory-muted: rgba(244, 238, 227, 0.74); /* 8,4:1 sur --forest */
  --wood: #C6A274;          /* érable huilé */
  --wood-soft: #E8DCC8;
  --paper: #FBF8F2;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --maxw: 1440px;

  /* Échelle V6 (14/11/2026) : courte. Texte 17 à 19 px ; titres de section 32 à 52 px ; le très grand (premier écran,
     un chiffre) seulement deux fois par page. */
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --t-xl: clamp(1.375rem, 2.1vw, 1.875rem);
  --t-2xl: clamp(2rem, 3.6vw, 3.25rem);
  --t-3xl: clamp(2.75rem, 5.6vw, 5.25rem);
  --t-num: clamp(4rem, 9vw, 8rem);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-m);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 340;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: inherit;
}
h3 { font-weight: 420; letter-spacing: -0.015em; line-height: 1.15; }
p, li { text-wrap: pretty; }

.price, table, [data-price], .tnd-num { font-variant-numeric: tabular-nums lining-nums; }

.eyebrow, .badge {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  font-stretch: 125%;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--wood); outline-offset: 3px; }

/* Boutons : rectangles nets, capitales étendues, pression physique */
.btn, button[type="submit"], .add-to-cart {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  padding: 1.05em 1.8em;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 240ms var(--ease), transform 160ms var(--ease), color 240ms var(--ease);
}
@media (hover: hover) { .btn:hover, button[type="submit"]:hover, .add-to-cart:hover { background: var(--forest-deep); color: var(--accent-ink); } }
.btn:active, button[type="submit"]:active, .add-to-cart:active { transform: scale(0.98); }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; }
@media (hover: hover) { .btn-secondary:hover { background: var(--ink); color: var(--bg); } }

/* Pastilles du sélecteur de coloris */
[data-swatch="Crème"] { --swatch: #EEE5D3; }
[data-swatch="Noir"]  { --swatch: #1A1A18; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}