.theme-premiere{ --accent:#0ea5e9; }
.theme-terminale{ --accent:#10b981; }
.progress{margin-top:16px;background:#e2e8f0;border-radius:999px;overflow:hidden;height:10px}
.progress .bar{height:100%;width:0;background:var(--accent);transition:width .3s ease}
.steps-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.step-chk{width:18px;height:18px}
.step-title{font-weight:700}
.timeline{position:relative;margin-left:6px;padding-left:22px;border-left:3px solid var(--accent)}
.timeline .tl-item{position:relative;margin:16px 0;padding-left:10px}
.timeline .tl-item::before{content:'';position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.tl-title{font-weight:700;margin:0 0 4px}
.tl-desc{color:var(--muted);margin:0}
.level-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.level-tabs .btn{border-color:var(--accent)}
.level-tabs .btn.active{background:var(--accent);color:#fff}
.step-link{font-size:12px;margin-left:8px;white-space:nowrap}

/* ===== Hero landing Python lisible ===== */
.hero--nsi{
  /* fond sombre doux lisible, sans image */
  background:
    radial-gradient(1200px 500px at 20% 0%, #0f1c2e 0%, rgba(15,28,46,.0) 60%),
    radial-gradient(900px 400px at 80% 10%, #0b3a68 0%, rgba(11,58,104,0) 55%),
    linear-gradient(180deg, #0b1321 0%, #0e223b 70%, #0b1321 100%);
  color:#fff;
  padding: 72px 0 56px;
}
.hero--nsi .hero-inner{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.hero--nsi h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 4.8vw, 48px);
  line-height: 1.12;
  color:#f8fafc;
  text-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.hero--nsi .lead{
  color:#e2e8f0;            /* bien lisible */
  font-size: clamp(16px, 1.5vw, 18px);
  margin: 8px 0 18px;
}
.hero--nsi .btns{ display: flex; gap: 16px; justify-content: center; }

/* Boutons lisibles (plein + outline) */
.btn{ border:2px solid var(--accent,#0ea5e9); }
.btn:hover,
.btn:focus{ background: var(--accent,#0ea5e9); color:#fff; border-color:var(--accent,#0ea5e9); }

.btn.outline{
  background: transparent;
  color:#fff;
  border-color:#ffffffcc;       /* blanc lisible sur fond sombre */
}
.btn.outline:hover{ background:#fff; color:#0b1321; }

/* Variante verte pour Terminale (si tu veux teinter ce bouton) */
.btn.terminale{
  --accent:#16a34a;             /* vert */
  border-color: var(--accent);
  color:#fff;
}
.btn.terminale.outline{
  color:#bbf7d0; border-color:#86efac;
}
.btn.terminale.outline:hover{ background:#16a34a; color:#fff; }

/* Petits boutons de niveau en bas de la page d’accueil */
.level-tabs .btn{ border-color:#93c5fd; color:#1e3a8a; }
.theme-terminale .level-tabs .btn{ border-color:#86efac; color:#065f46; }

/* Titres d’items colorés par niveau */
.theme-premiere  .step-title,
.theme-premiere  .tl-title   { color:#2563eb; }   /* bleu Première */

.theme-terminale .step-title,
.theme-terminale .tl-title   { color:#16a34a; }   /* vert Terminale */

/* (facultatif) le lien "ouvrir" et la coche suivent la même couleur */
.theme-premiere  .step-link  { color:#2563eb; }
.theme-terminale .step-link  { color:#16a34a; }

.theme-premiere  input.step-chk  { accent-color:#2563eb; }
.theme-terminale input.step-chk  { accent-color:#16a34a; }

/* Titres des pages uniquement en Première */
body.nsi-premiere .page-title,
body.nsi-premiere .hero h1 {
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #000099;               /* bleu “Première” */
  text-shadow: 4px 4px 4px #aaa;
  text-align: center;
  margin-bottom: 40px;
}

/* Titres des pages uniquement en Première */

.level-terminale .page-header h1,
.level-terminale .prose h1 {
  color: #137b3f;  /* vert Terminale par exemple */
  text-transform: none;         /* si tu veux éviter les MAJUSCULES */
  text-shadow: 3px 3px 8px rgba(0,0,0,.18);
}

/* HERO NSI – prend une image passée via --hero-img */
.hero--nsi{
  /* valeur par défaut si aucune image n’est fournie */
  --hero-img: none;

  /* on superpose l’image + un dégradé sombre (le 1er est au-dessus) */
  background-image: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)), var(--hero-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.w-70 { width: 70%; }
.w-60 { width: 60%; }
.w-40 { width: 40%; }
.w-30 { width: 30%; }