:root {
  /* Front-office, theme recyclage */
  --front-vert-50: #f0f7f3;
  --front-vert-100: #dff3e4;
  --front-vert-500: #2fa84f;
  --front-vert-700: #17663a;
  --front-bleu-100: #dcebf7;
  --front-bleu-500: #1b7fc4;
  --front-jaune-100: #fbf1ce;
  --front-jaune-500: #efc93a;
  --front-fond: #f6f5f0;
  --front-surface: #ffffff;
  --front-bordure: #e4e2d9;
  --front-texte-2: #5e655e;
  --front-texte-1: #1c2320;

  /* Back-office, theme gestion et ecologie */
  --back-vert-100: #d7e3dc;
  --back-vert-400: #7c9a8e;
  --back-vert-700: #1f4d3d;
  --back-turquoise-100: #d5e8e6;
  --back-turquoise-500: #2a7f7a;
  --back-fond: #f3f5f3;
  --back-surface: #ffffff;
  --back-bordure: #dce2de;
  --back-graphite: #232b28;
  --back-texte-2: #5a635e;
  --back-texte-1: #151b18;

  /* Couleurs fonctionnelles, communes aux deux espaces */
  --info-100: #e3edf8;
  --info-500: #2f6fb0;
  --succes-100: #e2f1e8;
  --succes-500: #2e8b57;
  --alerte-100: #f7efd4;
  --alerte-500: #c9a227;
  --erreur-100: #f6e3e1;
  --erreur-500: #a32a21;
  --encours-100: #eae3f5;
  --encours-500: #6b4e9e;
  --neutre-100: #eceeed;
  --neutre-500: #5a635e;

  /* Espacements, multiples de 4 */
  --e4: 4px;
  --e8: 8px;
  --e12: 12px;
  --e16: 16px;
  --e24: 24px;
  --e32: 32px;
  --e48: 48px;
  --e64: 64px;

  /* Rayons */
  --r4: 4px;
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --rond: 999px;

  /* Typographie */
  --police: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-titre1: 28px;
  --t-titre2: 20px;
  --t-titre3: 16px;
  --t-corps: 14px;
  --t-petit: 13px;
  --t-legende: 11px;

  /* Espace actif, redefini par les gabarits */
  --fond: var(--back-fond);
  --surface: var(--back-surface);
  --bordure: var(--back-bordure);
  --texte-1: var(--back-texte-1);
  --texte-2: var(--back-texte-2);
  --action: var(--back-vert-700);
  --action-appui: var(--back-turquoise-500);
  --badge-fond: var(--back-vert-100);
  --sur-action: #ffffff;
}

.espace-front {
  --fond: var(--front-fond);
  --surface: var(--front-surface);
  --bordure: var(--front-bordure);
  --texte-1: var(--front-texte-1);
  --texte-2: var(--front-texte-2);
  --action: var(--front-vert-500);
  --action-appui: var(--front-vert-700);
  --badge-fond: var(--front-vert-100);
  --sur-action: #ffffff;
}

.espace-back {
  --fond: var(--back-fond);
  --surface: var(--back-surface);
  --bordure: var(--back-bordure);
  --texte-1: var(--back-texte-1);
  --texte-2: var(--back-texte-2);
  --action: var(--back-vert-700);
  --action-appui: var(--back-turquoise-500);
  --badge-fond: var(--back-vert-100);
  --sur-action: #ffffff;
}