:root{
  /* ============================================================
     BASE PALETTE — extracted from villedechandler.com
     The brand is organised around four "publics" (audiences),
     each with its own signature colour, plus dark slate neutrals.
     ============================================================ */

  /* Chandler Olive — CITOYENS (citizens) section */
  --vc-olive-500:#b7b535;      /* primary olive/lime */
  --vc-olive-600:#c6c42a;      /* deeper olive (sidebar buttons) */
  --vc-olive-300:#d1d055;      /* hover / lighter olive */
  --vc-olive-100:#e6efc2;      /* olive tint surface */

  /* Chandler Cyan — TOURISTES + primary accent (sea / "Mer de possibilités") */
  --vc-cyan-400:#54cde7;       /* bright signature cyan */
  --vc-cyan-500:#1ca5d1;       /* mid cyan */
  --vc-cyan-600:#22adcb;       /* link/hover cyan */
  --vc-cyan-700:#369eba;       /* deep cyan (calendar header) */
  --vc-cyan-100:#d6f3fa;       /* cyan tint surface */

  /* Chandler Blue — SPORTS ET LOISIRS + event headers */
  --vc-blue-600:#334790;       /* royal indigo-blue */
  --vc-blue-500:#32458d;       /* hover blue */

  /* Chandler Purple — GENS D'AFFAIRES + activity banner */
  --vc-purple-600:#574a80;     /* muted violet band */
  --vc-purple-400:#6c6d7f;     /* hover */

  /* Chandler Pink — call-to-action / tile accent */
  --vc-pink-500:#f01d4f;       /* generic link / CTA accent */
  --vc-pink-600:#d10e3c;       /* pink hover */

  /* Slate neutrals — text, nav, footer */
  --vc-slate-900:#323944;      /* footer background */
  --vc-slate-800:#47485f;      /* primary dark (nav text, headings dark) */
  --vc-slate-600:#5c6b80;      /* form text / muted */
  --vc-slate-500:#4f4f4d;      /* body copy (warm grey) */
  --vc-slate-400:#97a4b2;      /* secondary text */
  --vc-slate-300:#cdcdcd;      /* hairlines dark-ish */
  --vc-grey-200:#e6e6e6;       /* borders */
  --vc-grey-100:#f0f0f0;       /* subtle fill */
  --vc-off-white:#f8f9fa;      /* page background */
  --vc-white:#ffffff;
  --vc-black:#000000;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  --color-bg:var(--vc-off-white);
  --color-surface:var(--vc-white);
  --color-surface-alt:var(--vc-grey-100);

  --color-text:var(--vc-slate-500);      /* default body */
  --color-heading:var(--vc-slate-800);   /* dark slate headings */
  --color-text-muted:var(--vc-slate-400);
  --color-text-invert:var(--vc-white);

  --color-border:var(--vc-grey-200);
  --color-border-strong:var(--vc-slate-300);

  --color-primary:var(--vc-cyan-500);        /* brand primary = sea cyan */
  --color-primary-hover:var(--vc-cyan-600);
  --color-accent:var(--vc-cyan-400);
  --color-cta:var(--vc-pink-500);
  --color-cta-hover:var(--vc-pink-600);

  --color-link:var(--vc-cyan-600);
  --color-link-hover:var(--vc-blue-600);

  /* Audience section colours (used by nav + section theming) */
  --section-citoyens:var(--vc-olive-500);
  --section-touristes:var(--vc-cyan-400);
  --section-affaires:var(--vc-purple-600);
  --section-sports:var(--vc-blue-600);
  --section-joindre:var(--vc-slate-800);

  --footer-bg:var(--vc-slate-900);
  --footer-text:var(--vc-off-white);
}