/* ============================================================
   NASH-DEV.FR — Homepage styles
   Ajoute ce bloc à la fin de public/assets/css/nashdev.css
   (ou importe ce fichier séparément en tant que home.css)
   ============================================================ */

/* ── Section helpers ─────────────────────────────────────── */
.nd-section-alt { background: var(--nd-bg2); }

.nd-section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 0; {# le margin-bottom est sur nd-section-title #}
}
.nd-section-header .nd-section-title { margin-bottom: 0; }

.nd-section-sub {
  text-align: center; color: var(--nd-text2); font-size: 16px;
  line-height: 1.75; max-width: 580px; margin: -28px auto 48px;
}

.nd-btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--nd-mono); font-size: 12px; font-weight: 600;
  color: var(--nd-text2); text-decoration: none; letter-spacing: 0.5px;
  padding: 8px 16px; border-radius: 7px;
  border: 1px solid var(--nd-border2); white-space: nowrap;
  transition: all 0.2s; flex-shrink: 0; align-self: center;
}
.nd-btn-outline:hover { color: var(--nd-green); border-color: rgba(0,255,148,0.3); background: rgba(0,255,148,0.05); }

.nd-empty {
  font-family: var(--nd-mono); font-size: 13px; color: var(--nd-text3);
  text-align: center; padding: 48px; grid-column: 1/-1;
}

/* ── Features grid ───────────────────────────────────────── */
.nd-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 0; {# margin vient du nd-section-title #}
}

.nd-feature-card {
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 14px; padding: 28px;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.nd-feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--nd-green), var(--nd-blue), var(--nd-violet));
  opacity: 0; transition: opacity 0.3s;
}
.nd-feature-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.3s; border-radius: inherit; pointer-events: none;
}
.nd-feature-card.g::after { background: radial-gradient(circle at 50% 0%, rgba(0,255,148,0.08), transparent 70%); }
.nd-feature-card.b::after { background: radial-gradient(circle at 50% 0%, rgba(59,158,255,0.08), transparent 70%); }
.nd-feature-card.v::after { background: radial-gradient(circle at 50% 0%, rgba(168,85,247,0.08), transparent 70%); }
.nd-feature-card:hover { border-color: var(--nd-border2); transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.nd-feature-card:hover::before { opacity: 1; }
.nd-feature-card:hover::after { opacity: 1; }

.nd-feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.nd-feature-icon.g { background: rgba(0,255,148,0.1); border: 1px solid rgba(0,255,148,0.2); }
.nd-feature-icon.b { background: rgba(59,158,255,0.1); border: 1px solid rgba(59,158,255,0.2); }
.nd-feature-icon.v { background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); }

.nd-feature-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.nd-feature-card p { font-size: 14px; color: var(--nd-text2); line-height: 1.75; margin-bottom: 20px; }

/* ── Tutorials grid ──────────────────────────────────────── */
.nd-tutos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px;
}

.nd-tuto-card {
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 14px; padding: 24px;
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.nd-tuto-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.3s; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(0,255,148,0.08), transparent 70%);
}
.nd-tuto-card:hover { border-color: var(--nd-border2); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.nd-tuto-card:hover::after { opacity: 1; }

.nd-tuto-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 8px; flex-wrap: wrap;
}
.nd-tuto-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--nd-mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--nd-green); background: rgba(0,255,148,0.08);
  border: 1px solid rgba(0,255,148,0.2); padding: 4px 10px; border-radius: 100px;
}
.nd-tuto-category {
  font-family: var(--nd-mono); font-size: 11px; color: var(--nd-blue2);
  text-decoration: none; background: rgba(59,158,255,0.08);
  border: 1px solid rgba(59,158,255,0.2); padding: 4px 10px; border-radius: 100px;
  transition: all 0.2s;
}
.nd-tuto-category:hover { background: rgba(59,158,255,0.15); color: var(--nd-blue2); }

.nd-tuto-body { flex: 1; }
.nd-tuto-title { font-size: 15px; font-weight: 600; line-height: 1.5; margin-bottom: 10px; }
.nd-tuto-title a { color: var(--nd-text); text-decoration: none; transition: color 0.2s; }
.nd-tuto-title a:hover { color: var(--nd-green); }
.nd-tuto-desc { font-size: 13px; color: var(--nd-text2); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.nd-tuto-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nd-border); }
.nd-tuto-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nd-mono); font-size: 12px; font-weight: 600;
  color: var(--nd-green); text-decoration: none; letter-spacing: 0.5px;
  transition: gap 0.2s;
}
.nd-tuto-link:hover { gap: 10px; color: var(--nd-green); }

/* ── Trainings grid ──────────────────────────────────────── */
.nd-trainings-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px;
}

