/**
 * JOMION SANTÉ — Design System CSS
 * Violet Jomion #8B4789 — Luxury/Refined — Mobile-first
 * DM Sans (body) + DM Serif Display (titres)
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --j-primary:         #8B4789;
  --j-primary-dark:    #6B3569;
  --j-primary-darker:  #4E2650;
  --j-primary-light:   #A85BA6;
  --j-primary-50:      #F7EFF7;
  --j-primary-100:     #EDD9EC;
  --j-primary-200:     #D9B3D8;
  --j-gradient:        linear-gradient(135deg,#8B4789 0%,#6B3569 100%);
  --j-gradient-hero:   linear-gradient(160deg,#8B4789 0%,#4E2650 60%,#2D1530 100%);
  --j-danger:          #DC2626;  --j-danger-light:    #FEF2F2; --j-danger-border: #FECACA;
  --j-success:         #16A34A;  --j-success-light:   #F0FDF4; --j-success-border:#BBF7D0;
  --j-warning:         #D97706;  --j-warning-light:   #FFFBEB; --j-warning-border:#FDE68A;
  --j-info:            #0284C7;  --j-info-light:      #F0F9FF; --j-info-border:   #BAE6FD;
  --j-bg:              #F8F6F9;
  --j-bg-card:         #FFFFFF;
  --j-bg-input:        #FDFCFE;
  --j-text-1:          #1A1425;
  --j-text-2:          #6B5F72;
  --j-text-3:          #A89AAE;
  --j-text-4:          #C8BDCc;
  --j-border:          #EAE4EC;
  --j-border-strong:   #D4C8D6;
  --j-divider:         #F0EBF2;
  --font-body:         'DM Sans',-apple-system,sans-serif;
  --font-display:      'DM Serif Display',Georgia,serif;
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --shadow-xs:   0 1px 3px rgba(139,71,137,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:   0 2px 8px rgba(139,71,137,.08),0 1px 4px rgba(0,0,0,.05);
  --shadow-md:   0 4px 16px rgba(139,71,137,.12),0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:   0 8px 32px rgba(139,71,137,.15),0 4px 16px rgba(0,0,0,.08);
  --shadow-xl:   0 16px 48px rgba(139,71,137,.18),0 8px 24px rgba(0,0,0,.10);
  --shadow-primary:    0 4px 20px rgba(139,71,137,.35);
  --shadow-primary-lg: 0 8px 32px rgba(139,71,137,.40);
  --t-fast:   150ms cubic-bezier(.4,0,.2,1);
  --t-base:   250ms cubic-bezier(.4,0,.2,1);
  --t-slow:   400ms cubic-bezier(.4,0,.2,1);
  --t-spring: 500ms cubic-bezier(.34,1.56,.64,1);
  --bottom-nav-h:  68px;
  --top-bar-h:     60px;
  --sidebar-w:     260px;
  --content-max:   480px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:.9375rem;font-weight:400;color:var(--j-text-1);background:var(--j-bg);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;}
img{max-width:100%;height:auto;display:block}
a{color:var(--j-primary);text-decoration:none}
a:hover{color:var(--j-primary-dark)}

/* ── TYPOGRAPHY ── */
.j-display{font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:-.02em}
h1,h2,h3,h4,h5,h6{font-family:var(--font-body);font-weight:600;line-height:1.3;color:var(--j-text-1)}
.text-primary{color:var(--j-primary)!important} .text-muted{color:var(--j-text-2)!important} .text-light{color:var(--j-text-3)!important}
.text-danger{color:var(--j-danger)!important} .text-success{color:var(--j-success)!important} .text-warning{color:var(--j-warning)!important}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family:var(--font-body);font-size:.9rem;font-weight:600;line-height:1;border:none;cursor:pointer;border-radius:var(--r-full);padding:.75rem 1.5rem;transition:all var(--t-base);white-space:nowrap;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background var(--t-fast)}
.btn:hover::after{background:rgba(255,255,255,.08)} .btn:active::after{background:rgba(0,0,0,.06)} .btn:active{transform:scale(.98)}
.btn-primary{background:var(--j-gradient);color:#fff;box-shadow:var(--shadow-primary)}
.btn-primary:hover{box-shadow:var(--shadow-primary-lg);transform:translateY(-1px);color:#fff}
.btn-outline{background:transparent;color:var(--j-primary);border:1.5px solid var(--j-primary)}
.btn-outline:hover{background:var(--j-primary-50);color:var(--j-primary-dark)}
.btn-ghost{background:var(--j-primary-50);color:var(--j-primary);box-shadow:none}
.btn-ghost:hover{background:var(--j-primary-100)}
.btn-danger{background:var(--j-danger);color:#fff;box-shadow:0 4px 16px rgba(220,38,38,.30)}
.btn-danger:hover{box-shadow:0 6px 24px rgba(220,38,38,.40);transform:translateY(-1px)}
.btn-sm{font-size:.8125rem;padding:.5rem 1rem} .btn-lg{font-size:1rem;padding:.9rem 2rem} .btn-xl{font-size:1.0625rem;padding:1.05rem 2.4rem}
.btn-block{width:100%}
.btn.loading{opacity:.7;pointer-events:none}
.btn.loading::before{content:'';width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-right:.4rem}

/* ── CARDS ── */
.card{background:var(--j-bg-card);border-radius:var(--r-lg);border:1px solid var(--j-border);box-shadow:var(--shadow-xs);overflow:hidden}
.card-body{padding:1.25rem}
.card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--j-divider);display:flex;align-items:center;justify-content:space-between}
.card-footer{padding:.875rem 1.25rem;border-top:1px solid var(--j-divider);background:var(--j-divider)}
.card-clickable{cursor:pointer;transition:all var(--t-base)}
.card-clickable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--j-primary-200)}
.card-gradient{background:var(--j-gradient);border:none;color:#fff}
.card-gradient .text-muted{color:rgba(255,255,255,.7)!important}

/* ── FORMS ── */
.form-group{margin-bottom:1.125rem}
.form-label{display:block;font-size:.8125rem;font-weight:600;color:var(--j-text-2);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}
.form-control{display:block;width:100%;padding:.75rem 1rem;font-family:var(--font-body);font-size:.9375rem;color:var(--j-text-1);background:var(--j-bg-input);border:1.5px solid var(--j-border);border-radius:var(--r-md);transition:all var(--t-fast);outline:none;appearance:none;-webkit-appearance:none}
.form-control::placeholder{color:var(--j-text-4)}
.form-control:focus{border-color:var(--j-primary);background:#fff;box-shadow:0 0 0 3px rgba(139,71,137,.12)}
.form-control.is-invalid{border-color:var(--j-danger);background:var(--j-danger-light)}
.input-group{position:relative}
.input-group .form-control{padding-left:2.75rem}
.input-group .input-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--j-text-3);pointer-events:none;font-size:1.1rem}
.input-group .input-action{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);color:var(--j-text-3);cursor:pointer;padding:.25rem;border-radius:var(--r-xs);transition:color var(--t-fast)}
.input-group .input-action:hover{color:var(--j-primary)}
.form-error{font-size:.8rem;color:var(--j-danger);margin-top:.3rem;display:flex;align-items:center;gap:.25rem}
.form-hint{font-size:.8rem;color:var(--j-text-3);margin-top:.3rem}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B5F72' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.5rem;cursor:pointer}
.toggle-input{display:none}
.toggle-track{width:44px;height:24px;background:var(--j-border-strong);border-radius:var(--r-full);position:relative;transition:background var(--t-base)}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform var(--t-spring);box-shadow:var(--shadow-xs)}
.toggle-input:checked+.toggle-track{background:var(--j-primary)}
.toggle-input:checked+.toggle-track::after{transform:translateX(20px)}
/* ── FORMS – extensions (ne pas modifier l'existant) ── */
/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}
/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--j-border);
  background: var(--j-bg-input);
  border-radius: var(--r-xs);
  transition: all var(--t-fast);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.form-check-input[type="radio"] {
  border-radius: 50%;
}
.form-check-input:focus {
  border-color: var(--j-primary);
  box-shadow: 0 0 0 3px rgba(139,71,137,.12);
  outline: none;
}
.form-check-input:checked {
  background: var(--j-primary);
  border-color: var(--j-primary);
}
.form-check-input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: .3rem;
  height: .55rem;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
}
.form-check-input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
}
.form-check-input:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.form-check-label {
  font-size: .9375rem;
  color: var(--j-text-1);
  cursor: pointer;
  line-height: 1.4;
}
/* Range */
.form-range {
  width: 100%;
  height: 1.25rem;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.form-range::-webkit-slider-runnable-track {
  height: .375rem;
  background: var(--j-border);
  border-radius: var(--r-full);
}
.form-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -.375rem;
  background: var(--j-primary);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-fast);
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(139,71,137,.12);
}
.form-range::-moz-range-track {
  height: .375rem;
  background: var(--j-border);
  border-radius: var(--r-full);
}
.form-range::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  background: var(--j-primary);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
/* File input */
.form-file-label {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  background: var(--j-bg-input);
  border: 1.5px dashed var(--j-border);
  border-radius: var(--r-md);
  color: var(--j-text-3);
  font-size: .9375rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.form-file-label:hover {
  border-color: var(--j-primary);
  color: var(--j-primary);
}
.form-file-input {
  display: none;
}
/* Champ désactivé (s'applique à tous) */
.form-control:disabled,
.form-control[readonly] {
  opacity: .55;
  cursor: not-allowed;
  background: var(--j-bg-input);
}
/* ── FORM-SELECT – extensions ── */
/* S'assure que le select désactivé masque la flèche custom et bloque l'interaction */
.form-select:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
/* Option placeholder (valeur vide) en couleur atténuée */
.form-select option[value=""] {
  color: var(--j-text-4);
}
/* Options normales remises en couleur texte principale */
.form-select option {
  color: var(--j-text-1);
  background: var(--j-bg-input);
}
/* Select multiple : retire la flèche et ajuste le padding */
.form-select[multiple] {
  background-image: none;
  padding-right: 1rem;
  height: auto;
}
.form-select[multiple] option {
  padding: .35rem .5rem;
  border-radius: var(--r-xs);
}
.form-select[multiple] option:checked {
  background: var(--j-primary);
  color: #fff;
}
/* État invalide (cohérent avec .form-control.is-invalid) */
.form-select.is-invalid {
  border-color: var(--j-danger);
  background-color: var(--j-danger-light);
}
/* ── FORM-SELECT – reprend les mêmes tokens que .form-control ── */
.form-select {
  display: block;
  width: 100%;
  padding: .75rem 2.5rem .75rem 1rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--j-text-1);
  background-color: var(--j-bg-input);
  border: 1.5px solid var(--j-border);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B5F72' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--j-primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(139,71,137,.12);
}

