/* ============================================================
   Tu m'ramènes ? — Styles du tableau de bord superviseurs
   Fichier : tableau.css (à placer à côté du plugin tableau)
   Couleurs association : vert #2D6B42 / orange #FE7666
   ============================================================ */

.tu-mramenes-tableau-wrapper{
  --tumr-primary:#FE7666;
  --tumr-secondary:#2D6B42;
  --tumr-light:#f4f4f2;
  --tumr-text:#222;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--tumr-text);
  max-width:1200px;
  margin:0 auto;
}

/* En-tête */
.tu-mramenes-header{
  background:linear-gradient(130deg,rgba(45,107,66,.95),rgba(254,118,102,.9));
  color:#fff; padding:24px; border-radius:12px; margin-bottom:20px;
}
.tu-mramenes-header h2{ margin:0 0 6px; color:#fff; font-size:24px; }
.tu-mramenes-header p{ margin:0; color:#fff; opacity:.95; }

/* Filtres */
.tu-mramenes-filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;
}
.tu-mramenes-filters .filter-btn{
  background:#fff; color:var(--tumr-text); border:2px solid var(--tumr-primary);
  padding:10px 18px; border-radius:8px; font-weight:700; font-size:14px;
  cursor:pointer; transition:all .2s;
}
.tu-mramenes-filters .filter-btn:hover{ background:rgba(254,118,102,.12); }
.tu-mramenes-filters .filter-btn.active{
  background:var(--tumr-primary); color:#fff;
}

/* Grille de cartes */
.tu-mramenes-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px;
}
.tu-card{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.08); border-top:5px solid #ccc;
  transition:transform .2s, box-shadow .2s;
}
.tu-card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.tu-card.card-demand{ border-top-color:var(--tumr-primary); }
.tu-card.card-offer{ border-top-color:var(--tumr-secondary); }

/* En-tête de carte */
.tu-card .card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--tumr-light); gap:10px; flex-wrap:wrap;
}
.tu-card .badge{
  font-size:12px; font-weight:700; padding:5px 10px; border-radius:20px; color:#fff;
}
.tu-card .badge-orange{ background:var(--tumr-primary); }
.tu-card .badge-green{ background:var(--tumr-secondary); }
.tu-card .date-small{ font-size:12px; color:#666; }

/* Corps de carte */
.tu-card .card-body{ padding:16px; }
.tu-card .field-group{ margin-bottom:16px; }
.tu-card .field-group h4{
  margin:0 0 8px; font-size:14px; color:var(--tumr-secondary);
  border-bottom:1px solid #eee; padding-bottom:5px;
}
.tu-card .field{
  display:flex; gap:8px; font-size:14px; margin-bottom:5px; align-items:baseline;
}
.tu-card .field label{ font-weight:700; min-width:110px; color:#555; }
.tu-card .field span{ color:var(--tumr-text); word-break:break-word; }
.tu-card .mail-link{ color:var(--tumr-primary); text-decoration:none; font-weight:600; }
.tu-card .mail-link:hover{ text-decoration:underline; }

/* Métadonnées */
.tu-card .field-group.meta{
  margin-bottom:0; padding-top:10px; border-top:1px dashed #e5e5e5;
}
.tu-card .field-group.meta small{ color:#999; font-size:12px; }

/* Pied */
.tu-mramenes-footer{ text-align:center; margin-top:20px; color:#999; }

/* Messages d'alerte (accès) */
.tu-mramenes-alert{
  max-width:600px; margin:20px auto; padding:20px; border-radius:10px;
  text-align:center; font-family:Arial,Helvetica,sans-serif;
}
.tu-mramenes-alert p{ margin:6px 0; }
.tu-mramenes-alert .button{
  display:inline-block; margin-top:10px; padding:10px 20px; border-radius:8px;
  background:var(--tumr-secondary,#2D6B42); color:#fff; text-decoration:none; font-weight:700;
}
.alert-warning{ background:#fff8e6; border:1px solid #f0d68a; }
.alert-danger{ background:#fdecec; border:1px solid #f3b4b4; }
.alert-info{ background:#eef6f0; border:1px solid #b9d9c4; }

/* Responsive */
@media(max-width:600px){
  .tu-mramenes-cards{ grid-template-columns:1fr; }
  .tu-card .field{ flex-direction:column; gap:2px; }
  .tu-card .field label{ min-width:auto; }
}