/* Projects — cartes études de cas comme React ProjectsSection */
.essik-projects-section { padding: 5rem 1.25rem; background: rgba(248,250,252,.7); }
.essik-projects-grid { max-width: 80rem; margin: 0 auto; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .essik-projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .essik-projects-grid { grid-template-columns: repeat(3, 1fr); } }
.essik-project-card { border-radius: 1.5rem; background: #fff; border: 1px solid #e2e8f0; overflow: hidden; display: flex; flex-direction: column; }
.essik-project-card:hover { border-color: rgba(255,85,0,.6); box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.essik-project-banner { padding: 1.25rem; background: linear-gradient(135deg, #0A0D12, #1A1D24); color: #fff; min-height: 11rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.essik-project-tags { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.essik-project-cat { padding: .3rem .7rem; border-radius: 9999px; background: rgba(0,0,0,.4); color: #FF5500; border: 1px solid rgba(255,85,0,.3); font-size: .68rem; font-weight: 700; }
.essik-project-sector { font-size: .68rem; color: #cbd5e1; background: rgba(0,0,0,.3); padding: .25rem .5rem; border-radius: .3rem; }
.essik-project-title { color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.4; margin: .25rem 0 0; }
.essik-project-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.essik-project-desc { font-size: .85rem; color: #475569; line-height: 1.7; margin: 0; }
.essik-project-metric { padding: .75rem; border-radius: .75rem; background: rgba(255,85,0,.06); border: 1px solid rgba(255,85,0,.15); display: flex; align-items: center; justify-content: space-between; }
.essik-project-metric .lbl { font-size: .7rem; color: #64748b; }
.essik-project-metric .val { font-weight: 900; color: #FF5500; }
.essik-project-link { font-size: .8rem; font-weight: 700; color: #FF5500; text-decoration: none; }
.essik-project-link:hover { text-decoration: underline; }
/* Vignette dynamique : image mise en avant du CPT (ou image manuelle) */
.essik-project-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }