/* ==========================================================================
   theme.css — Système de design Forever Living (charte du logo)
   Palette relevée dans media/images/svg/logo-min.svg :
   olive #46573B · sauge #8C996A · doré #E2D158 · violet #302858
   Aucune dépendance externe : polices locales (asset/fonts).
   Charger APRÈS les deux fichiers de polices :
   <link rel="stylesheet" href="fonts/fonts_imports.css">
   <link rel="stylesheet" href="fonts/fonts.googleapis.css">
   <link rel="stylesheet" href="css/theme.css">
   <link rel="stylesheet" href="css/components.css">
   ========================================================================== */

:root {
  /* --- Couleurs de marque --- */
  --c-olive:        #46573B;
  --c-olive-hover:  #35402D;
  --c-olive-deep:   #2B3524;
  --c-violet:       #302858;
  --c-violet-hover: #241D44;
  --c-gold:         #E2D158;
  --c-gold-hover:   #D6C445;
  --c-sage:         #8C996A;
  --c-sauge-clair:  #7FAF8D;
  --c-aloe:         #7AA24B;
  --c-aloe-clair:   #E9EFE1;

  /* --- Surfaces & texte --- */
  --c-bg:          #F5F2E8;
  --c-surface:     #FFFFFF;
  --c-surface-alt: #EBE9DC;
  --c-cream:       #FBF7E4;
  --c-line:        #D9D4C4;
  --c-line-soft:   #EDE9DB;
  --c-line-input:  #86816F; /* bordures de champs : 3:1 minimum (WCAG 1.4.11) */
  --c-ink:         #1E1E1E;
  --c-ink-soft:    #3A3A3A;
  --c-muted:       #6B6B6B;

  /* --- États --- */
  --c-success: #2F6B3A;  --c-success-bg: #E8F0E4;
  --c-danger:  #A3231C;  --c-danger-bg:  #F7E6E4;
  --c-warning: #8A6B12;  --c-warning-bg: #FBF3D6;
  --c-info:    #302858;  --c-info-bg:    #ECEAF3;

  /* --- Typographie --- */
  --font-head:  'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-body:  'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Droid Serif', Georgia, serif;
  --fs-300: .8125rem;
  --fs-400: .9375rem;
  --fs-500: 1rem;
  --fs-600: 1.125rem;
  --fs-700: clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-800: clamp(1.5rem, 3vw, 2rem);
  --fs-900: clamp(1.75rem, 4.6vw, 3.125rem);
  --lh-tight: 1.18;
  --lh-base: 1.65;
  --ls-caps: .08em;

  /* --- Espacements (échelle de 4 px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- Rayons & ombres --- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(70, 87, 59, .08);
  --shadow:    0 4px 16px rgba(70, 87, 59, .12);
  --shadow-lg: 0 12px 32px rgba(48, 40, 88, .16);

  /* --- Mise en page --- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;
  --section-y: clamp(36px, 5vw, 64px);

  /* --- Divers --- */
  --t-fast: 150ms ease;
  --t: 250ms ease;
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Accessibilité : utilisateurs demandant plus de contraste */
@media (prefers-contrast: more) {
  :root {
    --c-muted: #4A4A4A;
    --c-line: #A9A28C;
    --shadow: 0 4px 16px rgba(0, 0, 0, .3);
  }
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-500);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  min-height: 100dvh;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }
p { max-width: 74ch; }
strong, b { font-weight: 700; }

/* Focus visible : navigation clavier accessible partout */
:focus-visible {
  outline: 3px solid var(--c-violet);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* On ne masque le focus que pour les interactions souris */
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   Utilitaires
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -80px;
  z-index: var(--z-toast);
  background: var(--c-violet);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

.text-caps {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.text-serif { font-family: var(--font-serif); font-style: italic; }
.text-muted { color: var(--c-muted); }
.text-center { text-align: center; }
.hr-gold { width: 64px; height: 2px; background: var(--c-gold); border: 0; margin: var(--sp-4) auto; }
.stack > * + * { margin-top: var(--sp-4); }

/* Accessibilité : respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}