:root {
  /* ============================================
     PALETTE DE COULEURS DE BASE
     ============================================ */
  
  /* Verts */
  --vert-1: #003d00;
  --vert-2: #007000;
  --vert-3: #00b300;
  --vert-4: #66dd66;
  --vert-5: #dcedc8;
  --vert-rle: #007147;
  --vert-rle-70: #4ca27e;
  --vert-rle-50: #80bca3;
  --vert-rle-10: #e6f2ed;
  --foret: #154734;
  --foret-70: #5b7e71;
  --foret-30: #8aa399;
  --vert-eau: #a1d6ca;
  --vert-eau-70: #bde2da;
  --vert-eau-50: #d0eae4;

  /* Bleus */
  --bleu-rle: #008ce6;
  --bleu-rle-70: #4caeed;
  --bleu-rle-50: #80c5f2;
  --bleu-rle-10: #e6f4ff;
  --bleu-marine: #00205b;
  --bleu-marine-70: #4c638c;
  --bleu-marine-50: #808fad;
  --bleu-horizon: #a4c8e1;
  --bleu-horizon-70: #bfd8ea;
  --bleu-horizon-50: #d1e3f0;

  /* Gris et dérivés */
  --gris-1: #1f1f1f;
  --gris-2: #3c3c3c;
  --gris-3: #7a7a7a;
  --gris-4: #b0b0b0;
  --gris-5: #e0e0e0;
  --gris-6: #f5f5f5;
  --carbone: #384f59;
  --carbone-70: #74848b;
  --carbone-50: #9ca7ac;
  --carbone-15: #d7dde0;

  /* ============================================
     SEMANTIC TOKENS
     ============================================ */
  --color-surface: #ffffff;
  --color-surface-muted: var(--gris-6);
  --color-text: var(--gris-1);
  --color-primary: var(--vert-rle);
  --color-primary-hover: var(--vert-2);
  --color-danger: #c33;
  --color-danger-strong: #c00;
  --color-danger-bg: #fee;
  --color-danger-bg-strong: #ffebee;
  --color-danger-border: #fcc;
  --color-on-primary: #ffffff;

  /* Ombres */
  --ombre-faible: rgba(0, 0, 0, 0.18);

  /* ============================================
     THÈME DU HEADER
     Modifier ces variables pour changer le style du header
     ============================================ */
  --header-bg: var(--carbone);
  --header-border: var(--carbone-70);
  --header-text: #ffffff;
  --header-text-secondary: rgba(255, 255, 255, 0.8);
  --header-btn-hover: rgba(255, 255, 255, 0.1);
  --header-btn-active: rgba(255, 255, 255, 0.15);

  /* ============================================
     THÈME DU FOOTER
     ============================================ */
  --footer-bg: var(--carbone);
  --footer-text: var(--gris-5);
  --footer-link: var(--vert-eau);
  --footer-link-hover: var(--vert-eau-70);

  /* ============================================
     THÈME DU CONTENU PRINCIPAL
     ============================================ */
  --content-bg: var(--color-surface-muted);

  /* ============================================
     TYPOGRAPHIE - TAILLES DE POLICE
     Ces variables peuvent être modifiées dans les paramètres
     ============================================ */
  --font-size-menu: 0.875rem;      /* Menus et navigation */
  --font-size-header: 1rem;        /* Titres du header */
  --font-size-page-title: 1.5rem;  /* Titres de page */
  --font-size-subtitle: 1rem;      /* Sous-titres */
  --font-size-text: 0.875rem;      /* Texte courant */
}