.form-select:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.form-select.is-invalid {
  border-color: var(--j-danger);
  background-color: var(--j-danger-light);
}

/* Variante sm (form-select-sm) */
.form-select.form-select-sm {
  padding: .45rem 2.25rem .45rem .75rem;
  font-size: .875rem;
  border-radius: var(--r-sm);
}



/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;padding:.25rem .625rem;border-radius:var(--r-full);white-space:nowrap}
.badge-primary{background:var(--j-primary-50);color:var(--j-primary-dark)}
.badge-danger{background:var(--j-danger-light);color:var(--j-danger)}
.badge-success{background:var(--j-success-light);color:var(--j-success)}
.badge-warning{background:var(--j-warning-light);color:var(--j-warning)}
.badge-info{background:var(--j-info-light);color:var(--j-info)}
.badge-neutral{background:var(--j-divider);color:var(--j-text-2)}

/* ── AVATARS ── */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;color:#fff;background:var(--j-gradient);flex-shrink:0;overflow:hidden;box-shadow:var(--shadow-sm)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-xs{width:28px;height:28px;font-size:.7rem} .avatar-sm{width:36px;height:36px;font-size:.8rem}
.avatar-md{width:44px;height:44px;font-size:.9rem} .avatar-lg{width:56px;height:56px;font-size:1.1rem}
.avatar-xl{width:72px;height:72px;font-size:1.4rem} .avatar-xxl{width:96px;height:96px;font-size:1.8rem}