.nd-training-card {
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.nd-training-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.3s; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(0,255,148,0.08), transparent 70%);
}
.nd-training-card:hover { border-color: var(--nd-border2); transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.nd-training-card:hover::after { opacity: 1; }

.nd-training-cover {
  position: relative; height: 180px; overflow: hidden;
  background: var(--nd-bg3);
}
.nd-training-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.nd-training-card:hover .nd-training-cover img { transform: scale(1.05); }
.nd-training-cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(59,158,255,0.2), rgba(168,85,247,0.2));
}

.nd-training-price-badge {
  position: absolute; top: 12px; right: 12px;
}
.nd-price-paid, .nd-price-free {
  font-family: var(--nd-mono); font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 100px; letter-spacing: 0.5px;
}
.nd-price-paid { background: rgba(6,8,16,0.85); color: var(--nd-blue2); border: 1px solid rgba(59,158,255,0.3); }
.nd-price-free { background: rgba(0,255,148,0.15); color: var(--nd-green); border: 1px solid rgba(0,255,148,0.3); }

.nd-training-body { padding: 20px 24px; flex: 1; }
.nd-training-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.nd-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--nd-mono); font-size: 11px; color: var(--nd-text3); letter-spacing: 0.5px;
}
.nd-training-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
.nd-training-title a { color: var(--nd-text); text-decoration: none; transition: color 0.2s; }
.nd-training-title a:hover { color: var(--nd-green); }
.nd-training-desc { font-size: 13px; color: var(--nd-text2); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.nd-training-footer { padding: 0 24px 20px; }
.nd-btn-enroll {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  background: rgba(0,255,148,0.08); color: var(--nd-green);
  border: 1px solid rgba(0,255,148,0.25); border-radius: 8px;
  font-family: var(--nd-mono); font-size: 13px; font-weight: 600;
  padding: 10px 20px; text-decoration: none; letter-spacing: 0.5px;
  transition: all 0.2s;
}
.nd-btn-enroll:hover { background: rgba(0,255,148,0.15); border-color: rgba(0,255,148,0.4); color: var(--nd-green); transform: none; }

/* ── Testimonials ────────────────────────────────────────── */
.nd-testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 0;
}
.nd-testi-card {
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 14px; padding: 28px;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s, transform 0.3s;
  position: relative; overflow: hidden;
}
.nd-testi-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.3s; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(168,85,247,0.08), transparent 70%);
}
.nd-testi-card:hover { border-color: var(--nd-border2); transform: translateY(-4px); }
.nd-testi-card:hover::after { opacity: 1; }
.nd-testi-quote { font-size: 40px; line-height: 1; color: var(--nd-green); opacity: 0.4; font-family: Georgia, serif; margin-bottom: 14px; }
.nd-testi-text { font-size: 14px; color: var(--nd-text2); line-height: 1.8; margin-bottom: 24px; }
.nd-testi-author { display: flex; align-items: center; gap: 12px; }
.nd-testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nd-mono); font-size: 13px; font-weight: 700; flex-shrink: 0;
  border: 1px solid;
}
.nd-testi-avatar.g { background: rgba(0,255,148,0.1); color: var(--nd-green); border-color: rgba(0,255,148,0.3); }
.nd-testi-avatar.b { background: rgba(59,158,255,0.1); color: var(--nd-blue2); border-color: rgba(59,158,255,0.3); }
.nd-testi-avatar.v { background: rgba(168,85,247,0.1); color: var(--nd-violet2); border-color: rgba(168,85,247,0.3); }
.nd-testi-name { font-size: 14px; font-weight: 600; }
.nd-testi-role { font-family: var(--nd-mono); font-size: 11px; color: var(--nd-text3); margin-top: 2px; }
.nd-testi-stars { color: #fbbf24; font-size: 12px; margin-top: 4px; letter-spacing: 1px; }

/* ── CTA final ───────────────────────────────────────────── */
.nd-cta-section {
  padding: 100px 0;
  position: relative; overflow: hidden;
  background: var(--nd-bg);
}
.nd-cta-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,255,148,0.05) 0%, transparent 70%);
}
.nd-cta-title {
  font-size: clamp(32px, 5vw, 58px); font-weight: 700;
  letter-spacing: -2px; line-height: 1.1;
  margin-bottom: 20px;
}
.nd-cta-sub {
  font-size: 17px; color: var(--nd-text2); margin-bottom: 44px;
  max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.75;
}

/* ── Responsive homepage ─────────────────────────────────── */
@media (max-width: 1024px) {
  .nd-trainings-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nd-features-grid { grid-template-columns: repeat(2, 1fr); }
  .nd-tutos-grid { grid-template-columns: repeat(2, 1fr); }
  .nd-testi-grid { grid-template-columns: 1fr; }
  .nd-section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 640px) {
  .nd-features-grid { grid-template-columns: 1fr; }
  .nd-tutos-grid { grid-template-columns: 1fr; }
  .nd-trainings-grid { grid-template-columns: 1fr; }
  .nd-cta-title { letter-spacing: -1px; }
}