/* ================================================================
   CAISSEBAR v2 — css/global.css
   Design system complet, partagé entre toutes les pages
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Syne:wght@700;800&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --amber:    #F59E0B;
  --amber-d:  #D97706;
  --amber-dd: #B45309;
  --amber-l:  #FEF3C7;
  --amber-ll: #FFFBEB;
  --rust:     #DC2626;
  --rust-l:   #FEE2E2;
  --green:    #059669;
  --green-l:  #D1FAE5;
  --blue:     #2563EB;
  --blue-l:   #DBEAFE;
  --bg:       #FFF8EE;
  --surface:  #FFFFFF;
  --surface2: #FFF3DC;
  --border:   #F0E0C0;
  --border-d: #E2C896;
  --ink:      #1C1209;
  --ink2:     #6B4C1E;
  --ink3:     #A87C40;
  --ink4:     #C8A96A;
  --shadow-sm:0 2px 8px rgba(120,70,10,.10);
  --shadow:   0 4px 16px rgba(120,70,10,.14);
  --shadow-lg:0 8px 32px rgba(120,70,10,.20);
  --r-sm:  8px; --r-md: 14px; --r-lg: 20px;
  --r-xl:  28px; --r-full: 999px;
  --font-sans:    'Nunito', sans-serif;
  --font-display: 'Syne', sans-serif;
  --t-fast: .12s ease; --t-mid: .2s ease;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }

/* ── LOGO ────────────────────────────────────────────────────── */
.logo {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800;
  color: var(--amber-d); letter-spacing: -.5px; line-height: 1;
}
.logo span { color: var(--ink); }

/* ── Masquer le rôle sur petite ecran ────────────────────────────────────────────── */
@media (max-width: 768px) {
.role-chip {
  display: none;
}
}

/* ── SURFACE CARD ────────────────────────────────────────────── */
.surface-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
}

/* ── BOUTONS ─────────────────────────────────────────────────── */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px;
  background: var(--amber); color: var(--ink);
  font-size: 1rem; font-weight: 900;
  border: none; border-radius: var(--r-md); cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  box-shadow: 0 4px 14px rgba(245,158,11,.35);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover  { background: var(--amber-d); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .5; pointer-events: none; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  background: transparent; color: var(--ink2);
  font-size: .9rem; font-weight: 800;
  border: 2px solid var(--border-d); border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary:hover { border-color: var(--amber); color: var(--amber-d); background: var(--amber-ll); }

.btn-ghost {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: .82rem; font-weight: 800;
  color: var(--amber-d); padding: 4px 6px;
  transition: opacity var(--t-fast);
}
.btn-ghost:hover { opacity: .75; }
.btn-ghost:disabled { opacity: .4; pointer-events: none; }

/* ── CHAMPS ──────────────────────────────────────────────────── */
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label {
  font-size: .8rem; font-weight: 800; color: var(--ink2); letter-spacing: .2px;
}
.input-field {
  width: 100%; padding: 13px 16px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-md); font-size: 1rem; font-weight: 700; color: var(--ink);
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input-field:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}
.input-field::placeholder { color: var(--ink4); font-weight: 600; }
.input-field.error { border-color: var(--rust); }
.input-hint  { font-size: .72rem; font-weight: 700; color: var(--ink3); }
.input-error { font-size: .72rem; font-weight: 700; color: var(--rust); display: none; }
.optional-badge {
  display: inline-block; font-size: .62rem; font-weight: 800;
  color: var(--ink3); background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 1px 7px; margin-left: 5px; text-transform: uppercase; letter-spacing: .3px;
}

/* ── TÉLÉPHONE ───────────────────────────────────────────────── */
.phone-wrapper {
  display: flex; border: 2px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.phone-wrapper:focus-within {
  border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}
.phone-wrapper.error { border-color: var(--rust); }
.phone-prefix {
  display: flex; align-items: center; gap: 6px;
  padding: 13px 12px 13px 16px;
  background: var(--surface2); border-right: 1.5px solid var(--border);
  font-size: .9rem; font-weight: 800; color: var(--ink2);
  white-space: nowrap; flex-shrink: 0;
}
.phone-field {
  flex: 1; padding: 13px 16px; border: none; outline: none;
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  background: transparent; min-width: 0;
}
.phone-field::placeholder { color: var(--ink4); font-weight: 600; }

/* ── PIN (4 cases) ───────────────────────────────────────────── */
.pin-inputs { display: flex; gap: 10px; justify-content: center; }
.pin-box {
  width: 58px; height: 66px;
  border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
  font-size: 1.6rem; font-weight: 900;
  font-family: var(--font-display); color: var(--ink);
  text-align: center; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-text-security: disc; text-security: disc;
}
.pin-box:focus {
  border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.15);
}
.pin-box.filled  { border-color: var(--amber-d); background: var(--amber-ll); }
.pin-box.error   { border-color: var(--rust); background: var(--rust-l); animation: shake .35s ease; }
.pin-box.visible { -webkit-text-security: none; text-security: none; font-size: 1.3rem; }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 22px; border-radius: var(--r-full);
  font-size: .88rem; font-weight: 800; white-space: nowrap;
  z-index: 999; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.toast.show    { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--green); color: #fff; box-shadow: 0 6px 20px rgba(5,150,105,.4); }
