/* ============================================================
   NELO.243 — PAGES PROJET — project.css
   Étend assets/css/style.css (variables, thèmes, header, footer,
   boutons, reveal, toasts, widget WhatsApp, lightbox déjà définis)
   ============================================================ */

/* ---------- Nav simplifiée projet ---------- */
.project-nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:1.1rem 0;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.project-nav .container{display:flex;align-items:center;justify-content:space-between;width:100%;}
.back-link{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.65rem 1.2rem;border-radius:50px;
  background:var(--surface);border:1px solid var(--border);
  font-size:.88rem;font-weight:500;color:var(--text);
  transition:all .35s var(--ease);
}
.back-link i{transition:transform .3s var(--ease);}
.back-link:hover{border-color:var(--cyan);transform:translateX(-4px);}
.back-link:hover i{transform:translateX(-3px);}

/* ---------- Hero projet ---------- */
.project-hero{
  min-height:78vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;padding:150px 6% 70px;
  background-size:cover;background-position:center;
  overflow:hidden;
}
.project-hero .hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), color-mix(in srgb, var(--bg) 92%, transparent) 85%);
}
.project-hero-inner{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto;}
.project-icon-circle{
  width:84px;height:84px;border-radius:22px;
  margin:0 auto 1.6rem;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--red),var(--cyan));
  font-size:2rem;color:#fff;
  box-shadow:0 0 40px -6px var(--cyan);
}
.project-hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,6vw,3.8rem);letter-spacing:-.02em;
  margin-bottom:1rem;color:var(--text);
}
.project-hero .hero-lead{
  color:var(--text-dim);font-size:1.08rem;max-width:600px;margin:0 auto 1.8rem;
}
.project-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;}
.project-tags span{
  font-family:var(--font-mono);font-size:.78rem;
  padding:.45rem 1rem;border-radius:50px;
  background:var(--surface);border:1px solid var(--border);color:var(--cyan);
}

/* ---------- Stats strip ---------- */
.stats-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.2rem;margin:-40px auto 4rem;position:relative;z-index:3;
  max-width:1100px;
}
.stats-strip .stat{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.6rem 1rem;text-align:center;
  box-shadow:var(--shadow);
}

/* ---------- Problem / Solution ---------- */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-bottom:1rem;}
.ps-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:2.1rem;position:relative;overflow:hidden;
}
.ps-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;}
.ps-card.problem::before{background:var(--red);}
.ps-card.solution::before{background:var(--cyan);}
.ps-card h3{
  font-family:var(--font-display);font-size:1.25rem;margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem;
}
.ps-card.problem h3{color:var(--red);}
.ps-card.solution h3{color:var(--cyan);}
.ps-card p{color:var(--text-dim);margin-bottom:1rem;font-size:.95rem;}
.ps-card ul{padding-left:1.2rem;color:var(--text-dim);font-size:.92rem;}
.ps-card ul li{margin-bottom:.55rem;list-style:disc;}

/* ---------- Detail cards (features / architecture) ---------- */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.detail-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.8rem;
  transition:transform .35s var(--ease), border-color .35s ease;
}
.detail-card:hover{transform:translateY(-6px);border-color:var(--cyan);}
.detail-card h3{
  font-family:var(--font-display);font-size:1.1rem;margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem;
}
.detail-card h3 i{color:var(--cyan);}
.detail-card ul{padding-left:0;list-style:none;}
.detail-card ul li{
  padding:.6rem 0;padding-left:1.5rem;position:relative;
  border-top:1px solid var(--border);color:var(--text-dim);font-size:.9rem;
}
.detail-card ul li:first-child{border-top:none;}
.detail-card ul li::before{
  content:'\f101';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;left:0;color:var(--cyan);font-size:.75rem;top:.85rem;
}
.detail-card.centered{text-align:center;}
.detail-card .big-number{
  font-family:var(--font-display);font-size:2.6rem;font-weight:700;
  background:linear-gradient(135deg,var(--cyan),var(--red));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:.3rem;
}
.detail-card .big-number + p{color:var(--text-dim);font-size:.92rem;}

/* ---------- Tech stack badges ---------- */
.tech-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;}
.tech-badges span{
  font-family:var(--font-mono);font-size:.82rem;font-weight:500;
  padding:.55rem 1.1rem;border-radius:10px;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--cyan));
}

/* ---------- Roadmap / timeline phases ---------- */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;}
.phase-card{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--cyan);
  border-radius:var(--radius-md);padding:1.6rem;
}
.phase-card .phase-date{
  font-family:var(--font-mono);font-size:.75rem;color:var(--red);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;
}
.phase-card h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.5rem;color:var(--cyan);}
.phase-card p{color:var(--text-dim);font-size:.88rem;}

/* ---------- Partners ---------- */
.partners-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
  margin-top:1.5rem;
}
.partners-row span{
  padding:.7rem 1.3rem;border-radius:50px;
  background:var(--surface);border:1px solid var(--border);
  font-size:.85rem;color:var(--text-dim);font-weight:500;
}

/* ---------- Payment methods (e-commerce) ---------- */
.payment-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1.1rem;max-width:900px;margin:0 auto;
}
.payment-badge{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.4rem 1rem;text-align:center;
  transition:transform .35s var(--ease), border-color .35s ease;
}
.payment-badge:hover{transform:translateY(-6px);border-color:var(--cyan);}
.payment-badge i{font-size:1.8rem;color:var(--cyan);margin-bottom:.6rem;display:block;}
.payment-badge span{font-size:.8rem;color:var(--text-dim);font-weight:500;}

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center;padding:80px 6%;
  background:linear-gradient(135deg, color-mix(in srgb, var(--red) 8%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.cta-band h2{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:.8rem;}
.cta-band p{color:var(--text-dim);max-width:520px;margin:0 auto 2rem;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .ps-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .project-hero{padding:130px 5% 50px;min-height:70vh;}
  .stats-strip{margin-top:-24px;margin-bottom:3rem;}
}