/* ── ALERTS ── */
.alert{display:flex;gap:.75rem;padding:.875rem 1rem;border-radius:var(--r-md);font-size:.9rem;border:1px solid transparent}
.alert-icon{font-size:1.1rem;flex-shrink:0;margin-top:.05rem}
.alert-primary{background:var(--j-primary-50);border-color:var(--j-primary-200);color:var(--j-primary-dark)}
.alert-danger{background:var(--j-danger-light);border-color:var(--j-danger-border);color:#991B1B}
.alert-success{background:var(--j-success-light);border-color:var(--j-success-border);color:#166534}
.alert-warning{background:var(--j-warning-light);border-color:var(--j-warning-border);color:#92400E}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}

/* ── PROGRESS ── */
.progress{height:6px;background:var(--j-border);border-radius:var(--r-full);overflow:hidden}
.progress-bar{height:100%;background:var(--j-gradient);border-radius:var(--r-full);transition:width var(--t-slow)}
.progress-bar.danger{background:var(--j-danger)} .progress-bar.warning{background:var(--j-warning)} .progress-bar.success{background:var(--j-success)}

/* ── SKELETON ── */
.skeleton{background:linear-gradient(90deg,var(--j-border) 25%,var(--j-divider) 50%,var(--j-border) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── DIVIDER ── */
.divider{display:flex;align-items:center;gap:.75rem;color:var(--j-text-3);font-size:.8125rem;font-weight:500;margin:1.25rem 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--j-border)}

/* ── STAT CARDS ── */
.stat-card{background:var(--j-bg-card);border-radius:var(--r-lg);border:1px solid var(--j-border);padding:1.125rem;box-shadow:var(--shadow-xs)}
.stat-value{font-size:1.75rem;font-weight:700;color:var(--j-text-1);line-height:1.1;letter-spacing:-.02em}
.stat-label{font-size:.8rem;color:var(--j-text-2);font-weight:500;margin-top:.2rem}
.stat-icon{width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--j-primary-50);color:var(--j-primary)}
.stat-trend{font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:.2rem}
.stat-trend.up{color:var(--j-success)} .stat-trend.down{color:var(--j-danger)}

/* ── BOTTOM NAV ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:rgba(255,255,255,.95);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--j-border);display:flex;align-items:center;justify-content:space-around;padding:0 .5rem;padding-bottom:env(safe-area-inset-bottom);z-index:100;box-shadow:0 -4px 24px rgba(139,71,137,.08)}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;cursor:pointer;text-decoration:none;color:var(--j-text-3);font-size:.6875rem;font-weight:600;transition:color var(--t-fast);border-radius:var(--r-md);-webkit-tap-highlight-color:transparent;position:relative}
.bottom-nav-item i{font-size:1.3rem;transition:transform var(--t-spring)}
.bottom-nav-item:hover{color:var(--j-primary)} .bottom-nav-item:active i{transform:scale(.9)}
.bottom-nav-item.active{color:var(--j-primary)}
.bottom-nav-item.active i{transform:scale(1.1)}
.bottom-nav-item.active::before{content:'';position:absolute;top:0;width:32px;height:3px;background:var(--j-gradient);border-radius:0 0 var(--r-full) var(--r-full)}
.bottom-nav-fab{width:52px;height:52px;background:var(--j-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:var(--shadow-primary);transition:all var(--t-spring);margin-top:-20px;flex-shrink:0}
.bottom-nav-fab:hover{transform:scale(1.08);box-shadow:var(--shadow-primary-lg)} .bottom-nav-fab:active{transform:scale(.95)}

/* ── TOP BAR ── */
.top-bar{position:sticky;top:0;z-index:90;height:var(--top-bar-h);background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--j-border);display:flex;align-items:center;padding:0 1rem;gap:.75rem}
.top-bar-title{flex:1;font-size:1rem;font-weight:700;color:var(--j-text-1);text-align:center}
.top-bar-action{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);cursor:pointer;color:var(--j-text-2);background:transparent;border:none;font-size:1.2rem;transition:all var(--t-fast);-webkit-tap-highlight-color:transparent}
.top-bar-action:hover{background:var(--j-primary-50);color:var(--j-primary)}

/* ── LAYOUT CLIENT ── */
.client-layout{min-height:100dvh;padding-bottom:calc(var(--bottom-nav-h) + 16px)}
.page-content{max-width:var(--content-max);margin:0 auto;padding:1rem}
.page-header{padding:1.5rem 1rem 1rem}
.page-header-title{font-size:1.5rem;font-weight:700;color:var(--j-text-1);letter-spacing:-.02em}
.page-header-sub{font-size:.875rem;color:var(--j-text-2);margin-top:.2rem}

/* ── QR FRAME ── */
.qr-frame{position:relative;padding:1rem;background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);border:3px solid var(--j-primary-100)}
.qr-frame::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-xl);background:var(--j-gradient);z-index:-1;opacity:.15}

