/* ============================================================
   grille.css — Design system « Agri » (Algharbagri / LPAM)
   Grilles de données denses mais élégantes : cartes douces,
   en-têtes verts collants, zébré subtil, survol ambré, chiffres
   tabulaires. Chargé APRÈS le <style> de chaque page → surcharge.
   ============================================================ */

:root{
  --g-vert:#1f7a44; --g-vert-fonce:#155e33; --g-vert-clair:#2e9d59;
  --g-or:#f2a900; --g-or-clair:#fff6dd;
  --g-bord:#e4eae2; --g-bord-fort:#d3ddd2; --g-zebre:#f5faf6;
  --g-txt:#213027; --g-gris:#6f7f76; --g-bg:#eef2ec;
}

/* ---- Fond & largeur : profiter de l'écran ---- */
body{ background:var(--g-bg) !important; color:var(--g-txt); }
.wrap{ max-width:1560px !important; }
@media(max-width:1000px){ .wrap{ max-width:100% !important; } }

/* ---- Bandeau de titre : vert unifié, élégant ---- */
header{ background:linear-gradient(120deg,#1f7a44,#12512c) !important; box-shadow:0 2px 10px rgba(18,60,35,.18); }

/* ---- Cartes : blanches, arrondies, ombrées ---- */
.carte{
  background:#fff !important; border:1px solid var(--g-bord) !important;
  border-radius:14px !important; padding:16px 18px !important;
  box-shadow:0 1px 2px rgba(20,60,35,.05), 0 8px 22px rgba(20,60,35,.05) !important;
}

/* ---- Champs de saisie ---- */
input, select, textarea{
  border:1px solid var(--g-bord-fort) !important; border-radius:9px !important;
  padding:7px 11px !important; font-size:14px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none !important; border-color:var(--g-vert) !important;
  box-shadow:0 0 0 3px rgba(31,122,68,.16) !important;
}
label{ color:var(--g-gris); }

/* ---- Boutons ---- */
.btn{ border-radius:10px !important; padding:11px 14px !important; font-size:15px; letter-spacing:.2px; box-shadow:0 2px 6px rgba(20,60,35,.12); }
.btn-petit{ border-radius:9px !important; padding:7px 13px !important; }
.btn:hover, .btn-petit:hover{ filter:brightness(1.07); }
.btn:active, .btn-petit:active{ transform:translateY(1px); }

/* ---- Onglets : pastilles modernes ---- */
.onglet{ border-radius:10px !important; border:1px solid var(--g-bord-fort) !important; padding:8px 16px !important; transition:all .15s; }
.onglet.actif{ background:var(--g-vert) !important; border-color:var(--g-vert) !important; color:#fff !important; box-shadow:0 2px 8px rgba(31,122,68,.3); }

/* ============ LES TABLEAUX ============ */
.scroll-x{ border-radius:12px; }
table{ border-collapse:separate !important; border-spacing:0 !important; width:100%; }

/* En-tête : dégradé vert, collant, majuscules fines */
thead th{
  background:linear-gradient(180deg,#22854a,#186438) !important; color:#fff !important;
  font-weight:600 !important; font-size:11.5px !important; letter-spacing:.5px; text-transform:uppercase;
  padding:9px 12px !important; text-align:left; white-space:nowrap;
  border:none !important; border-bottom:2px solid var(--g-vert-fonce) !important;
  position:sticky; top:0; z-index:3;
}
thead th:first-child{ border-top-left-radius:12px; }
thead th:last-child{ border-top-right-radius:12px; }

/* Cellules : trait horizontal fin, pas de grille lourde */
tbody td{
  padding:6px 12px !important; font-size:13.5px !important; color:var(--g-txt) !important;
  border:none !important; border-bottom:1px solid var(--g-bord) !important;
}
th.g, td.g{ text-align:left !important; }
td.num, th.num, td.pos, td.neg{ text-align:right !important; font-variant-numeric:tabular-nums; }

/* Zébré très léger + survol ambré avec liseré doré à gauche */
tbody tr:nth-child(even) td{ background:var(--g-zebre); }
tbody tr:hover td{ background:var(--g-or-clair) !important; }
tbody tr:hover td:first-child{ box-shadow:inset 4px 0 0 var(--g-or); }

/* Pied de tableau (totaux) */
tfoot td{ background:#eaf3ec !important; color:var(--g-txt) !important; font-weight:700 !important; border:none !important; border-top:2px solid var(--g-bord-fort) !important; }

/* ---- Loupe de colonne + popup de filtre ---- */
.loupe{ opacity:.7; margin-left:6px; font-size:11px; cursor:pointer; transition:.15s; }
.loupe:hover, .loupe.actif{ opacity:1; color:var(--g-or); }
#col-pop{ position:absolute; z-index:90; background:#fff; border:1px solid var(--g-vert); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.18); padding:8px; }
#col-pop input{ width:190px; }

/* ---- Barre de filtres encadrée ---- */
.filtre-box{ border:1px solid var(--g-bord) !important; border-radius:12px !important; background:#fff; padding:11px 15px; margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; box-shadow:0 1px 3px rgba(20,60,35,.05); }
.filtre-box legend{ font-weight:700; color:var(--g-vert); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; padding:0 6px; }
.filtre-box .lbl{ font-size:13px; color:var(--g-gris); font-weight:600; }
.filtre-box input[type=month], .filtre-box input[type=date]{ width:auto !important; }
.filtre-box input[type=text]{ flex:1 1 200px; min-width:160px; }
.btn-rech{ background:var(--g-vert) !important; color:#fff !important; border:none !important; border-radius:9px !important; padding:8px 22px !important; font-weight:700; cursor:pointer; box-shadow:0 2px 8px rgba(31,122,68,.28); }
.btn-rech:hover{ filter:brightness(1.08); }

/* ---- Ligne de saisie en tableau + bouton ➕ ---- */
.sec-tete{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.form-tbl{ width:100%; border-collapse:separate; border-spacing:0; white-space:nowrap; }
.form-tbl th{ background:linear-gradient(180deg,#22854a,#186438); color:#fff; text-align:left; padding:6px 10px; }
.form-tbl td{ padding:4px 8px; border-bottom:1px solid var(--g-bord); vertical-align:middle; }
.form-tbl input{ min-width:120px; }
.form-tbl td.act{ text-align:center; width:1%; white-space:nowrap; }
.btn-plus{ background:var(--g-vert) !important; color:#fff !important; border:none !important; border-radius:9px !important; height:30px; padding:0 16px !important; font-size:18px; font-weight:700; cursor:pointer; box-shadow:0 2px 6px rgba(31,122,68,.3); }
.btn-plus:hover{ background:var(--g-vert-fonce) !important; }

/* ---- KPI / cases récap : cartes douces ---- */
.kpi, .recap .case, .case{ border-radius:12px !important; border:1px solid var(--g-bord) !important; background:#fff !important; box-shadow:0 1px 3px rgba(20,60,35,.05); }

/* ---- Petits plus : jolie barre de défilement ---- */
.scroll-x::-webkit-scrollbar{ height:9px; }
.scroll-x::-webkit-scrollbar-thumb{ background:#c3d2c6; border-radius:6px; }
.scroll-x::-webkit-scrollbar-thumb:hover{ background:var(--g-vert-clair); }

/* ---- Téléphone : plus compact, badge réduit, tables défilables ---- */
@media(max-width:768px){
  .wrap{ padding-left:10px !important; padding-right:10px !important; }
  .carte{ padding:12px !important; border-radius:12px !important; }
  thead th{ padding:7px 9px !important; font-size:11px !important; }
  tbody td{ padding:5px 9px !important; font-size:13px !important; }
  .filtre-box{ padding:9px 11px; }
  #ferme-badge{ padding:4px 9px !important; font-size:11px !important; }
  #ferme-badge span{ display:none; }   /* on masque le petit libellé « FERME » sur mobile */
  header h1{ font-size:17px !important; }
}
/* Les tables déjà dans un conteneur .scroll-x défilent proprement à l'horizontale */
.scroll-x{ -webkit-overflow-scrolling:touch; }