/* =====================================================================
   Manko Invest SAS - Feuille de style
   Mobile-first, sobre, ton corporate vert/blanc. Aucune dépendance CDN.
   ===================================================================== */

:root {
  --vert-principal: #0f6b3c;
  --vert-fonce: #0a4d2a;
  --vert-clair: #e6f4ec;
  --gris-texte: #2b2f33;
  --gris-bordure: #d9e0dc;
  --gris-fond: #f6f8f7;
  --rouge: #b3261e;
  --orange: #a5650a;
  --blanc: #ffffff;
  --rayon: 8px;
  --ombre: 0 1px 3px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gris-fond);
  color: var(--gris-texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--vert-principal); text-decoration: none; }
a:hover { text-decoration: underline; }

.conteneur {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- En-tête ---- */
header.entete {
  background: var(--vert-fonce);
  color: var(--blanc);
  padding: 14px 0;
}
header.entete .conteneur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
header.entete a { color: var(--blanc); }
header.entete .logo { font-weight: 700; font-size: 1.15rem; }
header.entete nav a {
  margin-left: 14px;
  font-size: 0.92rem;
}
header.entete .role-badge {
  background: var(--vert-principal);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  margin-left: 10px;
}

main.contenu {
  padding: 24px 0 60px;
  min-height: 60vh;
}

footer.pied {
  background: var(--vert-fonce);
  color: #cfe6d8;
  text-align: center;
  padding: 16px;
  font-size: 0.85rem;
}

/* ---- Cartes / blocs ---- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--ombre);
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stat {
  background: var(--vert-clair);
  border-radius: var(--rayon);
  padding: 16px;
  text-align: center;
}
.stat .valeur { font-size: 1.9rem; font-weight: 700; color: var(--vert-fonce); }
.stat .libelle { font-size: 0.85rem; color: #4b564f; margin-top: 4px; }

/* ---- Formulaires ---- */
form.formulaire { max-width: 640px; }
.champ { margin-bottom: 14px; }
.champ label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.92rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=tel], input[type=file],
select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  font-size: 1rem;
  background: var(--blanc);
  color: var(--gris-texte);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vert-principal);
  box-shadow: 0 0 0 3px rgba(15,107,60,0.15);
}
.aide { font-size: 0.8rem; color: #6b756f; margin-top: 4px; }

/* ---- Boutons ---- */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--rayon);
  border: 1px solid var(--vert-principal);
  background: var(--vert-principal);
  color: var(--blanc);
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--vert-fonce); text-decoration: none; }
.btn-secondaire { background: var(--blanc); color: var(--vert-principal); }
.btn-danger { background: var(--rouge); border-color: var(--rouge); }
.btn-danger:hover { background: #8a1e18; }
.btn-petit { padding: 5px 10px; font-size: 0.82rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- Tableaux ---- */
.table-scroll { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  font-size: 0.92rem;
}
table th, table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--gris-bordure);
  text-align: left;
  vertical-align: top;
}
table th { background: var(--vert-clair); color: var(--vert-fonce); }
table tr:hover { background: #fafcfb; }

/* ---- Badges de statut ---- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge-vert   { background: #e1f5e6; color: #0f6b3c; }
.badge-orange { background: #fbeee0; color: #a5650a; }
.badge-rouge  { background: #fbe2e0; color: #b3261e; }
.badge-gris   { background: #e9ecea; color: #4b564f; }
.badge-bleu   { background: #e2edfb; color: #1a4c8a; }

/* ---- Alertes / flash messages ---- */
.alerte { padding: 12px 14px; border-radius: var(--rayon); margin-bottom: 16px; font-size: 0.92rem; }
.alerte-succes { background: #e1f5e6; color: #0f6b3c; border: 1px solid #b8e2c6; }
.alerte-erreur { background: #fbe2e0; color: #8a1e18; border: 1px solid #f0bcb8; }
.alerte-info   { background: #e2edfb; color: #1a4c8a; border: 1px solid #bcd6f0; }

/* ---- Navigation latérale (admin) ---- */
.mise-en-page-admin { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.menu-lateral {
  flex: 0 0 210px;
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.menu-lateral a {
  display: block;
  padding: 10px 14px;
  color: var(--gris-texte);
  border-bottom: 1px solid var(--gris-bordure);
  font-size: 0.9rem;
}
.menu-lateral a:hover, .menu-lateral a.actif { background: var(--vert-clair); text-decoration: none; color: var(--vert-fonce); font-weight: 600; }
.contenu-admin { flex: 1 1 500px; min-width: 0; }

/* ---- Connexion / pages centrées ---- */
.page-connexion {
  max-width: 420px;
  margin: 40px auto;
}
.page-connexion .carte { text-align: left; }
.page-connexion h1 { text-align: center; font-size: 1.4rem; color: var(--vert-fonce); }

/* ---- Impression (PV, feuille de présence) ---- */
@media print {
  header.entete, footer.pied, .menu-lateral, .no-print { display: none !important; }
  body { background: #fff; }
  .carte { box-shadow: none; border: none; }
}

/* ---- Divers ---- */
.text-muted { color: #6b756f; font-size: 0.88rem; }
.mt-0 { margin-top: 0; }
.flex-entre { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
hr.separateur { border: none; border-top: 1px solid var(--gris-bordure); margin: 18px 0; }

@media (max-width: 640px) {
  .mise-en-page-admin { flex-direction: column; }
  .menu-lateral { flex: 1 1 auto; width: 100%; }
  header.entete nav a { margin-left: 8px; }
}