/* Carrosserie du Gibloux — design v3.
   Identité conservée : logo, orange #CB5F2B, brun #24181D, Montserrat. Le reste est redessiné.
   Règles : tokens uniquement (couleurs, espaces, tailles), mobile d'abord, animations courtes sur transform/opacity,
   survols réservés aux pointeurs fins, contraste AA partout (l'orange de marque sert aux accents ;
   les boutons et liens utilisent ses nuances plus sombres). Ancienne feuille (v2) : _audit/style-v2.css. */

@font-face {
  font-family: "Montserrat";
  src: url("/theme/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  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 {
  /* Couleurs */
  --brand: #CB5F2B;          /* accents : icônes, filets, puces */
  --brand-600: #B4501F;      /* boutons (blanc dessus : 5.1:1) */
  --brand-700: #963F16;      /* liens et textes orange sur clair (6.9:1) */
  --brand-50: #FBEFE8;       /* fonds d'icônes */
  --ink: #24181D;            /* texte, fonds sombres */
  --ink-2: #3A2D32;
  --muted: #62565B;          /* texte secondaire (6.6:1 sur blanc) */
  --line: #E8E0DA;
  --sand: #F7F2EE;           /* sections alternées */
  --white: #FFFFFF;

  /* Typo (fluide 375 → 1440 px) */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --fs-lead: clamp(1.0625rem, 0.99rem + 0.38vw, 1.3125rem);
  --fs-h3: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);
  --fs-h2: clamp(1.75rem, 1.37rem + 1.6vw, 2.75rem);
  --fs-display: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Espaces */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --section: clamp(4rem, 2.6rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --header-h: 76px;

  /* Formes */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(36, 24, 29, .06), 0 1px 3px rgba(36, 24, 29, .08);
  --shadow-md: 0 4px 12px rgba(36, 24, 29, .08), 0 12px 32px rgba(36, 24, 29, .08);
  --shadow-lg: 0 24px 64px rgba(36, 24, 29, .18);

  /* Mouvement */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Sections du catalogue (theme-base/css/sections.css) calées sur ce thème : une section ajoutée par l'agent
   doit avoir la même typographie, les mêmes arrondis et les mêmes espacements que le reste du site. */
:root {
  --f16-accent: var(--brand-700);
  --f16-accent-bg: var(--brand-600);
  --f16-accent-soft: var(--brand-50);
  --f16-radius: var(--r-lg);
  --f16-radius-sm: var(--r-md);
  --f16-shadow: none;
  --f16-section: var(--section);
  --f16-gap: var(--s-6);
  --f16-head-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --f16-heading-weight: 800;
  --f16-heading-tracking: -0.02em;
  --f16-heading-lh: 1.15;
  --f16-h3-weight: 700;
  --f16-h2-size: var(--fs-h2);
  --f16-h3-size: var(--fs-h3);
  --f16-lead-size: var(--fs-lead);
  --f16-eyebrow-size: var(--fs-xs);
  --f16-eyebrow-weight: 700;
  --f16-eyebrow-tracking: 0.14em;
  --f16-eyebrow-rule: 28px;
}