/* ============ Baraheen Paths — مسارات الاكتشاف ============ */
.bp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-family:"Cairo",Tahoma,sans-serif}
.bp-card{--ax:#D4AF37;background:var(--surface,#13213A);border:1px solid var(--border,#24345A);border-radius:16px;
  padding:22px 20px;display:flex;flex-direction:column;gap:8px;transition:.22s;position:relative;overflow:hidden;text-decoration:none}
.bp-card:hover{transform:translateY(-5px);border-color:var(--ax);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.bp-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-block-end:6px;
  background:color-mix(in srgb,var(--ax) 14%,transparent);color:var(--ax)}
.bp-ic svg{width:22px;height:22px}
.bp-card h4{font-weight:900;font-size:16.5px;color:var(--strong,#fff);line-height:1.5;margin:0}
.bp-card p{color:var(--muted,#8DA0C4);font-size:13px;margin:0;flex:1}
.bp-meta{color:var(--ax);font-weight:800;font-size:12.5px}
.bp-prog{display:block;height:4px;border-radius:4px;background:var(--border,#24345A);overflow:hidden;margin-block-start:4px}
.bp-prog i{display:block;height:100%;width:0;background:var(--ax);transition:width .5s}

/* ---- page d'un parcours ---- */
.bp-wrap{max-width:1100px;margin-inline:auto;padding-inline:20px;font-family:"Cairo",Tahoma,sans-serif}
.bp-hero{--ax:#D4AF37;background:linear-gradient(135deg,color-mix(in srgb,var(--ax) 20%,var(--surface,#13213A)),var(--surface,#13213A));
  border:1px solid var(--border,#24345A);border-radius:22px;padding:34px 32px;margin-block:26px 24px;position:relative;overflow:hidden}
.bp-hero .ic{width:60px;height:60px;border-radius:17px;display:grid;place-items:center;background:color-mix(in srgb,var(--ax) 18%,transparent);
  border:1px solid var(--ax);color:var(--ax);margin-block-end:14px}
.bp-hero .ic svg{width:28px;height:28px}
.bp-hero h1{font-weight:900;font-size:clamp(23px,3vw,33px);color:var(--strong,#fff);margin:0 0 8px;line-height:1.4}
.bp-hero p{color:var(--muted,#8DA0C4);font-size:15px;max-width:65ch;margin:0}
.bp-goal{margin-block-start:14px;border-inline-start:3px solid var(--ax);padding:8px 14px;
  background:color-mix(in srgb,var(--ax) 8%,transparent);border-radius:0 10px 10px 0;color:var(--strong,#fff);font-size:14px}
.bp-hero .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-block-start:18px}
.bp-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:12px 26px;font-weight:800;
  font-size:14.5px;font-family:inherit;cursor:pointer;background:linear-gradient(155deg,#EFD98B,#D4AF37 62%,#B8912A);color:#231B02;text-decoration:none}
.bp-btn.ghost{background:transparent;color:var(--ax);border:1.4px solid var(--ax)}
.bp-chip{border:1px solid var(--border,#24345A);border-radius:999px;padding:4px 14px;font-size:12.5px;color:var(--muted,#8DA0C4)}

/* barre de progression */
.bp-bar{position:sticky;top:76px;z-index:30;background:color-mix(in srgb,var(--surface,#13213A) 92%,transparent);
  border:1px solid var(--border,#24345A);border-radius:14px;padding:12px 16px;margin-block-end:18px;backdrop-filter:blur(8px)}
.bp-bar .t{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted,#8DA0C4);margin-block-end:7px}
.bp-bar .t b{color:var(--strong,#fff);font-weight:800}
.bp-bar .track{height:6px;border-radius:6px;background:var(--border,#24345A);overflow:hidden}
.bp-bar .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#EFD98B,#D4AF37);transition:width .5s}

/* étapes */
.bp-steps{display:flex;flex-direction:column;gap:12px;margin-block-end:34px}
.bp-step{--ax:#D4AF37;background:var(--surface,#13213A);border:1px solid var(--border,#24345A);border-radius:16px;
  padding:18px 20px;display:flex;gap:16px;align-items:flex-start;transition:.2s}
.bp-step.done{border-color:color-mix(in srgb,var(--ax) 55%,transparent)}
.bp-step.current{border-color:var(--ax);box-shadow:0 0 0 3px color-mix(in srgb,var(--ax) 14%,transparent)}
.bp-num{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-weight:900;
  background:color-mix(in srgb,var(--ax) 12%,transparent);color:var(--ax);border:1px solid var(--border,#24345A)}
.bp-step.done .bp-num{background:var(--ax);color:#0B1220;border-color:var(--ax)}
.bp-body{flex:1;min-width:0}
.bp-body h3{font-weight:800;font-size:16.5px;color:var(--strong,#fff);margin:0 0 5px;line-height:1.55}
.bp-body .sm{font-size:12.5px;color:var(--muted,#8DA0C4)}
.bp-body p.note{margin-block-start:8px;color:var(--muted,#8DA0C4);font-size:13.5px;
  border-inline-start:2px solid var(--border,#24345A);padding-inline-start:10px}
.bp-body .exc{margin-block-start:8px;color:var(--muted,#8DA0C4);font-size:13.5px}
.bp-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-block-start:12px}
.bp-actions a,.bp-actions button{font-family:inherit;font-size:13px;font-weight:800;border-radius:10px;padding:8px 16px;
  border:1px solid var(--border,#24345A);background:transparent;color:var(--strong,#fff);cursor:pointer;text-decoration:none}
.bp-actions a:hover,.bp-actions button:hover{border-color:var(--ax);color:var(--ax)}
.bp-actions .ok{background:var(--ax);color:#0B1220;border-color:var(--ax)}
.bp-video{margin-block-start:12px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--border,#24345A)}
.bp-video iframe,.bp-video video{width:100%;height:100%;border:0;display:block}
.bp-tag{font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 10px;display:inline-block;margin-block-end:6px}
.bp-tag.art{background:color-mix(in srgb,var(--ax) 18%,transparent);color:var(--ax)}
.bp-tag.vid{background:#E02B3D;color:#fff}
.bp-tag.note{background:var(--border,#24345A);color:var(--muted,#AFC0E4)}

/* fin de parcours */
.bp-done{--ax:#D4AF37;text-align:center;border:1px dashed var(--ax);border-radius:20px;padding:34px 24px;
  background:color-mix(in srgb,var(--ax) 8%,transparent);margin-block-end:40px;display:none}
.bp-done.show{display:block}
.bp-done .badge{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(155deg,#EFD98B,#D4AF37);color:#231B02;font-size:30px;box-shadow:0 0 0 8px color-mix(in srgb,var(--ax) 12%,transparent)}
.bp-done h3{font-weight:900;font-size:21px;color:var(--strong,#fff);margin:0 0 6px}
.bp-done p{color:var(--muted,#8DA0C4);font-size:14px;margin:0 auto 18px;max-width:52ch}

@media(max-width:1000px){.bp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .bp-grid{grid-template-columns:1fr}
  .bp-step{flex-direction:column}
  .bp-bar{top:66px}
}