/* ══ MOBILE BASE — shared UI components ══ */

/* ═══ BOTTOM NAV ═════════════════════════════════════════════ */
.bnav{height:70px;background:var(--card);border-top:1px solid var(--b2);display:flex;align-items:center;padding:0 4px;flex-shrink:0;z-index:900;overflow:visible}
.ntab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;padding:4px 2px;transition:var(--tr)}
.ntab svg{width:22px;height:22px;stroke:#94A3B8;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:var(--tr)}
.ntab span{font-size:10px;font-weight:500;color:var(--text3);transition:var(--tr)}
.ntab.on svg{stroke:var(--accent)!important}
.ntab.on span{color:var(--accent)!important;font-weight:700}
.nmic{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;cursor:pointer;padding:4px 2px;position:relative;overflow:visible}
.nmic-disk{width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative;top:-6px;transition:.18s}
.nmic-disk svg{width:22px;height:22px;stroke:#94A3B8;stroke-width:2.5;fill:none;transition:.18s}
.nmic.on .nmic-disk svg{stroke:var(--accent)}
.nmic span{font-size:10px;font-weight:600;color:var(--text2);margin-top:-4px;transition:var(--tr)}
.nmic.on span{color:var(--accent)!important;font-weight:700}
.home-bar{height:8px;background:var(--card);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.bar-pill{width:120px;height:4px;background:rgba(0,0,0,.16);border-radius:3px}

/* ═══ SHARED ════════════════════════════════════════════════ */
.ph{padding:14px 20px 10px;flex-shrink:0}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ph-title{font-size:22px;font-weight:900;color:var(--text);letter-spacing:-.4px;line-height:1.2}

.sw{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--b2);border-radius:var(--r);padding:0 12px;height:44px;transition:border-color var(--tr)}
.sw:focus-within{border-color:var(--accent)}
.sw svg{width:16px;height:16px;stroke:var(--text3);stroke-width:2;flex-shrink:0}
.sw input{flex:1;border:none;background:transparent;outline:none;font-size:14px;color:var(--text)}
.sw input::placeholder{color:var(--text3)}
.sw-mic{width:32px;height:32px;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0;transition:var(--tr)}
.sw-mic:active{background:var(--accent-wash);color:var(--accent)}

.lr{display:flex;align-items:center;padding:13px 20px;background:var(--card);border-bottom:1px solid var(--b);cursor:pointer;transition:background var(--tr);position:relative}
.lr:active{background:#F8F9FA}
.lr-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lr-r{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.l-n{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.l-c{font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.l-d{font-size:12px;color:var(--text2);font-weight:500}
.l-a{font-size:16px;font-weight:800;color:var(--text)}
.l-dt{font-size:11px;color:var(--text3);font-weight:500}

.bd{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.02em;flex-shrink:0;white-space:nowrap}
.bd.ok{background:var(--ok-bg);color:var(--ok-tx)}
.bd.wa{background:var(--wa-bg);color:var(--wa-tx)}
.bd.er{background:var(--er-bg);color:var(--er-tx)}
.bd.info{background:var(--info-bg);color:var(--info-tx)}
.bd.vio{background:#EDE9FE;color:#6D28D9}

.btn-p{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:var(--r);background:linear-gradient(135deg,var(--accent-h),var(--accent) 50%,var(--accent-d));color:#fff;font-size:15px;font-weight:800;box-shadow:0 4px 14px rgba(255,107,0,.34);transition:transform var(--tr),opacity var(--tr)}
.btn-p:active{transform:scale(.98);opacity:.9}
.btn-s{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:var(--r);border:1.5px solid var(--b2)!important;background:var(--card);color:var(--text);font-size:15px;font-weight:700;transition:var(--tr)}
.btn-s:active{background:var(--b)}
.btn-ok{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:var(--r);background:linear-gradient(135deg,#34D399,var(--ok) 50%,var(--ok-d));color:#fff;font-size:15px;font-weight:800;box-shadow:0 4px 14px rgba(16,185,129,.3);transition:transform var(--tr)}
.btn-ok:active{transform:scale(.98)}

.fpill{flex-shrink:0;padding:5px 10px;border-radius:99px;border:1.5px solid var(--b2);background:var(--card);font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .15s}
.fpill.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.fab{position:absolute;bottom:20px;right:20px;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(255,107,0,.44);font-size:24px;line-height:1;z-index:10;transition:var(--tr)}
.fab:active{transform:scale(.92)}

.sblk{background:var(--card);border-radius:var(--r);margin:0 16px 12px;overflow:hidden;box-shadow:var(--sh)}
.s-lbl{padding:10px 20px 4px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}

/* ═══ OVERLAYS ════════════════════════════════════════════ */
.bs{display:none;position:absolute;inset:0;z-index:970;align-items:flex-end}
.bs.open{display:flex}
.bs-bg{position:absolute;inset:0;background:rgba(0,0,0,.4);animation:dvFadeIn .35s ease;z-index:0}
.bs-panel{position:relative;width:100%;background:var(--card);border-radius:24px 24px 0 0;padding:8px 0 32px;z-index:10;animation:dvSlideUp .35s ease-out;box-shadow:0 -4px 32px rgba(0,0,0,.14);will-change:transform}
.bs-handle{width:40px;height:4px;border-radius:2px;background:#E0E0E0;margin:8px auto 14px}
.bs-info{padding:0 20px 12px;border-bottom:1px solid var(--b);margin-bottom:4px}
.bs-num{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.bs-cli{font-size:18px;font-weight:800;color:var(--text);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-meta{font-size:13px;color:var(--text2);margin-top:2px}
.bs-act{display:flex;align-items:center;gap:14px;padding:0 20px;min-height:52px;background:transparent;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;border-bottom:1px solid #F8F8F8;width:100%;text-align:left;transition:var(--tr)}
.bs-act:active{background:rgba(0,0,0,.04)}
.bs-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.bs-act.er{color:var(--er)}

.am{display:none;position:absolute;inset:0;z-index:980;align-items:flex-end}
.am.open{display:flex}
.am-bg{position:absolute;inset:0;background:rgba(0,0,0,.4);animation:dvFadeIn .35s ease}
.am-sht{position:relative;width:100%;background:var(--card);border-radius:24px 24px 0 0;padding:8px 20px 32px;z-index:1;animation:dvSlideUp .35s ease-out;max-height:90%;overflow-y:auto;will-change:transform}
.am-sht::-webkit-scrollbar{display:none}
.am-hdl{width:40px;height:4px;border-radius:2px;background:#E0E0E0;margin:8px auto 16px}
.am-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:14px}
.am-row{display:flex;gap:8px;margin-top:18px}
.am-btn{flex:1;height:48px;border-radius:var(--r-sm);border:1.5px solid var(--b2);background:var(--card);font-size:14px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;transition:var(--tr)}
.am-btn:active{background:var(--b)}
.am-btn.p{background:var(--accent);color:#fff;border-color:var(--accent)}
.am-btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.am-btn.er{background:var(--er);color:#fff;border-color:var(--er)}

/* ═══ ANIMATIONS ═════════════════════════════════════════ */
/* Système d'animation cohérent — OUVRIR */
@keyframes dvSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes dvFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dvPageFade{from{opacity:0}to{opacity:1}}
/* FERMER */
@keyframes dvSlideDown{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes dvFadeOut{from{opacity:1}to{opacity:0}}
/* Compatibilité aliases */
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes ripple{0%{transform:scale(.82);opacity:.85}100%{transform:scale(1.12);opacity:0}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4),0 12px 38px rgba(220,38,38,.5)}50%{box-shadow:0 0 0 16px rgba(220,38,38,0),0 12px 38px rgba(220,38,38,.5)}}
@keyframes waveBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* ═══ TRANSITIONS DE PAGE ══════════════════════════════════ */
.page-content:not(.hidden){animation:dvPageFade .25s ease}
/* ═══ CLOSE ANIMATION — classe .dv-removing ═══════════════ */
/* Panels qui slide down */
.dv-removing .bs-panel,
.dv-removing .am-sht,
.dv-removing .modal-content,
.dv-removing .ri-sheet{animation:dvSlideDown .35s ease-in forwards!important;will-change:transform}
/* Overlays qui fade out */
.dv-removing .bs-bg,
.dv-removing .am-bg,
.dv-removing .modal-overlay{animation:dvFadeOut .35s ease forwards!important}
/* Éléments qui sont eux-mêmes le panneau (top-level) */
.dv-removing.v2-bs{display:block!important;animation:dvSlideDown .35s ease-in forwards!important;will-change:transform}
.dv-removing.v2-bs-overlay{display:block!important;animation:dvFadeOut .35s ease forwards!important}

/* ═══ DISABLED STATE ════════════════════════════════════════ */
button:disabled,.btn-p:disabled,.btn-ok:disabled{opacity:.42;cursor:not-allowed;pointer-events:none}

/* ═══ GLOBAL LAYOUT ════════════════════════════════════════ */
.header-container{display:flex;align-items:center;padding:0 16px;width:100%;gap:10px}
.logo{flex-shrink:0}
.logo-img{height:28px;width:auto}

.sidebar-nav{display:flex;flex-direction:column;padding:10px;gap:2px}
.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);font-size:14px;font-weight:600;color:var(--text2);text-decoration:none;transition:background var(--tr),color var(--tr)}
.sidebar-nav a.active{background:var(--accent-wash);color:var(--accent)}
.sidebar-nav a svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}

.main-content{padding-top:var(--header-height);padding-bottom:var(--bottom-nav-height)}

#menu-mobile{display:none;position:fixed;inset:0;z-index:9994;align-items:flex-end}
#menu-mobile.open{display:flex}

#overlay-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:600}
#overlay-menu.active{display:block}

/* ═══ ONBOARDING MODAL ══════════════════════════════════════ */
#onboarding-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center}
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);z-index:0;animation:dvFadeIn .35s ease}
.modal-content{position:relative;z-index:1;background:var(--card);width:100%;max-width:480px;max-height:90dvh;border-radius:24px 24px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 40px rgba(0,0,0,.18);animation:dvSlideUp .35s ease-out;will-change:transform}
.modal-onboarding-content{padding:0}
.onboarding-header{padding:24px 20px 16px;background:var(--card);border-bottom:1px solid var(--b);flex-shrink:0;text-align:center}
.onboarding-logo{font-size:22px;font-weight:900;letter-spacing:-.4px;color:var(--accent);margin-bottom:6px}
.onboarding-header h2{font-size:20px;font-weight:800;color:var(--text);margin:0 0 4px}
.onboarding-header>p{font-size:13px;color:var(--text2);margin:0 0 16px}
.onb-progress{display:flex;align-items:center;justify-content:center;gap:0}
.onb-step-dot{width:28px;height:28px;border-radius:50%;background:var(--b);font-size:12px;font-weight:700;color:var(--text3);display:flex;align-items:center;justify-content:center;transition:background var(--tr),color var(--tr);flex-shrink:0}
.onb-dot-active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(255,107,0,.35)}
.onb-dot-done{background:var(--ok-bg);color:var(--ok)}
.onb-step-line{width:32px;height:2px;background:var(--b2)}
.onboarding-step{flex:1;overflow-y:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:14px}
.onboarding-step::-webkit-scrollbar{display:none}
.onboarding-step h3{font-size:16px;font-weight:800;color:var(--text);margin:0}
.step-hint{font-size:13px;color:var(--text2);margin:0}
.optional{font-size:13px;font-weight:500;color:var(--text3)}
.metiers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metier-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:var(--r);border:2px solid var(--b2);background:var(--card);cursor:pointer;transition:all var(--tr);text-align:center}
.metier-card:active{transform:scale(.97)}
.metier-card.selected{border-color:var(--accent);background:var(--accent-wash)}
.metier-card.selected .metier-nom{color:var(--accent)}
.metier-icone{font-size:26px;line-height:1}
.metier-nom{font-size:11px;font-weight:700;color:var(--text2);line-height:1.2}
.autre-metier-container{display:flex;flex-direction:column;gap:6px}
.autre-metier-container label{font-size:12px;font-weight:600;color:var(--text2)}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:12px;font-weight:600;color:var(--text2)}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-textarea{border:1.5px solid var(--b2);border-radius:var(--r-sm);padding:10px 14px;font-size:14px;color:var(--text);background:var(--card);font-family:inherit;outline:none;width:100%;box-sizing:border-box;resize:none;transition:border-color var(--tr)}
.form-textarea:focus{border-color:var(--accent)}
.onb-toggle-row{display:flex;gap:8px}
.onb-choice-btn{flex:1;height:44px;border-radius:var(--r-sm);border:1.5px solid var(--b2);background:var(--card);font-size:14px;font-weight:700;color:var(--text2);cursor:pointer;font-family:inherit;transition:all var(--tr)}
.onb-choice-btn.onb-active{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
.onboarding-actions{display:flex;gap:10px;padding:16px 20px;background:var(--card);border-top:1px solid var(--b);flex-shrink:0}
.btn-secondary{flex:1;height:52px;border-radius:var(--r);border:1.5px solid var(--b2);background:var(--card);font-size:15px;font-weight:700;color:var(--text2);cursor:pointer;font-family:inherit;transition:var(--tr)}
.btn-secondary:active{background:var(--b)}

/* ═══ BOTTOM NAV V2 ITEMS ══════════════════════════════ */
.v2-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;color:var(--text3);font-size:10px;font-weight:500;font-family:inherit;cursor:pointer;text-decoration:none;padding:0 2px 2px;min-height:unset;min-width:unset;transition:color var(--tr)}
.v2-nav-item svg{width:22px;height:22px;stroke:var(--text3);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--tr)}
.v2-nav-item span{line-height:1.2;transition:color var(--tr)}
.v2-nav-item.active,.v2-nav-item.active svg{color:var(--accent);stroke:var(--accent)}
.v2-nav-item.active{font-weight:700}
.v2-nav-vocal.active,.v2-nav-vocal.active svg{color:var(--accent)!important;stroke:var(--accent)!important}

/* ═══ PDF VIEWER MOBILE ════════════════════════════════════ */
#mpv-modal{position:fixed!important;inset:0!important;z-index:9995!important;background:var(--card);display:flex!important;flex-direction:column!important}
.mpv-header{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;border-bottom:1px solid var(--b2);flex-shrink:0;background:var(--card)}
.mpv-title{font-size:16px;font-weight:700;color:var(--text)}
.mpv-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--b);border:none;cursor:pointer;color:var(--text2);padding:0}
.mpv-body{flex:1!important;display:flex!important;flex-direction:column!important;min-height:0!important}
.mpv-iframe{width:100%!important;flex:1!important;border:none!important;display:block!important;height:100%!important;min-height:0!important}

/* ═══ PDF VIEWER FULLSCREEN MOBILE ══════════════════════════ */
#dv-pdf-fs{position:fixed;inset:0;z-index:9997;background:var(--card);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s ease-out;will-change:transform}
#dv-pdf-fs.dv-pdf-fs-open{transform:translateY(0)}
#dv-pdf-fs.dv-removing{animation:dvSlideDown .35s ease-in forwards!important;transition:none!important}
.dv-pdf-fs-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px;z-index:1;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dv-pdf-fs-iframe{flex:1;width:100%;border:none;touch-action:auto;display:block;min-height:0}

/* ═══ ONBOARDING ACTIONS ════════════════════════════════ */
.onboarding-actions{display:flex;gap:12px;padding:16px 20px}
.onboarding-actions .btn-secondary{flex:0 0 100px}
.onboarding-actions .btn-primary{flex:1}
.onboarding-step{text-align:center}
.onboarding-step h3{text-align:center}
.onboarding-step label{display:block;text-align:center}
.onboarding-step input,.onboarding-step textarea,.onboarding-step select{text-align:center}

/* ═══ ONBOARDING MODAL FULLSCREEN ═══════════════════════ */
.modal-onboarding{align-items:stretch;justify-content:stretch}
.modal-onboarding-content{max-height:100dvh!important;height:100dvh!important;border-radius:0!important;max-width:100%!important}
.modal-onboarding .modal-content,.modal-onboarding-content{transform:none!important;animation:none!important;transition:none!important}
.onboarding-header-compact{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:0.5px solid var(--b);flex-shrink:0}
.onb-dots{display:flex;gap:8px;align-items:center}
.onb-dot{width:28px;height:28px;border-radius:50%;background:var(--b);color:var(--text2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.onb-dot.active,.onb-dot.onb-dot-active{background:var(--accent);color:#fff}
#onboarding-modal input::placeholder,#onboarding-modal textarea::placeholder,#onboarding-modal select::placeholder{color:#C8C8C8!important;opacity:1!important}
.field-error{color:#E53935;font-size:12px;margin-top:4px;display:block}
.input-error{border:1.5px solid #E53935!important}

@media (orientation:landscape){
  .modal-onboarding .onboarding-header-compact{display:none!important}
  .modal-onboarding .onboarding-actions{display:none!important}
  #step-signature canvas{width:100%!important;max-width:100%!important;height:160px!important}
  #step-signature{padding:8px 16px!important}
  #step-signature h3{font-size:14px!important;margin-bottom:4px!important}
  #step-signature p{display:none!important}
}

html, body {
  background-color: var(--bg) !important;
}

/* Toast notifications */
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  z-index: 99999;
  min-width: 280px;
  max-width: 340px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  cursor: default;
}
.notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.notification.clickable {
  pointer-events: auto;
  cursor: pointer;
}
.notification.clickable:hover {
  background: #2a2a2a;
}
.notification-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.notification-success .notification-icon { background: rgba(34,197,94,0.2); }
.notification-error .notification-icon { background: rgba(239,68,68,0.2); }
.notification-info .notification-icon { background: rgba(59,130,246,0.2); }
.notification-title {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.notification-message {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}