/* ============================================================
   Gestion des Directions Communales — AE Global Service
   Design institutionnel : vert béninois, sobre, crédible.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  --vert:        #0A6B3B;
  --vert-fonce:  #075030;
  --vert-clair:  #E8F3EC;
  --jaune:       #FCD116;
  --rouge:       #CE1126;
  --encre:       #16201A;
  --gris-900:#1f2724; --gris-700:#3c4742; --gris-500:#6b756f;
  --gris-300:#cdd6d0; --gris-200:#e4ebe6; --gris-100:#f1f5f2; --gris-50:#f8faf9;
  --blanc:#ffffff;
  --ombre-sm: 0 1px 2px rgba(16,32,24,.06), 0 1px 3px rgba(16,32,24,.08);
  --ombre-md: 0 4px 12px rgba(16,32,24,.08);
  --ombre-lg: 0 12px 32px rgba(16,32,24,.12);
  --rayon: 12px; --rayon-sm: 8px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--encre); background: var(--gris-50); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Bande drapeau ---------- */
.flag-band { display: flex; height: 4px; }
.flag-band i { flex: 1; }
.flag-band .g { background: var(--vert); } .flag-band .y { background: var(--jaune); } .flag-band .r { background: var(--rouge); }

/* ---------- Auth (connexion / installation) ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--vert-clair), var(--gris-50)); }
.auth-card { width: 100%; max-width: 460px; background: var(--blanc); border-radius: var(--rayon);
  box-shadow: var(--ombre-lg); overflow: hidden; }
.auth-card.large { max-width: 560px; }
.auth-head { padding: 30px 32px 22px; text-align: center; }
.auth-head .blason { width: 56px; height: 38px; margin: 0 auto 14px; border-radius: 6px; overflow: hidden; box-shadow: var(--ombre-sm); }
.auth-head h1 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--vert-fonce); letter-spacing: -.01em; }
.auth-head .sub { color: var(--gris-500); font-size: .9rem; margin-top: 4px; }
.auth-body { padding: 8px 32px 30px; }
.auth-foot { padding: 16px 32px; background: var(--gris-50); border-top: 1px solid var(--gris-200);
  text-align: center; font-size: .76rem; color: var(--gris-500); }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 15px; }
.champ label { display: block; font-size: .82rem; font-weight: 600; color: var(--gris-700); margin-bottom: 6px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--gris-300); border-radius: var(--rayon-sm);
  font-family: inherit; font-size: .95rem; background: var(--blanc); color: var(--encre); transition: border-color .15s, box-shadow .15s; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(10,107,59,.12); }
.champ textarea { resize: vertical; min-height: 90px; }
.champ .aide { font-size: .74rem; color: var(--gris-500); margin-top: 4px; }
.deux-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .deux-cols { grid-template-columns: 1fr; } }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: none; border-radius: var(--rayon-sm); font-family: inherit; font-size: .92rem;
  font-weight: 600; cursor: pointer; transition: transform .05s, box-shadow .15s, background .15s; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--vert); color: #fff; box-shadow: var(--ombre-sm); }
.btn-primary:hover { background: var(--vert-fonce); text-decoration: none; }
.btn-secondary { background: var(--gris-100); color: var(--gris-700); }
.btn-secondary:hover { background: var(--gris-200); text-decoration: none; }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-bloc { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: .82rem; }

/* ---------- Messages flash ---------- */
.flash { padding: 11px 14px; border-radius: var(--rayon-sm); font-size: .87rem; margin-bottom: 12px; border: 1px solid transparent; }
.flash.succes { background: var(--vert-clair); color: var(--vert-fonce); border-color: #bfe0cc; }
.flash.erreur { background: #fdeaec; color: #9a0f1c; border-color: #f3c2c7; }
.flash.info   { background: #eef4fb; color: #1f4f80; border-color: #cfe0f2; }

/* ---------- Layout application ---------- */
.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.sidebar { background: var(--vert-fonce); color: #dff0e6; display: flex; flex-direction: column; }
.sidebar .marque { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar .marque .nom { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: #fff; line-height: 1.25; }
.sidebar .marque .meta { font-size: .74rem; color: #a9cdb7; margin-top: 3px; }
.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: var(--rayon-sm);
  color: #cfe6d8; font-size: .9rem; font-weight: 500; margin-bottom: 2px; }
.nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.nav a.actif { background: rgba(255,255,255,.16); color: #fff; }
.nav a .ic { width: 18px; text-align: center; opacity: .9; }
.nav .groupe { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #87b79b; padding: 14px 13px 6px; }
.sidebar .compte { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
.sidebar .compte .qui { color: #fff; font-weight: 600; }
.sidebar .compte .role { color: #a9cdb7; font-size: .74rem; }
.sidebar .compte a { color: #ffd9dc; font-size: .8rem; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { background: var(--blanc); border-bottom: 1px solid var(--gris-200); padding: 14px 26px;
  display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { font-family: var(--serif); font-weight: 600; font-size: 1.24rem; color: var(--gris-900); }
.topbar .date { font-size: .82rem; color: var(--gris-500); }
.btn-menu { display: none; background: none; border: none; font-size: 1.5rem; color: var(--vert-fonce); cursor: pointer; padding: 0 12px 0 0; line-height: 1; }
.voile-menu { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; }
.voile-menu.visible { display: block; }
.contenu { padding: 26px; max-width: 1180px; width: 100%; }

/* ---------- Cartes & grilles ---------- */
.carte { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); box-shadow: var(--ombre-sm); }
.carte .carte-tete { padding: 16px 18px; border-bottom: 1px solid var(--gris-100); display:flex; align-items:center; justify-content:space-between; }
.carte .carte-tete h2 { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--gris-900); }
.carte .carte-corps { padding: 18px; }
.grille { display: grid; gap: 16px; }
.grille.c4 { grid-template-columns: repeat(4, 1fr); }
.grille.c3 { grid-template-columns: repeat(3, 1fr); }
.grille.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .grille.c4 { grid-template-columns: repeat(2,1fr); }
  .grille.c3, .grille.c2 { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .btn-menu { display: block; }
  .topbar { padding: 14px 18px; }
  .topbar h1 { font-size: 1.08rem; }
  .topbar .date { display: none; }
  .contenu { padding: 18px 16px; }
  /* Sidebar devient un panneau coulissant */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 84vw;
    z-index: 50; transform: translateX(-100%); transition: transform .25s ease;
    overflow-y: auto; box-shadow: 2px 0 16px rgba(0,0,0,.2);
  }
  .sidebar.ouvert { transform: translateX(0); }
}

/* ---------- Stat cards ---------- */
.stat { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre-sm); }
.stat .v { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; color: var(--vert); line-height: 1; }
.stat .l { font-size: .8rem; color: var(--gris-500); margin-top: 6px; }
.stat.alerte .v { color: var(--rouge); }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tableau th { text-align: left; padding: 10px 12px; background: var(--gris-50); color: var(--gris-700);
  font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--gris-200); }
.tableau td { padding: 11px 12px; border-bottom: 1px solid var(--gris-100); }
.tableau tr:hover td { background: var(--gris-50); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .73rem; font-weight: 600; }
.badge.vert { background: var(--vert-clair); color: var(--vert-fonce); }
.badge.jaune { background: #fff6d6; color: #8a6d00; }
.badge.rouge { background: #fdeaec; color: #9a0f1c; }
.badge.gris { background: var(--gris-100); color: var(--gris-700); }
.badge.bleu { background: #eef4fb; color: #1f4f80; }

/* ---------- Direction card (superviseur) ---------- */
.dir-carte { display:block; background: var(--blanc); border: 1px solid var(--gris-200); border-left: 4px solid var(--vert);
  border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre-sm); transition: box-shadow .15s, transform .05s; }
.dir-carte:hover { box-shadow: var(--ombre-md); text-decoration: none; }
.dir-carte .code { font-family: var(--serif); font-weight: 700; color: var(--vert-fonce); font-size: 1.1rem; }
.dir-carte .titre { font-size: .86rem; color: var(--gris-700); margin: 4px 0 12px; min-height: 38px; }
.dir-carte .mini { display: flex; gap: 14px; font-size: .78rem; color: var(--gris-500); }
.dir-carte .mini b { color: var(--gris-900); }

.titre-section { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--gris-900); margin: 4px 0 14px; }
.vide { text-align:center; color: var(--gris-500); padding: 30px 16px; font-size: .9rem; }
.vide .ic { font-size: 1.8rem; display:block; margin-bottom: 8px; opacity:.6; }

/* Champ d'upload d'image (back-office) */
.champ-image .apercu-img{margin:8px 0;display:inline-block}
.champ-image .apercu-img img{max-width:200px;max-height:130px;border-radius:8px;border:1px solid #e0e0e0;display:block}
.champ-image .suppr-img{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#b00;margin-top:6px;font-weight:normal;cursor:pointer}
.champ-image .suppr-img input{width:auto}
.champ-image input[type=file]{display:block;margin-top:6px;font-size:.88rem}