/* Tutoriel du premier lancement (onboarding.js) : feuille centrée sur grand écran, panneau du bas sur mobile ; clair / sombre via les variables du thème. */
.ob-lock{ overflow:hidden; }
.ob-wrap{ position:fixed; inset:0; z-index:75; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(20,26,18,.42); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); opacity:0; transition:opacity .35s; }
.ob-wrap.in{ opacity:1; }
.ob-sheet{ position:relative; width:100%; max-width:440px; max-height:calc(100dvh - 40px); overflow-y:auto; text-align:center;
  padding:18px 26px 22px; border-radius:30px; background:var(--glass-strong); border:1px solid var(--glass-brd); box-shadow:var(--shadow-lg);
  transform:translateY(24px); transition:transform .45s var(--ease); touch-action:pan-y; outline:none; }
.ob-wrap.in .ob-sheet{ transform:none; }
.ob-top{ display:flex; align-items:center; justify-content:space-between; min-height:38px; margin-bottom:4px; }
.ob-count{ font-size:.82rem; color:var(--muted); letter-spacing:.02em; }
.ob-skip{ font-size:.92rem; padding:6px 4px; }
.ob-slide{ min-height:min(400px,58dvh); display:flex; flex-direction:column; align-items:center; }
.ob-from-next{ animation:ob-in-next .4s var(--ease); }
.ob-from-prev{ animation:ob-in-prev .4s var(--ease); }
@keyframes ob-in-next{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
@keyframes ob-in-prev{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }
[dir="rtl"] .ob-from-next{ animation-name:ob-in-prev; }
[dir="rtl"] .ob-from-prev{ animation-name:ob-in-next; }

.ob-art{ position:relative; width:118px; height:118px; margin:10px auto 16px; display:grid; place-items:center; }
.ob-art i{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,var(--soft-2) 0%,transparent 70%); animation:ob-breath 4.5s ease-in-out infinite; }
.ob-art i + i{ inset:14px; background:var(--soft); animation-delay:-2.2s; }
.ob-art span{ position:relative; width:70px; height:70px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--sage)); box-shadow:0 16px 30px -16px var(--accent-glow); }
.ob-slide[data-step="notif"] .ob-art span, .ob-slide[data-step="guide"] .ob-art span{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); }
[data-theme="dark"] .ob-art span{ color:#1c150c; }
.ob-art svg{ width:32px; height:32px; }
@keyframes ob-breath{ 0%,100%{ transform:scale(.9); opacity:.75; } 50%{ transform:scale(1.06); opacity:1; } }

.ob-slide h2{ font-family:var(--serif); font-weight:500; font-size:1.5rem; line-height:1.25; color:var(--heading); margin-bottom:10px; }
.ob-slide p{ color:var(--muted); line-height:1.65; margin-bottom:16px; }
.ob-slide .btn-block{ margin-top:auto; }
.ob-tip{ text-align:start; margin-top:auto; }
.ob-slide .ob-free{ display:flex; align-items:flex-start; gap:8px; text-align:start; margin:-4px 0 16px; padding:10px 14px; border-radius:16px;
  background:var(--soft); color:var(--soft-text); font-size:.92rem; line-height:1.55; }
.ob-free svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--gold-text); }
.ob-ok{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; padding:12px 16px; border-radius:16px;
  background:var(--ok-bg); color:var(--ok-text) !important; font-weight:600; }
.ob-ok svg{ width:20px; height:20px; flex:none; }

.ob-dots{ display:flex; justify-content:center; gap:7px; margin:18px 0 14px; }
.ob-dots i{ width:7px; height:7px; border-radius:999px; background:var(--soft-2); transition:width .3s var(--ease), background .3s; }
.ob-dots i.on{ width:22px; background:var(--accent); }
.ob-nav{ display:flex; gap:10px; }
.ob-nav .ob-main{ flex:1; }
.ob-back{ flex:none; width:48px; padding-inline:0; justify-content:center; }
.ob-back svg{ width:20px; height:20px; }

.ob-acc-text{ color:var(--muted); margin-bottom:12px; }

@media (max-width:760px){
  .ob-wrap{ align-items:flex-end; padding:0; }
  .ob-sheet{ max-width:none; max-height:94dvh; border-radius:30px 30px 0 0; padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){
  .ob-art i, .ob-from-next, .ob-from-prev{ animation:none; }
  .ob-sheet, .ob-wrap{ transition:none; }
}