/* =========================================================
   IDEO-Lab UI — Thème commun (sobre, type Django)
   ========================================================= */

/* ---------- Thème (variables) ---------- */
:root{
  --bg:         #0c1013;    /* fond global */
  --bg-2:       #0a0f0b;    /* dégradé/fond 2 */
  --card-a:     #113423;    /* fond carte haut */
  --card-b:     #0c271c;    /* fond carte bas  */
  --card-hover: #573573;    /* fond hover léger */

  --text:       #f1fff6;    /* titres */
  --text-2:     #cff5e1;    /* paragraphes */
  --muted:      rgba(226,232,240,.8);

  --border:     rgba(41,120,84,.85);
  --border-2:   rgba(148,163,184,.35);

  --accent:     #3dd191;    /* vert sobre (soulignements / focus) */
  --accent-2:   #0f7f59;    /* bouton principal */
  --pill-bg:    rgba(255,255,255,.06);
  --pill-bd:    rgba(200,255,230,.25);

  --modal-bg-a: #0a1510;
  --modal-bg-b: #09110d;

  --code-bg:    #0a1510;
  --code-bd:    rgba(56,173,120,.45);

  --shadow-1:   0 10px 24px rgba(0,0,0,.35);
  --shadow-2:   0 18px 48px rgba(11,180,117,.18), 0 8px 22px rgba(0,0,0,.45);
  --shadow-m:   0 30px 80px rgba(0,0,0,.72);
}

/* ---------- Fond global ---------- */
body{
  background: linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%) !important;
}

/* ---------- Grilles ---------- */
/* On couvre .grid et .kgrid pour compat rétro */
.ig-grid, .grid, .kgrid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1300px){ .ig-grid, .grid, .kgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .ig-grid, .grid, .kgrid{ grid-template-columns:1fr; } }

/* ---------- Cartes ---------- */
/* On cible .card et .kcard de la même façon */
.ig-card, .card, .kcard{
  position:relative;
  border:1px solid var(--border);
  background: linear-gradient(180deg,var(--card-a),var(--card-b));
  border-radius:12px;
  padding:1rem 1rem 2.2rem;
  min-height:150px;
  cursor:pointer;
  transition:.18s ease;
  box-shadow: var(--shadow-1);
}
.ig-card:hover, .card:hover, .kcard:hover{
  transform: translateY(-6px);
  border-color: var(--accent);
  background: linear-gradient(180deg,var(--card-a),var(--card-hover));
  box-shadow: var(--shadow-2);
}
.ig-card h4, .card h4, .kcard h4{
  color:var(--text); font-weight:800; margin-bottom:.35rem;
}
.ig-card p, .card p, .kcard p{ color:var(--text-2); }

/* Pastille numérotée (coin bas-droit) */
.step{
  position:absolute; right:.7rem; bottom:.7rem;
  width:32px; height:32px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.72rem;
  background: linear-gradient(180deg,#1fd9c5,#0a3b2e);
  box-shadow: 0 8px 18px rgba(31,217,197,.28);
}

/* ---------- Chips (tags) ---------- */
.badge-chip{
  display:inline-block; width:auto;
  margin:.35rem .35rem 0 0;
  padding:.22rem .7rem;
  border:1px solid var(--pill-bd);
  background: #733F35;
  border-radius:999px;
  color:#e8fff6; font-weight:700; font-size:.65rem;
  width: 100px;
}

/* ---------- Modales ---------- */
.ig-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.65); z-index:1200; padding:1rem;
}
.ig-modal.show{ display:flex; }

.ig-box{
  max-width:1180px; width:100%; max-height:75vh;
  background: linear-gradient(180deg,var(--modal-bg-a),var(--modal-bg-b));
  border:1px solid var(--border); border-radius:14px;
  overflow:hidden; box-shadow: var(--shadow-m);
}
.ig-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem;
  background: linear-gradient(90deg,rgba(16,78,57,.55), rgba(9,17,13,0));
  border-bottom:1px solid var(--border-2);
}
.ig-h .title{ color:#e7fff3; font-weight:700; }

.ig-b{ padding:1rem; max-height:calc(100vh - 120px); overflow-y:auto; }

/* ---------- Onglets (horizontaux) ---------- */
.ig-tabs{ display:flex; gap:.5rem; margin:0 0 1rem; flex-wrap:wrap; border-bottom:1px solid var(--border-2); }
.ig-tab-btn{
  background:transparent; border:0; cursor:pointer;
  padding:.5rem .9rem; color:rgba(231,255,243,.75);
  font-size:.9rem; font-weight:700; border-bottom:2px solid transparent;
}
.ig-tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }
.ig-tab-content{ display:none; }
.ig-tab-content.active{ display:block; }

/* ---------- Grille 2 colonnes interne ---------- */
.two{ display:grid; grid-template-columns:1.05fr .95fr; gap:1rem; }
@media (max-width:1000px){ .two{ grid-template-columns:1fr; } }

/* ---------- Blocs code & tableaux ---------- */
.code-block{
  background: var(--code-bg);
  border:1px solid var(--code-bd);
  border-radius:.45rem;
  padding:.6rem .7rem;
  font-size:.86rem; color:#eafff5;
  white-space:pre-wrap; word-break:break-word;
}
.tbl{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.tbl thead th{
  color:#e2e8f0; font-size:.8rem;
  border-bottom:1px solid var(--border-2);
  padding:.45rem .6rem;
}
.tbl tbody tr{ background: rgba(15,23,42,.35); }
.tbl tbody td{ padding:.45rem .6rem; font-size:.86rem; color:#e2e8f0; }

/* ---------- Boutons ---------- */
.btn-primary{
  background: var(--accent-2) !important; border-color: var(--accent-2) !important;
  box-shadow: 0 8px 18px rgba(15,127,89,.28) !important;
}
.btn-outline-light{
  color:#d9ffee !important; border-color: var(--accent) !important;
}

/* ---------- Utilitaires ---------- */
.text-muted{ color: rgba(226,232,240,.7) !important; }