/* ══════════════════════════════════════════════════════════════════════════
   ENSA Oujda — onboarding wizard (first run)
   ══════════════════════════════════════════════════════════════════════════ */

.ob{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px;
  background:rgba(6,16,20,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .32s}
.ob.on{opacity:1;pointer-events:auto}

.ob-card{width:min(720px,100%);border-radius:26px;padding:0;overflow:hidden;
  transform:translateY(22px) scale(.97);transition:transform .42s cubic-bezier(.2,.8,.2,1);
  max-height:92vh;display:flex;flex-direction:column}
.ob.on .ob-card{transform:none}

/* progress */
.ob-bar{height:3px;background:rgba(10,42,51,.1);flex:none}
.ob-bar i{display:block;height:100%;width:0;border-radius:0;
  background:linear-gradient(90deg,var(--sky),var(--teal));
  transition:width .5s cubic-bezier(.2,.8,.2,1)}

.ob-head{padding:22px 30px 0;flex:none}
.ob-steps{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.ob-step{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);
  color:var(--muted);letter-spacing:.03em}
.ob-step .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:700 11px/1 var(--font);background:rgba(10,42,51,.1);color:var(--muted);
  transition:all .32s cubic-bezier(.2,.8,.2,1)}
.ob-step.on .dot{background:var(--teal);color:#fff;box-shadow:0 0 0 4px rgba(34,121,145,.16)}
.ob-step.done .dot{background:var(--ok);color:#fff}
.ob-step.on{color:var(--ink);font-weight:600}

.ob-body{padding:6px 30px 8px;overflow-y:auto;flex:1}
.ob-body::-webkit-scrollbar{width:6px}
.ob-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.ob-panel{display:none}
.ob-panel.on{display:block;animation:panelIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

.ob h2{font-size:clamp(20px,2.6vw,25px);margin-bottom:7px}
.ob .lead{color:var(--muted);font-size:14.5px;margin-bottom:22px;max-width:60ch}

/* welcome */
.ob-hero{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.ob-hero img{width:58px;height:58px;object-fit:contain;
  filter:brightness(1.5) saturate(.75) drop-shadow(0 3px 9px rgba(0,0,0,.24))}
[data-theme="dark"] .ob-hero img{filter:brightness(1.6) saturate(.8) drop-shadow(0 3px 10px rgba(0,0,0,.5))}

/* colour picker */
.swatches{display:flex;gap:9px;flex-wrap:wrap;margin-top:2px}
.swatch{width:34px;height:34px;border-radius:50%;border:2.5px solid transparent;
  cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}
.swatch:hover{transform:scale(1.14)}
.swatch.on{border-color:var(--ink);transform:scale(1.12)}
[data-theme="dark"] .swatch.on{border-color:#fff}
[data-theme="dark"] .swatch{filter:brightness(1.25)}

/* filière grid inside the wizard */
.ob-fil{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.obf{position:relative;padding:14px 15px;border-radius:15px;cursor:pointer;
  background:rgba(255,255,255,.62);border:1.5px solid var(--line);text-align:left;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s,box-shadow .22s,
             background .2s;overflow:hidden}
.obf:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--line-2)}
.obf.sel{border-color:transparent;box-shadow:0 0 0 2px var(--sky),var(--sh)}
.obf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c);transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.obf.sel::before{transform:scaleY(1)}
.obf .c{font:700 11.5px/1 var(--mono);letter-spacing:.09em;color:var(--c);
  margin-bottom:7px;display:block}
.obf b{display:block;color:var(--ink);font-size:13.5px;line-height:1.32;margin-bottom:5px}
.obf span{display:block;font-size:11.5px;color:var(--muted);line-height:1.42}
.obf .tick{position:absolute;top:11px;right:11px;width:20px;height:20px;border-radius:50%;
  background:var(--c);color:#fff;display:grid;place-items:center;font-size:11px;
  opacity:0;transform:scale(.5);transition:all .26s cubic-bezier(.34,1.42,.5,1)}
.obf.sel .tick{opacity:1;transform:none}

/* summary */
.ob-done{display:flex;align-items:center;gap:15px;padding:16px 18px;border-radius:16px;
  background:rgba(10,42,51,.045);margin-bottom:18px}
.ob-done .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font:700 15px/1 var(--font);flex:none}
.ob-done b{display:block;color:var(--ink);font-size:15px}
.ob-done span{font-size:12.5px;color:var(--muted)}
.ob-feats{display:grid;gap:9px;margin-top:4px}
.ob-feat{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:13px;
  background:rgba(255,255,255,.55);border:1px solid var(--line);
  animation:cardIn .4s cubic-bezier(.2,.8,.2,1) backwards}
.ob-feat .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  flex:none;color:#fff}
.ob-feat b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.ob-feat span{font-size:12.5px;color:var(--muted);line-height:1.45}

.ob-foot{padding:18px 30px 24px;display:flex;align-items:center;gap:11px;flex:none;
  border-top:1px solid var(--line)}
.ob-foot .spacer{flex:1}
.ob-note{font-size:12px;color:var(--muted)}

@media(max-width:620px){
  .ob-head{padding:18px 20px 0}
  .ob-body{padding:4px 20px 8px}
  .ob-foot{padding:15px 20px 20px;flex-wrap:wrap}
  .ob-fil{grid-template-columns:1fr 1fr}
}