:root {
  /* Charte graphique Alyneia */
  --couleur-primaire: #003366;
  --couleur-accent: #cc3366;
  --couleur-accent-fonce: #a3284f;
  --couleur-primaire-claire: #eef4f8;
  --couleur-texte: #1c2733;
  --couleur-bordure: #d9e1e8;
  --vert: #1f8a4c;
  --jaune: #b8860b;
  --rouge: #c62828;
  --gris: #6b7683;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--couleur-texte);
  background: #f6f8fa;
  margin: 0;
}

header.app-header {
  background: var(--couleur-primaire);
  color: white;
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--couleur-accent);
}

header.app-header a { color: white; text-decoration: none; font-weight: 600; }
header.app-header nav a { margin-left: 1rem; font-weight: 400; opacity: 0.9; }
header.app-header nav a:hover { opacity: 1; text-decoration: underline; }

main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }

.carte {
  background: white;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--couleur-bordure); }
th { background: var(--couleur-primaire-claire); font-size: 0.85rem; text-transform: uppercase; }

.voyant { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: 0.4rem; }
.voyant-vert { background: var(--vert); }
.voyant-jaune { background: var(--jaune); }
.voyant-rouge { background: var(--rouge); }
.voyant-gris { background: var(--gris); }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: var(--couleur-primaire-claire); }

.bouton {
  display: inline-block;
  background: var(--couleur-primaire);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
}
.bouton:hover { opacity: 0.92; }
.bouton.secondaire { background: white; color: var(--couleur-primaire); border: 1px solid var(--couleur-primaire); }
.bouton.danger { background: var(--rouge); }

.champ { margin-bottom: 1rem; }
.champ label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 6px;
  font-size: 0.95rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--couleur-accent);
}

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-tuile { background: white; border: 1px solid var(--couleur-bordure); border-radius: 8px; padding: 1rem; }
.stat-tuile .valeur { font-size: 1.6rem; font-weight: 700; color: var(--couleur-primaire); }
.stat-tuile .libelle { font-size: 0.85rem; color: var(--gris); }

.message-erreur { background: #fdecea; color: var(--rouge); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.message-succes { background: #eaf7ee; color: var(--vert); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }

.etapes { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.etapes span { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--couleur-primaire-claire); font-size: 0.8rem; }
.etapes span.active { background: var(--couleur-primaire); color: white; }