.toast.error   { background: var(--rust);  color: #fff; box-shadow: 0 6px 20px rgba(220,38,38,.4); }
.toast.info    { background: var(--ink);   color: #fff; box-shadow: 0 6px 20px rgba(28,18,9,.4); }

/* ── SPINNER ─────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.spinner.dark { border-color: rgba(28,18,9,.15); border-top-color: var(--ink2); }

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes shake     { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes fadeSlide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }

.fade-slide { animation: fadeSlide .22s ease; }

/* ── STEPS ───────────────────────────────────────────────────── */
.steps-wrapper { display: flex; flex-direction: column; gap: 6px; }
.steps-track   { display: flex; align-items: center; }
.step-dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-d); background: var(--surface);
  font-size: .75rem; font-weight: 900; color: var(--ink3);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-mid);
}
.step-dot.active { background: var(--amber); border-color: var(--amber-d); color: var(--ink); }
.step-dot.done   { background: var(--green); border-color: var(--green); color: #fff; }
.step-line {
  flex: 1; height: 2px; background: var(--border); margin: 0 4px;
  border-radius: 2px; transition: background var(--t-mid);
}
.step-line.done { background: var(--green); }
.steps-labels {
  display: flex; justify-content: space-between; padding: 0 2px;
}
.step-label {
  font-size: .62rem; font-weight: 800; color: var(--ink3);
  text-transform: uppercase; letter-spacing: .3px; text-align: center;
}

/* ── SECTIONS D'ÉTAPES ───────────────────────────────────────── */
.step-section { display: none; flex-direction: column; gap: 16px; }
.step-section.active { display: flex; animation: fadeSlide .22s ease; }

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider-text {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink3); font-size: .75rem; font-weight: 700;
}
.divider-text::before, .divider-text::after {
  content: ''; flex: 1; height: 1.5px; background: var(--border); border-radius: 2px;
}

/* ── BLOC INFO ───────────────────────────────────────────────── */
.info-block {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 13px 14px;
}
.info-block .ib-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.info-block .ib-text { font-size: .78rem; font-weight: 700; color: var(--ink2); line-height: 1.6; }

/* ── FORCE DU PIN ────────────────────────────────────────────── */
.pin-strength { display: flex; gap: 4px; margin-top: 6px; }
.pin-bar {
  flex: 1; height: 4px; border-radius: 2px; background: var(--border);
  transition: background .25s;
}
.pin-bar.weak   { background: var(--rust); }
.pin-bar.medium { background: var(--amber); }
.pin-bar.strong { background: var(--green); }

/* ── LIEN ────────────────────────────────────────────────────── */
.link-row { text-align: center; font-size: .82rem; font-weight: 700; color: var(--ink3); }
.link-row a { color: var(--amber-d); font-weight: 900; cursor: pointer; }
.link-row a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   SCROLLBAR CUSTOM — CaisseBar
══════════════════════════════════════════════════════════ */

/* ── Navigateurs WebKit (Chrome, Safari, Edge) ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-d, #d4c5a0);
  border-radius: 999px;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--amber, #F59E0B);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Firefox ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-d, #d4c5a0) transparent;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */

/* ── Desktop : centré dans le topbar ── */
#cb-nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;  /* pousse automatiquement au centre */
}

#cb-nav-desktop .cb-nav-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-full, 999px);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink2);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
#cb-nav-desktop .cb-nav-item:hover {
  background: var(--amber-ll);
  border-color: var(--border-d);
  color: var(--amber-dd);
}
#cb-nav-desktop .cb-nav-item.actif {
  background: var(--amber);
  border-color: var(--amber-d);
  color: var(--ink);
}

/* ── Mobile : barre fixe en bas ── */
#cb-nav-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--surface);
  border-top: 2px solid var(--border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.cb-nav-mobile-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  padding: 0 8px;
}

#cb-nav-mobile .cb-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: var(--r-md, 10px);
  text-decoration: none;
  transition: all 0.15s;
  min-width: 52px;
  -webkit-tap-highlight-color: transparent;
}
#cb-nav-mobile .cb-nav-item:active {
  transform: scale(0.93);
}
#cb-nav-mobile .cb-nav-icon {
  font-size: 1.3rem;
  line-height: 1;
}
#cb-nav-mobile .cb-nav-label {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--ink3);
  white-space: nowrap;
}
#cb-nav-mobile .cb-nav-item.actif .cb-nav-label {
  color: var(--amber-d);
}
#cb-nav-mobile .cb-nav-item.actif .cb-nav-icon {
  filter: drop-shadow(0 0 4px rgba(245,158,11,0.5));
}
#cb-nav-mobile .cb-nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0;
}
#cb-nav-mobile .cb-nav-item.actif .cb-nav-dot {
  opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  #cb-nav-desktop { display: none !important; }
  #cb-nav-mobile  { display: block; }

  /* Espace en bas pour ne pas cacher le contenu */
  .main { padding-bottom: calc(64px + 16px) !important; }
}

@media (min-width: 1025px) {
  #cb-nav-desktop { display: flex; }
  #cb-nav-mobile  { display: none !important; }
}