/* ── BLOOD BADGE ── */
.blood-badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:linear-gradient(135deg,#EF4444,#B91C1C);color:#fff;border-radius:50%;font-size:1rem;font-weight:800;box-shadow:0 4px 12px rgba(239,68,68,.35);letter-spacing:-.03em;flex-shrink:0}

/* ── CHIPS ── */
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .75rem;border-radius:var(--r-full);font-size:.8125rem;font-weight:500;background:var(--j-divider);color:var(--j-text-2);border:1px solid var(--j-border)}
.chip-remove{font-size:.9rem;color:var(--j-text-3);transition:color var(--t-fast);cursor:pointer}
.chip-remove:hover{color:var(--j-danger)}

/* ── LIST ITEMS ── */
.list-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border-bottom:1px solid var(--j-divider);transition:background var(--t-fast);text-decoration:none;color:inherit}
.list-item:last-child{border-bottom:none} .list-item:hover{background:var(--j-primary-50)}
.list-item-content{flex:1;min-width:0}
.list-item-title{font-weight:600;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item-sub{font-size:.8125rem;color:var(--j-text-2);margin-top:.1rem}
.list-item-right{color:var(--j-text-3);font-size:1rem;flex-shrink:0}

/* ── TOAST ── */
#toast-container{position:fixed;top:1rem;right:1rem;left:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;max-width:420px;margin:0 auto}
.toast{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;background:var(--j-text-1);color:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-xl);pointer-events:all;animation:toastIn .3s var(--t-spring) forwards;font-size:.9rem}
.toast.toast-success{background:var(--j-success)} .toast.toast-danger{background:var(--j-danger)} .toast.toast-warning{background:var(--j-warning)} .toast.toast-info{background:var(--j-info)}
.toast.removing{animation:toastOut .25s ease-in forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px) scale(.95)}}

