/* ==========================================================
   LEVEL.CSS — page publique d'un niveau (level.php)
   S'appuie sur les variables de style.css (mode sombre inclus).
   Toutes les classes sont préfixées « lvl- » pour éviter les collisions.
   ========================================================== */

/* ---------- Bannière du niveau ---------- */
.lvl-hero{background:var(--soft);border-bottom:4px solid var(--c);padding:18px 0 22px}
.lvl-crumb{margin:0 0 10px;font-size:.9rem;color:var(--muted)}
.lvl-crumb a:hover{color:var(--ink);text-decoration:underline}
.lvl-hero h1{display:flex;align-items:center;gap:14px;font-size:1.9rem;font-weight:900;color:var(--ink)}
.lvl-big{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;
  background:var(--c);color:#fff;font-size:1.9rem;font-weight:900}
.lvl-sum{margin:8px 0 0;color:var(--muted)}
.lvl-lnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.lvl-lnav a{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  border:2px solid var(--line);background:var(--card);color:var(--ink);font-weight:900}
.lvl-lnav a:hover{border-color:var(--c)}
.lvl-lnav a[aria-current=page]{background:var(--c);border-color:var(--c);color:#fff}

/* ---------- Progression ---------- */
.lvl-prog{display:flex;align-items:center;gap:8px;margin-top:8px}
.lvl-prog.wide{flex:1 1 220px;margin-top:0}
.lvl-bar{flex:1;height:10px;border-radius:9px;background:var(--line);overflow:hidden}
.lvl-bar i{display:block;height:100%;background:var(--mint);border-radius:9px}
.lvl-prog b{min-width:38px;color:var(--ink);font-size:.85rem}

/* ---------- Grille des matières ---------- */
.lvl-grid{display:grid;gap:12px;grid-template-columns:1fr}
.lvl-mc{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:var(--card);
  border:2px solid var(--line);border-top:6px solid var(--c);transition:transform .15s,border-color .15s}
.lvl-mc:hover,.lvl-mc:active{border-color:var(--c);transform:translateY(-2px)}
.lvl-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:var(--soft);font-size:1.6rem}
.lvl-ic.big{width:64px;height:64px;font-size:2rem;border:3px solid var(--c)}
.lvl-mb{flex:1;min-width:0}
.lvl-mb h3{font-size:1.05rem}
.lvl-mb small{display:block;color:var(--muted);line-height:1.5}
.lvl-go{flex:none;color:var(--c);font-size:1.6rem;font-weight:900;filter:brightness(.85)}

/* ---------- Matière ---------- */
.lvl-back{display:inline-block;margin-bottom:6px;color:var(--ink);font-weight:800}
.lvl-back:hover{text-decoration:underline}
.lvl-mhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 16px}
.lvl-mt{flex:1 1 200px;min-width:0}

/* Navigation par période (défilement horizontal sur mobile) */
.lvl-pnav{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;margin:0 0 6px;scrollbar-width:thin}
.lvl-pnav a{flex:none;min-height:44px;padding:6px 14px;border-radius:14px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);font-weight:800;text-align:center;line-height:1.35}
.lvl-pnav a:hover{border-color:var(--c)}
.lvl-pnav a.vide{opacity:.55}
.lvl-pnav small{display:block;font-weight:400;font-size:.72rem;color:var(--muted)}

.lvl-tri{margin:22px 0 4px;color:var(--muted);font-size:.95rem;font-weight:800}

/* Période repliable */
.lvl-per{background:var(--card);border:2px solid var(--line);border-radius:20px;margin:10px 0;overflow:hidden}
.lvl-per[open]{border-color:var(--c)}
.lvl-per summary{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:60px;
  cursor:pointer;list-style:none}
.lvl-per summary::-webkit-details-marker{display:none}
.lvl-per summary::after{content:"▾";color:var(--muted);transition:transform .2s}
.lvl-per[open] summary::after{transform:rotate(180deg)}
.lvl-pn{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--c);color:#fff;font-weight:900}
.lvl-pt{flex:1;min-width:0}
.lvl-pt b{display:block;color:var(--ink)}
.lvl-pt small{display:block;color:var(--muted)}
.lvl-cnt{font-weight:800;color:var(--ink);font-size:.9rem}
.lvl-body{padding:4px 14px 16px;border-top:2px dashed var(--line)}

/* Groupes (محـور / دروس أخرى / اختبارات) */
.lvl-mod{display:flex;align-items:center;gap:10px;margin:16px 0 8px;font-size:1rem;color:var(--ink)}
.lvl-mod span{flex:none;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;
  border-radius:9px;background:var(--c);color:#fff;font-size:.85rem;font-weight:900}
.lvl-mod.other,.lvl-mod.exam{color:var(--muted)}
.lvl-mod.exam::before{content:"📝"}

/* Cartes de درس et d'اختبار */
.lvl-list{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.lvl-card a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  border:2px solid var(--line);background:var(--bg);transition:border-color .15s}
.lvl-card a:hover,.lvl-card a:focus-visible{border-color:var(--c)}
.lvl-ci{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--soft);font-size:1.2rem}
.lvl-card.done .lvl-ci{background:var(--mint);color:#fff;font-weight:900}
.lvl-card.exam a{border-style:dashed}
.lvl-cb{flex:1;min-width:0}
.lvl-cb b{display:block;color:var(--ink)}
.lvl-cb small{display:block;color:var(--muted);line-height:1.5}
.lvl-cm{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  font-size:.8rem;color:var(--muted)}
.lvl-new{font-style:normal;background:var(--coral);color:#fff;border-radius:999px;
  padding:0 10px;font-size:.78rem;font-weight:800}

/* Messages */
.lvl-empty{text-align:center;color:var(--muted);padding:18px 8px}
.lvl-hint{text-align:center;margin-top:24px;color:var(--muted)}
.lvl-hint a{color:var(--ink);font-weight:800;text-decoration:underline}
.lvl-msg{text-align:center}

/* ---------- Écrans plus larges ---------- */
@media (min-width:620px){
  .lvl-grid{grid-template-columns:1fr 1fr}
  .lvl-hero h1{font-size:2.3rem}
}
@media (min-width:900px){
  .lvl-grid{grid-template-columns:repeat(3,1fr)}
  .lvl-pnav{overflow:visible;flex-wrap:wrap}
}