/* DA imposee : MEN-16 Laiton - Craft / Lora + Source Sans 3 / accent laiton brosse */
:root {
  /* couleurs (OKLCH derives) */
  --bg: #ECEBE6;
  --bg-alt: #E2E0D9;
  --bg-soft: #F4F2EC;
  --surface: #FBFAF6;
  --text: #2B2E30;
  --text-2: #555A5E;
  --text-mute: #8B8F92;
  --text-on-dark: #ECE7DC;
  --text-on-dark-2: #B8B3A5;
  --border: rgba(43, 46, 48, 0.16);
  --border-strong: rgba(43, 46, 48, 0.30);
  --accent: #B89150;                 /* laiton */
  --accent-deep: #8E6B33;             /* laiton patine fonce */
  --accent-soft: #E8D9B5;             /* laiton clair pour pastilles */
  --accent-on-dark: #D8B97A;          /* laiton tint clair lisible sur ink */
  --accent-2: #6C4E27;                /* bois noyer chaud (complement) */
  --primary: var(--text);
  --primary-deep: #181A1B;
  --ink-deep: #1A1C1D;
  --wa-green: #25D366;
  --wa-green-deep: #1FAB55;
  --success: #4A8B6F;

  /* polices */
  --ff-display: 'Lora', 'Libre Baskerville', Georgia, serif;
  --ff-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-ui: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* rayons */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* header + z-index */
  --header-h: 72px;
  --header-h-mobile: 60px;
  --z-fab: 900;
  --z-menu: 1000;
  --z-header: 1100;
  --z-burger: 1200;
  --z-modal: 1300;

  /* container */
  --container: 1200px;

  /* transitions */
  --t-fast: .2s ease;
  --t-mid: .35s ease;
  --t-slow: .6s ease;
}

::selection { background: var(--accent); color: #fff; }
::-moz-selection { background: var(--accent); color: #fff; }

html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-alt); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }

::placeholder { color: var(--text-mute); opacity: 1; font-family: var(--ff-body); }

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