/* ============================================================
   LA VRAC ATTITUDE — Variables CSS
   Modifiez ici pour changer le design sur TOUT le site
   ============================================================ */

:root {

  /* ── Couleurs principales ───────────────────────────────── */
  --green:         #4A8828;   /* vert forêt principal          */
  --green-dark:    #366018;   /* hover / vert plus foncé       */
  --green-light:   #EEF5E4;   /* fond clair vert               */
  --green-footer:  #1C2A14;   /* fond footer                   */
  --white:         #FFFFFF;
  --bg:            #F2F1EC;   /* fond de page (gris chaud)     */
  --bg-card:       #FFFFFF;   /* fond des cards                */

  /* ── Texte ──────────────────────────────────────────────── */
  --text:          #1A1A1A;   /* texte principal               */
  --text-muted:    #5C5C5C;   /* texte secondaire / labels     */
  --text-light:    #8A8A8A;   /* texte discret                 */

  /* ── Accent ─────────────────────────────────────────────── */
  --accent:        #F08030;   /* orange vif — CTA, bullets     */
  --accent-dark:   #D06010;   /* orange hover                  */

  /* ── Bordures ───────────────────────────────────────────── */
  --border:        #D8D6CF;
  --border-dark:   #B8B6AF;

  /* ── Typographie ────────────────────────────────────────── */
  --font-display:  'Grandstander', cursive;   /* titres, nav   */
  --font-body:     'Roboto', sans-serif;      /* texte courant */

  /* ── Tailles de texte ───────────────────────────────────── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;

  /* ── Espacements ────────────────────────────────────────── */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   40px;
  --sp-2xl:  64px;
  --sp-3xl:  96px;

  /* ── Coins arrondis ─────────────────────────────────────── */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    20px;
  --r-pill:  999px;

  /* ── Ombres ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 4px 14px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 28px rgba(0,0,0,.13);

  /* ── Header ─────────────────────────────────────────────── */
  --topbar-h:      34px;
  --header-h:      64px;

  /* ── Transitions ────────────────────────────────────────── */
  --tr:  .18s ease;
  --tr-slow: .32s ease;

  /* ── Largeur max du contenu ─────────────────────────────── */
  --max-w:   1180px;
  --content-pad: clamp(16px, 4vw, 40px);
}