/* ========================
   VARIABLES GLOBALES
======================== */
:root {
  /* Polices */
  --font-base: "Arial", sans-serif;
  --font-title: "Trebuchet MS", sans-serif;

  /* Couleurs principales (style tableau vert) */
  --color-bg: #f4f7f2;             /* fond global clair, proche papier */
  --color-text: #222;              /* texte noir/gris foncé */
  --color-primary: #2e7d32;        /* vert tableau */
  --color-primary-hover: #1b5e20;  /* vert tableau plus foncé */
  --color-secondary: #fdd835;      /* jaune craie */
  --color-secondary-hover: #f9a825;/* jaune un peu plus soutenu */
  --color-accent: #d32f2f;         /* rouge correction/crayon */
  --color-surface: #ffffff;        /* cartes, blocs, zones */

  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Bords arrondis */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Ombres */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.15);
}

/* ========================
   STYLE DE BASE
======================== */
body {
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: var(--space-md);
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

p {
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* Liens */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--color-primary-hover);
}

/* ========================
   BOUTONS
======================== */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: bold;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: var(--color-secondary);
  color: white;
}

.btn-secondary:hover {
  background: var(--color-secondary-hover);
}

.btn-accent {
  background: var(--color-accent);
  color: white;
}

.btn-accent:hover {
  filter: brightness(90%);
}

/* ========================
   CARTES / BLOCS
======================== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
}

/* ========================
   FORMULAIRES
======================== */
input, select, textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  margin-bottom: var(--space-md);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 3px var(--color-primary);
}

/* ========================
   TABLEAUX
======================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}

th, td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ddd;
}

th {
  background: var(--color-primary);
  color: white;
  text-align: left;
}

tr:nth-child(even) {
  background: #f2f2f2;
}

/* ========================
   UTILITAIRES
======================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }