/* EasyMaths — pages « Programme de maths » par niveau (générées par scripts/build-programme.ts).
   S'appuie sur /cours/cours.css (nav, héros + vague, article, CTA, FAQ, maillage) ; ici : couleur
   du niveau, pastilles de niveaux, thèmes en cartes, grille de l'index. */
.pg { --accent: var(--lvl, #2f6fe4); --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff); }
.pg-hero {
  background:
    radial-gradient(900px 520px at 12% -20%, rgba(255,255,255,0.28), transparent 62%),
    linear-gradient(165deg, var(--lvl) 0%, color-mix(in srgb, var(--lvl) 70%, #0a2540) 70%, color-mix(in srgb, var(--lvl) 40%, #0a2540) 130%);
}
.pg-levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.pg-lvl { padding: 5px 13px; border-radius: 999px; font-size: 0.84rem; font-weight: 800; color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); }
.pg-lvl:hover { text-decoration: none; background: rgba(255,255,255,0.26); }
.pg-lvl.on { background: #fff; color: color-mix(in srgb, var(--lc) 80%, #1c2333); border-color: #fff; }
.pg-tocn { font-size: 0.78rem; font-weight: 800; color: var(--muted); margin-left: 4px; }
.pg .article h2::before { background: var(--dom, var(--accent)); }
.pg-h2n { display: inline-block; white-space: nowrap; font-size: 0.9rem; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.pg-themes { display: grid; gap: 14px; margin: 18px 0 8px; }
.pg-theme { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px 16px; box-shadow: 0 8px 22px -18px rgba(20,40,90,0.22); border-top: 4px solid var(--cat); }
.pg-theme h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.08rem; }
.pg-n { padding: 1px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; color: color-mix(in srgb, var(--cat) 78%, #1c2333); background: color-mix(in srgb, var(--cat) 13%, #fff); }
.pg-theme ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.pg-theme li { position: relative; break-inside: avoid; margin: 0; padding: 4px 0 4px 15px; font-size: 0.95rem; line-height: 1.45; color: #34405c; }
.pg-theme li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--cat) 70%, #fff); }
.pg-cours { display: inline-flex; gap: 6px; margin-top: 10px; font-size: 0.88rem; font-weight: 700; color: color-mix(in srgb, var(--cat) 75%, #1c2333) !important; }
@media (max-width: 620px) { .pg-theme ul { columns: 1; } .pg-theme { padding: 16px 18px 14px; } }
/* index : une carte par niveau */
.pg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 10px 0 8px; }
@media (max-width: 620px) { .pg-grid { grid-template-columns: 1fr; } }
.pg-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; color: var(--ink) !important; font-weight: 500 !important; border-top: 4px solid var(--lc); box-shadow: 0 8px 22px -18px rgba(20,40,90,0.22); transition: transform .15s, box-shadow .15s; }
.pg-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(20,40,90,0.3); }
.pg-card-name { display: block; font-size: 1.7rem; font-weight: 850; letter-spacing: -0.02em; color: color-mix(in srgb, var(--lc) 85%, #1c2333); }
.pg-card-meta { display: block; margin: 2px 0 8px; font-size: 0.84rem; font-weight: 700; color: var(--muted); }
.pg-card-txt { display: block; font-size: 0.92rem; line-height: 1.5; color: #44506b; }