/* ── SPINNER ── */
.spinner{width:24px;height:24px;border:2.5px solid var(--j-border);border-top-color:var(--j-primary);border-radius:50%;animation:spin .65s linear infinite;display:inline-block}
.spinner-sm{width:16px;height:16px;border-width:2px} .spinner-lg{width:36px;height:36px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
/* @keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} */
.page-enter{animation:pageIn .3s ease-out forwards}

/* ── EMPTY STATE ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem;text-align:center}
.empty-icon{font-size:3rem;opacity:.25;line-height:1}
.empty-title{font-weight:600;color:var(--j-text-2)} .empty-text{font-size:.875rem;color:var(--j-text-3);max-width:280px}

/* ── SECTION ── */
.section{margin-bottom:1.5rem}
.section-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--j-text-3);padding:0 .25rem;margin-bottom:.625rem}

/* ── ADMIN ── */
.admin-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--j-text-1);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;overflow-y:auto;overflow-x:hidden;transition:transform var(--t-base)}
.sidebar-brand{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar-brand-logo{width:36px;height:36px;background:var(--j-gradient);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;font-weight:800;flex-shrink:0;box-shadow:var(--shadow-primary)}
.sidebar-brand-name{font-size:.9375rem;font-weight:700;color:#fff} .sidebar-brand-sub{font-size:.7rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em}
.sidebar-nav{flex:1;padding:1rem 0;}
/* .sidebar-nav{ */
    /* display: flex;
    flex-direction: column;
    line-height: 0;
    padding:1rem 0; */
/* } */
/* .sidebar-nav > * { */
    /* line-height: normal; */
/* } */
.sidebar-section-label{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.25);padding:.75rem 1.25rem .375rem}
.sidebar-item{display:flex;align-items:center;gap:.75rem;padding:.625rem 1.25rem;color:rgba(255,255,255,.55);font-size:.875rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all var(--t-fast);position:relative;margin:0;border-radius:var(--r-md)}
.sidebar-item i{font-size:1.1rem;flex-shrink:0}
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.sidebar-item.active{color:#fff;background:rgba(139,71,137,.25);font-weight:600}
.sidebar-item.active::before{content:'';position:absolute;left:-2px;top:20%;bottom:20%;width:3px;background:var(--j-gradient);border-radius:var(--r-full)}
.sidebar-badge{margin-left:auto;background:var(--j-primary);color:#fff;font-size:.65rem;font-weight:700;padding:.15rem .4rem;border-radius:var(--r-full);min-width:18px;text-align:center}
.sidebar-footer{padding:1rem;border-top:1px solid rgba(255,255,255,.06)}
.sidebar-user{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--r-md);cursor:pointer;transition:background var(--t-fast)}
.sidebar-user:hover{background:rgba(255,255,255,.06)}
.sidebar-user-name{font-size:.8125rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:.7rem;color:rgba(255,255,255,.4)}
.admin-main{flex:1;margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.admin-topbar{height:60px;background:var(--j-bg-card);border-bottom:1px solid var(--j-border);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-xs)}
.admin-page{padding:1.5rem;flex:1}
.admin-page-title{font-size:1.375rem;font-weight:700;color:var(--j-text-1);letter-spacing:-.02em}
.admin-page-sub{font-size:.875rem;color:var(--j-text-2);margin-top:.2rem}

/* ── SUB ALERT BANNER ── */
.sub-alert-banner{position:sticky;top:var(--top-bar-h);z-index:80;padding:.625rem 1rem;font-size:.8125rem;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;gap:.5rem}
.sub-alert-banner.expiring{background:var(--j-warning-light);color:#92400E;border-bottom:1px solid var(--j-warning-border)}
.sub-alert-banner.expired{background:var(--j-danger-light);color:#991B1B;border-bottom:1px solid var(--j-danger-border)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--j-border-strong);border-radius:var(--r-full)} ::-webkit-scrollbar-thumb:hover{background:var(--j-primary-200)}
::selection{background:var(--j-primary-100);color:var(--j-primary-dark)}
:focus-visible{outline:2px solid var(--j-primary);outline-offset:2px;border-radius:var(--r-xs)}

/* ── UTILITIES ── */
.rounded-full{border-radius:var(--r-full)!important} .rounded-xl{border-radius:var(--r-xl)!important} .rounded-lg{border-radius:var(--r-lg)!important}
.bg-primary{background:var(--j-gradient)!important} .bg-primary-50{background:var(--j-primary-50)!important}
.shadow-primary{box-shadow:var(--shadow-primary)!important} .shadow-sm{box-shadow:var(--shadow-sm)!important} .shadow-md{box-shadow:var(--shadow-md)!important}
.p-card{padding:1.25rem!important}

@media(max-width:480px){:root{--content-max:100%} .page-content{padding:.875rem}}
@media(min-width:481px){.bottom-nav{max-width:var(--content-max);left:50%;transform:translateX(-50%);border-radius:var(--r-xl) var(--r-xl) 0 0;border:1px solid var(--j-border);border-bottom:none}}
@media(max-width:768px){.sidebar{transform:translateX(-100%)} .sidebar.open{transform:none} .admin-main{margin-left:0} .admin-page{padding:1rem}}






/* =========================================================================
   JOMION — Styles Temps Réel / WebSocket
   ========================================================================= */

/* ── Indicateur de statut WS ── */
#ws-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: .4rem;
    vertical-align: middle;
    transition: background var(--t-base);
}
#ws-status-dot.ws-online     { background: var(--j-success); }
#ws-status-dot.ws-offline    { background: var(--j-danger);  }
#ws-status-dot.ws-connecting {
    background: var(--j-warning);
    animation: ws-blink 1s infinite;
}

@keyframes ws-blink {
    0%, 100% { opacity: 1;   }
    50%       { opacity: .3; }
}

/* ── Animations lignes tableau ── */
@keyframes rowNew {
    from { background: rgba(var(--j-success-rgb), .15); }
    to   { background: transparent; }
}
@keyframes rowFlash {
    0%,100% { background: transparent; }
    50%      { background: rgba(var(--j-warning-rgb), .2); }
}
@keyframes rowUpdated {
    0%,100% { background: transparent; }
    50%      { background: rgba(var(--j-primary-rgb), .15); }
}

tr.row-new     { animation: rowNew     3s ease forwards; }
tr.row-flash   { animation: rowFlash   1s ease forwards; }
tr.row-updated { animation: rowUpdated 2s ease forwards; }

/* ── Badge pulse ── */
@keyframes badgePulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
    70%  { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.badge-pulse { animation: badgePulse .8s ease; }

/* ── Solde wallet animation ── */
@keyframes balanceCredit {
    0%   { color: var(--j-text-1); }
    50%  { color: var(--j-success); transform: scale(1.05); }
    100% { color: var(--j-text-1); }
}
@keyframes balanceDebit {
    0%   { color: var(--j-text-1); }
    50%  { color: var(--j-danger); transform: scale(1.05); }
    100% { color: var(--j-text-1); }
}
.balance-credit { animation: balanceCredit 1.5s ease; }
.balance-debit  { animation: balanceDebit  1.5s ease; }

/* ── Counter flash (dashboard) ── */
@keyframes counterFlash {
    0%,100% { opacity: 1; }
    50%      { opacity: .4; color: var(--j-primary); }
}
.counter-flash { animation: counterFlash 1.5s ease; }

/* ── Notification unread ── */
.notification-unread { background: rgba(var(--j-primary-rgb), .05); }
.notification-unread .list-item-title { font-weight: 700; }






/* ================================================================
   AUTH — Composants spécifiques aux pages d'authentification
================================================================ */

/* En-tête de carte */
.auth-card-header            { margin-bottom: 1.75rem; }
.auth-card-header--centered  { text-align: center; }

/* Icône centrée (forgot password) */
.auth-card-icon {
  width: 64px; height: 64px;
  background: var(--j-gradient);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: var(--shadow-primary);
  font-size: 1.6rem;
  color: #fff;
}

/* Ligne label + lien "Oublié ?" */
.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
}
.form-label-row .form-label { margin-bottom: 0; }
.form-label-link {
  font-size: .8rem;
  color: var(--j-primary);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.form-label-link:hover { opacity: .75; }

/* Case à cocher souvenir */
.form-check-row   { display: flex; align-items: center; margin-bottom: 1.5rem; }
.form-check       { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.form-check-input {
  width: 16px; height: 16px;
  accent-color: var(--j-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.form-check-label { font-size: .875rem; color: var(--j-text-2); }

/* Bloc info QR code */
.info-block {
  display: flex;
  align-items: center;
  gap: .875rem;
  background: var(--j-primary-50);
  border: 1.5px dashed var(--j-primary-200);
  border-radius: var(--r-lg);
  padding: 1.125rem;
}
.info-block-icon {
  width: 44px; height: 44px;
  background: var(--j-gradient);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-primary);
  flex-shrink: 0;
  font-size: 1.3rem;
  color: #fff;
}
.info-block-title { font-weight: 700; color: var(--j-text-1); font-size: .9rem; margin-bottom: .15rem; }
.info-block-text  { font-size: .8rem; color: var(--j-text-2); line-height: 1.45; }

/* Hint email (forgot password) */
.form-hint {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  color: var(--j-text-3);
  margin-top: .35rem;
}

/* Compteur de renvoi */
.resend-timer {
  text-align: center;
  font-size: .8rem;
  color: var(--j-text-3);
  margin-top: .625rem;
}

/* Liens aide (back + support) */
.auth-help-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.375rem;
  flex-wrap: wrap;
}
.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  color: var(--j-text-2);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.auth-back-link:hover { color: var(--j-primary); }
.auth-help-sep        { color: var(--j-text-3); font-size: .875rem; }















/* -----------------------------------------------
   UTILITAIRES
----------------------------------------------- */
.d-none { display: none !important; }
.d-inline { display: inline !important; }

/* -----------------------------------------------
   SIDEBAR : bouton fermeture mobile
----------------------------------------------- */
.sidebar-close {
  margin-left: auto;
  padding: 0.25rem;
  color: rgba(255,255,255,0.6);
}
.sidebar-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* -----------------------------------------------
   BADGE NOTIFICATION (topbar)
----------------------------------------------- */
.topbar-notif-btn {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--j-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--r-full);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* -----------------------------------------------
   BOUTON DÉCONNEXION (sidebar)
----------------------------------------------- */
.logout-btn {
  padding: 0.25rem 0.5rem;
  margin-left: auto;
  color: rgba(255,255,255,0.6);
}
.logout-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* -----------------------------------------------
   SIDEBAR BADGE DANGER (pour KYC, difficultés)
----------------------------------------------- */
.sidebar-badge-danger {
  background: var(--j-danger) !important;
  color: #fff;
}



















/* Fil d’Ariane dans la topbar */
.top-bar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--j-text-2);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 0 1 auto; /* ne pas pousser les éléments de droite */
}

.top-bar-breadcrumb::-webkit-scrollbar {
  display: none;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--j-text-2);
  text-decoration: none;
  transition: color var(--t-fast);
}

.breadcrumb-link:hover {
  color: var(--j-primary);
}

.breadcrumb-sep {
  color: var(--j-text-3);
  font-size: 0.875rem;
  margin: 0 0.25rem;
}

/* Ajustement de la topbar pour accueillir le fil d’Ariane */
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
}

/* Sur mobile, si le burger est présent, on peut réduire l'espace */
@media (max-width: 768px) {
  .top-bar-breadcrumb {
    font-size: 0.75rem;
  }
}




/* .top-bar-breadcrumb {
  flex-shrink: 0;
  white-space: nowrap;
  overflow-x: auto;
  max-width: 40%;
}

.top-bar-title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} */



/* Fil d’Ariane */
.top-bar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--j-text-2);
}
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--j-text-2);
  text-decoration: none;
  transition: color var(--t-fast);
}
.breadcrumb-link:hover {
  color: var(--j-primary);
}
.breadcrumb-sep {
  color: var(--j-text-3);
  font-size: 0.875rem;
}

/* Badge de notification */
.topbar-notif-btn {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--j-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--r-full);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Pour le responsive, si besoin */
@media (max-width: 768px) {
  .top-bar-breadcrumb {
    font-size: 0.75rem;
    max-width: 30%;
  }
}




/* Forcer l'affichage correct des modals Bootstrap */
/* .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1050 !important;
    display: none;
}
.modal.show {
    display: block !important;
}
.modal-backdrop {
    z-index: 1040 !important;
}
.modal {
    overflow-y: auto !important;
} */