/* ============================================================
   PharmaSupply — theme.css
   Chargé APRÈS Bootstrap 5. Palette pharma teal/émeraude.
   ============================================================ */

:root {
  /* Palette */
  --ps-teal-800: #001a38;
  --ps-teal-700: #00234c;
  --ps-teal-600: #002f67;
  --ps-teal-500: #004aa3;
  --ps-emerald: #29abe2;

  --ps-bg: #f5f7fa;
  --ps-surface: #ffffff;
  --ps-surface-2: #f8fafa;
  --ps-border: #e4ebea;
  --ps-border-strong: #d3dedc;

  --ps-ink: #0f1c33;
  --ps-ink-2: #3f5652;
  --ps-muted: #7a8f8b;

  --ps-sidebar-bg: #001329;
  --ps-sidebar-ink: #c3cfe2;
  --ps-sidebar-ink-dim: #7f8fa8;
  --ps-sidebar-active: #002f67;

  /* Statuts */
  --st-brouillon: #64748b;
  --st-valide: #2563eb;
  --st-transit: #4f46e5;
  --st-recu: #16a34a;
  --st-annule: #dc2626;
  --st-quarantaine: #ea580c;
  --st-perime: #991b1b;

  /* Rayons / ombres / espacements */
  --ps-r-sm: 7px;
  --ps-r-md: 11px;
  --ps-r-lg: 16px;
  --ps-sh-sm: 0 1px 2px rgba(13,60,55,.06), 0 1px 3px rgba(13,60,55,.05);
  --ps-sh-md: 0 4px 14px rgba(13,60,55,.08), 0 2px 6px rgba(13,60,55,.05);
  --ps-sh-lg: 0 18px 48px rgba(13,60,55,.16);
  --ps-sidebar-w: 248px;
  --ps-sidebar-w-min: 74px;
  --ps-topbar-h: 64px;

  /* Surcharges Bootstrap */
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-body-bg: #f5f8f7;
  --bs-body-color: #0e2a27;
  --bs-border-color: #e4ebea;
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-link-color: #0f766e;
  --bs-link-hover-color: #0b5a53;
}

/* ---------- Base / typographie ---------- */
body {
  background: var(--ps-bg);
  color: var(--ps-ink);
  font-family: var(--bs-font-sans-serif);
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
}
h1, .h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.3px; }
h2, .h2 { font-size: 1.2rem;  font-weight: 700; }
h3, .h3 { font-size: 1.05rem; font-weight: 700; }
h4, .h4 { font-size: .95rem;  font-weight: 700; }
h5, .h5 { font-size: .9rem;   font-weight: 600; }
h6, .h6 { font-size: .8rem;   font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ps-muted); }

a { text-decoration: none; color: var(--ps-teal-700); }
a:hover { text-decoration: underline; color: var(--ps-teal-800); }

/* Focus visible (accessibilité) */
:focus-visible {
  outline: 2px solid var(--ps-teal-600) !important;
  outline-offset: 2px;
}

/* ---------- Barre de scroll auto-masquée ---------- */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
body.is-scrolling * { scrollbar-color: #b4c8c4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 9px; transition: background .35s ease; }
body.is-scrolling ::-webkit-scrollbar-thumb { background: #b4c8c4; }
::-webkit-scrollbar-thumb:hover { background: #93aca7; }

/* ---------- Layout : sidebar + contenu ---------- */
.ps-layout { display: flex; min-height: 100vh; }

.ps-sidebar {
  width: var(--ps-sidebar-w);
  flex: none;
  /* !important : Bootstrap force "background-color: transparent !important"
     sur .offcanvas-lg au-dessus du breakpoint lg. */
  background: var(--ps-sidebar-bg) !important;
  color: var(--ps-sidebar-ink);
  display: flex;
  flex-direction: column;
  transition: width .2s ease;
}
@media (min-width: 992px) {
  .ps-sidebar { position: sticky; top: 0; height: 100vh; z-index: 100; }
  body.sidebar-min .ps-sidebar { width: var(--ps-sidebar-w-min); }
  body.sidebar-min .ps-sidebar .ps-nav-label,
  body.sidebar-min .ps-sidebar .ps-brand-text,
  body.sidebar-min .ps-sidebar .ps-nav-section-title { display: none; }
  body.sidebar-min .ps-sidebar .ps-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sidebar-min .ps-sidebar .ps-brand { flex-direction: column; gap: 10px; }
}
/* Sur mobile la sidebar est un offcanvas (classes Bootstrap offcanvas-lg) */
.ps-sidebar.offcanvas-lg { background: var(--ps-sidebar-bg) !important; }

.ps-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 14px 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ps-brand-logo {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, var(--ps-teal-500), var(--ps-teal-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  box-shadow: 0 4px 12px rgba(15,118,110,.4);
}
.ps-brand-text { line-height: 1.1; flex: 1; min-width: 0; }
.ps-brand-text .nom { font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -.2px; }
.ps-brand-text .sous { font-size: 10.5px; color: var(--ps-sidebar-ink-dim); font-weight: 500; margin-top: 2px; }
.ps-burger {
  flex: none; width: 34px; height: 34px; border: none; border-radius: 9px;
  background: rgba(255,255,255,.06); color: var(--ps-sidebar-ink);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ps-burger:hover { background: rgba(255,255,255,.12); color: #fff; }

.ps-nav { flex: 1; overflow-y: auto; padding: 14px 12px 20px; }
.ps-nav-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--ps-sidebar-ink-dim); padding: 0 10px 7px; margin-top: 14px;
}
.ps-nav-section-title:first-child { margin-top: 0; }
.ps-nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; margin-bottom: 2px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--ps-sidebar-ink);
  transition: background .12s;
}
.ps-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.ps-nav-link i { font-size: 17px; flex: none; width: 20px; text-align: center; }
.ps-nav-link.active {
  background: var(--ps-sidebar-active); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(15,118,110,.4);
}
.ps-nav-badge {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 10px; background: var(--st-quarantaine); color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.ps-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Topbar ---------- */
.ps-topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 16px;
  height: var(--ps-topbar-h); padding: 0 24px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ps-border);
}
.ps-topbar .breadcrumb { margin: 0; font-size: 12.5px; }
.ps-topbar .breadcrumb-item + .breadcrumb-item::before { color: #c3d3d0; }
.ps-topbar .breadcrumb-item, .ps-topbar .breadcrumb-item a { color: var(--ps-muted); }
.ps-topbar .breadcrumb-item.active { color: var(--ps-ink); font-weight: 600; }
.ps-page-titre {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-topbar-btn {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--ps-border); border-radius: 11px;
  background: var(--ps-surface); color: var(--ps-ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  position: relative;
}
.ps-topbar-btn:hover { border-color: var(--ps-border-strong); }
.ps-notif-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--st-quarantaine); color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ps-surface);
}
.ps-user-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--ps-border); border-radius: 11px;
  background: var(--ps-surface); padding: 5px 11px 5px 6px;
}
.ps-user-btn:hover { border-color: var(--ps-border-strong); }
.ps-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(145deg, var(--ps-teal-600), var(--ps-teal-800));
  color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ps-notif-menu { width: 340px; padding: 0; overflow: hidden; }
.ps-notif-menu .items { max-height: 340px; overflow-y: auto; }
.ps-notif-item {
  display: flex; gap: 11px; padding: 11px 16px;
  border-bottom: 1px solid var(--ps-surface-2);
  font-size: 12.5px; color: var(--ps-ink);
}
.ps-notif-item:hover { background: var(--ps-surface-2); text-decoration: none; }
.ps-notif-item .titre { font-weight: 600; line-height: 1.3; }
.ps-notif-item .detail { font-size: 11.5px; color: var(--ps-muted); margin-top: 1px; }
.ps-notif-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ---------- Contenu ---------- */
.ps-content { flex: 1; padding: 24px 24px 40px; min-width: 0; }

/* ---------- Cartes ---------- */
.card {
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-r-lg);
  box-shadow: var(--ps-sh-md);
  background: var(--ps-surface);
}
.card-header {
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
  font-weight: 700; font-size: .85rem;
  padding: .8rem 1.1rem;
  border-radius: var(--ps-r-lg) var(--ps-r-lg) 0 0 !important;
}
.card-header i { color: var(--ps-teal-700); margin-right: 6px; }
.card-footer { background: var(--ps-surface-2); border-top: 1px solid var(--ps-border); }

/* Cartes KPI */
.ps-kpi { padding: 18px 18px 16px; transition: box-shadow .15s ease, transform .15s ease; }
.ps-kpi:hover { box-shadow: var(--ps-sh-lg); transform: translateY(-2px); }
.ps-kpi .valeur { font-size: 26px; font-weight: 700; letter-spacing: -.6px; line-height: 1; }
.ps-kpi .libelle { font-size: 12.5px; color: var(--ps-muted); margin-top: 5px; font-weight: 500; }
.ps-kpi-ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  margin-bottom: 12px;
}
.ps-kpi-ico.teal    { background: #e6f4f2; color: var(--ps-teal-700); }
.ps-kpi-ico.bleu    { background: #eaf1fe; color: var(--st-valide); }
.ps-kpi-ico.indigo  { background: #eef0fe; color: var(--st-transit); }
.ps-kpi-ico.vert    { background: #e7f8f0; color: var(--st-recu); }
.ps-kpi-ico.orange  { background: #fff2e8; color: var(--st-quarantaine); }
.ps-kpi-ico.rouge   { background: #fdecec; color: var(--st-annule); }
.ps-kpi-ico.gris    { background: #eef2f4; color: var(--st-brouillon); }

/* ---------- Tableaux ---------- */
.table { font-size: .82rem; --bs-table-hover-bg: #f2f9f8; }
.table > :not(caption) > * > * { padding: .65rem .85rem; }
.table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ps-muted); font-weight: 600; white-space: nowrap;
  background: var(--ps-surface-2);
  border-bottom: 1px solid var(--ps-border);
}
/* En-têtes collants */
.table-responsive { border-radius: 0 0 var(--ps-r-lg) var(--ps-r-lg); }
.table-responsive thead th { position: sticky; top: 0; z-index: 2; }
/* Select recherchable (listes longues, ex. produits) */
.ps-combo { position: relative; }
.ps-combo-native { display: none; }
.ps-combo-input { background-image: none; cursor: text; }
.ps-combo-panel {
  /* Position fixe et rattache au <body> : un conteneur a defilement
     (.table-responsive) rognait la liste des qu'elle depassait le bas du
     tableau. Les coordonnees sont calculees en JavaScript. */
  position: fixed; z-index: 1080;
  max-height: 300px; overflow-y: auto;
  background: var(--ps-surface); border: 1px solid var(--ps-border-strong);
  border-radius: var(--ps-r-md); box-shadow: var(--ps-sh-lg); padding: 5px;
}
.ps-combo-item {
  padding: 7px 10px; border-radius: 7px; font-size: .82rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-combo-item:hover, .ps-combo-item.actif { background: var(--ps-teal-600); color: #fff; }
.ps-combo-item.selectionne { font-weight: 600; }
.ps-combo-vide { padding: 12px; text-align: center; color: var(--ps-muted); font-size: .82rem; }

/* Zébrage subtil */
.table tbody tr:nth-child(even) { background: #fbfdfc; }
.table tbody td { border-color: var(--ps-surface-2); }
.table .table-danger  > * { background: #fbeaea !important; }
.table .table-warning > * { background: #fff8ec !important; }
.table .table-info    > * { background: #eef7fb !important; }
.table .table-light   > * { background: var(--ps-surface-2) !important; }

/* Meilleur prix (comparatif des offres) */
.meilleur-prix {
  background: #ecfaf5 !important;
  color: #127a5f; font-weight: 700;
  position: relative;
}
.meilleur-prix::before {
  content: "\f586"; /* bi-star-fill */
  font-family: "bootstrap-icons";
  font-size: 10px; color: var(--ps-emerald);
  margin-right: 6px; vertical-align: 1px;
}

/* État vide */
.ps-vide { text-align: center; padding: 40px 20px; color: var(--ps-muted); }
.ps-vide i { font-size: 34px; color: #c3d3d0; display: block; margin-bottom: 10px; }
.ps-vide .msg { font-size: 13px; margin-bottom: 14px; }

/* ---------- Badges de statut ---------- */
.badge-statut {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
}
.badge-st-gris    { background: #eef2f4; color: var(--st-brouillon); }
.badge-st-bleu    { background: #eaf1fe; color: var(--st-valide); }
.badge-st-indigo  { background: #eef0fe; color: var(--st-transit); }
.badge-st-vert    { background: #e7f8f0; color: var(--st-recu); }
.badge-st-rouge   { background: #fdecec; color: var(--st-annule); }
.badge-st-orange  { background: #fff2e8; color: var(--st-quarantaine); }
.badge-st-perime  { background: #fbeaea; color: var(--st-perime); }
.badge-st-froid   { background: #e6f4f2; color: var(--ps-teal-700); }

/* ---------- Boutons ---------- */
.btn { border-radius: 10px; font-weight: 600; font-size: .82rem; }
.btn-primary {
  background: var(--ps-teal-700); border-color: var(--ps-teal-700);
  box-shadow: 0 2px 8px rgba(15,118,110,.3);
}
.btn-primary:hover, .btn-primary:focus { background: var(--ps-teal-800); border-color: var(--ps-teal-800); }
.btn-success { box-shadow: 0 2px 8px rgba(22,163,74,.25); }
.btn-outline-primary { color: var(--ps-teal-700); border-color: var(--ps-border-strong); }
.btn-outline-primary:hover { background: var(--ps-teal-700); border-color: var(--ps-teal-700); }
.btn-outline-secondary { color: var(--ps-ink-2); border-color: var(--ps-border-strong); }

/* ---------- Formulaires ---------- */
.form-control, .form-select {
  border-radius: 9px; border-color: var(--ps-border-strong);
  font-size: .85rem; color: var(--ps-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ps-teal-600);
  box-shadow: 0 0 0 .2rem rgba(13,148,136,.12);
}
.form-label {
  font-size: 11px; font-weight: 600; color: var(--ps-muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: .35rem;
}
.form-text { font-size: 11.5px; }
.is-invalid { border-color: var(--st-annule) !important; }
.invalid-feedback, .text-danger.small { font-size: 11.5px; }

/* Sections de formulaire */
.ps-form-section {
  border: 1px solid var(--ps-border); border-radius: var(--ps-r-md);
  padding: 16px; margin-bottom: 14px; background: var(--ps-surface);
}
.ps-form-section > h6 { margin-bottom: 12px; }
.ps-form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--ps-border);
}

/* Ligne de réception (formulaire dense) */
.ps-ligne-rec {
  border: 1px solid var(--ps-border); border-radius: var(--ps-r-md);
  padding: 14px 16px; margin-bottom: 12px; background: var(--ps-surface);
}
.ps-ligne-rec.froid { border-color: #bfdbfe; background: #f6fafd; }
.ps-ligne-rec .entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ps-ligne-rec .art-ico {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  background: #e6f4f2; color: var(--ps-teal-700);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ps-ligne-rec .form-label { font-size: 10.5px; margin-bottom: .25rem; text-transform: none; letter-spacing: 0; }

/* ---------- Modale de confirmation ---------- */
.modal-content { border: none; border-radius: var(--ps-r-lg); box-shadow: var(--ps-sh-lg); }
.modal-header { border-bottom: none; padding-bottom: 4px; }
.modal-title { font-size: 16px; font-weight: 700; }
.ps-modal-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  margin-right: 12px;
}
.ps-modal-ico.vert   { background: #e7f8f0; color: var(--st-recu); }
.ps-modal-ico.rouge  { background: #fdecec; color: var(--st-annule); }
.ps-modal-ico.orange { background: #fff2e8; color: var(--st-quarantaine); }
.ps-modal-recap {
  background: var(--ps-surface-2); border: 1px solid var(--ps-border);
  border-radius: var(--ps-r-md); padding: 12px 14px; font-size: 12.5px;
}
.modal-footer { border-top: none; }

/* ---------- Toasts ---------- */
.toast { border: none; border-radius: 12px; box-shadow: var(--ps-sh-md); font-size: 13px; }
.toast.toast-success { background: #ecfaf5; color: #166a54; border: 1px solid #bfe9d9; }
.toast.toast-error   { background: #fef2f2; color: #9c2626; border: 1px solid #f6cccc; }
.toast.toast-warning { background: #fff7ed; color: #9a5410; border: 1px solid #f7d9b0; }
.toast.toast-info    { background: #eef7fb; color: #175d7a; border: 1px solid #c8e4f0; }

/* ---------- Page de connexion (deux panneaux) ---------- */
body.page-login { min-height: 100vh; background: var(--ps-bg); }
.ps-login-split { display: flex; min-height: 100vh; }

/* --- Panneau gauche : présentation animée --- */
.ps-login-intro {
  flex: 1.15;
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(41,171,226,.26), transparent 60%),
    radial-gradient(700px 600px at 110% 110%, rgba(0,74,163,.22), transparent 55%),
    linear-gradient(150deg, #001329 0%, #00234c 55%, #002f67 100%);
  color: #e6eefa;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 64px;
}
.ps-login-intro .marque {
  display: flex; align-items: center; gap: 14px; margin-bottom: 34px;
  animation: ps-monte .7s ease both;
}
.ps-login-intro .marque .logo {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  background: linear-gradient(145deg, var(--ps-teal-500), var(--ps-teal-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.ps-login-intro h2 {
  font-size: 30px; font-weight: 700; letter-spacing: -.5px; color: #fff;
  line-height: 1.25; max-width: 480px; margin-bottom: 14px;
  animation: ps-monte .7s .12s ease both;
}
.ps-login-intro .accroche {
  font-size: 14px; color: #b9cbe3; max-width: 440px; line-height: 1.65;
  margin-bottom: 34px;
  animation: ps-monte .7s .22s ease both;
}
.ps-login-intro .atouts { display: flex; flex-direction: column; gap: 14px; }
.ps-login-intro .atout {
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: #d9e5f3;
  animation: ps-monte .6s ease both;
}
.ps-login-intro .atout:nth-child(1) { animation-delay: .34s; }
.ps-login-intro .atout:nth-child(2) { animation-delay: .46s; }
.ps-login-intro .atout:nth-child(3) { animation-delay: .58s; }
.ps-login-intro .atout .ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--ps-teal-500); font-size: 15px;
}
.ps-login-intro .signature {
  position: absolute; bottom: 26px; left: 64px; right: 64px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: #8ea8c6;
  animation: ps-fondu 1s .8s ease both;
}
.ps-login-intro .signature .groupe { display: flex; align-items: center; gap: 7px; font-weight: 600; letter-spacing: .4px; color: #cddff2; }

/* Formes animées en arrière-plan */
.ps-login-intro .bulle {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.10);
  animation: ps-flotte 9s ease-in-out infinite;
  pointer-events: none;
}
.ps-login-intro .bulle.b1 { width: 260px; height: 260px; top: -70px; right: -60px; animation-delay: 0s; }
.ps-login-intro .bulle.b2 { width: 150px; height: 150px; bottom: 90px; right: 100px; animation-delay: -3s; }
.ps-login-intro .bulle.b3 { width: 90px; height: 90px; top: 28%; right: 22%; animation-delay: -6s; }
.ps-login-intro .picto-flottant {
  position: absolute; color: rgba(255,255,255,.13); pointer-events: none;
  animation: ps-flotte 11s ease-in-out infinite;
}
.ps-login-intro .picto-flottant.p1 { font-size: 46px; top: 16%; right: 12%; animation-delay: -2s; }
.ps-login-intro .picto-flottant.p2 { font-size: 30px; bottom: 24%; right: 30%; animation-delay: -5s; }
.ps-login-intro .picto-flottant.p3 { font-size: 36px; top: 52%; right: 8%;  animation-delay: -8s; }

@keyframes ps-flotte {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(4deg); }
}
@keyframes ps-monte {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ps-fondu { from { opacity: 0; } to { opacity: 1; } }

/* --- Panneau droit : formulaire --- */
.ps-login-cote {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(600px 400px at 85% -10%, rgba(20,184,166,.10), transparent 60%),
    radial-gradient(500px 380px at 10% 110%, rgba(16,185,129,.08), transparent 55%),
    var(--ps-bg);
  padding: 40px 24px;
}
.ps-login-card {
  width: 420px; max-width: 100%;
  background: var(--ps-surface); border-radius: 20px;
  box-shadow: var(--ps-sh-lg); padding: 40px 38px 30px;
  animation: ps-monte .6s .15s ease both;
}
.ps-login-logo {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
  background: linear-gradient(145deg, var(--ps-teal-500), var(--ps-teal-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px;
  box-shadow: 0 8px 22px rgba(15,118,110,.35);
}

/* Champs de connexion : icône superposée, champ d'une seule pièce */
.ps-champ { position: relative; }
.ps-champ > .bi {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--ps-muted); font-size: 15px; pointer-events: none;
  transition: color .15s ease;
}
.ps-champ:focus-within > .bi { color: var(--ps-teal-600); }
.ps-champ .form-control {
  height: 48px; padding-left: 44px; padding-right: 44px;
  border-radius: 12px; font-size: 14px;
  background: var(--ps-surface-2);
  border: 1.5px solid var(--ps-border-strong);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ps-champ .form-control:focus {
  background: #fff; border-color: var(--ps-teal-600);
  box-shadow: 0 0 0 4px rgba(15,118,110,.12);
}
/* Auto-remplissage navigateur : garder le champ blanc et lisible */
.ps-champ .form-control:-webkit-autofill,
.ps-champ .form-control:-webkit-autofill:hover,
.ps-champ .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--ps-ink);
  caret-color: var(--ps-ink);
  transition: background-color 999999s ease-in-out 0s;
}
/* Bouton œil (afficher / masquer le mot de passe) */
.ps-oeil {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; border-radius: 9px;
  background: transparent; color: var(--ps-muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ps-oeil:hover { background: rgba(15,118,110,.08); color: var(--ps-teal-700); }
.ps-login-card .btn-primary {
  height: 48px; border-radius: 12px; font-weight: 600; font-size: 14px;
  box-shadow: 0 6px 16px rgba(15,118,110,.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ps-login-card .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(15,118,110,.36);
}

/* Mobile : le panneau de présentation disparaît, le formulaire prend tout */
@media (max-width: 991px) {
  .ps-login-intro { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-login-intro .bulle, .ps-login-intro .picto-flottant { animation: none; }
}

/* ---------- Divers ---------- */
.text-tabular { font-variant-numeric: tabular-nums; }
.ps-filtres .btn { border-radius: 9px; font-size: 12.5px; }
.dropdown-menu {
  border: 1px solid var(--ps-border); border-radius: var(--ps-r-md);
  box-shadow: var(--ps-sh-lg); font-size: 13px;
}
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; }
.dropdown-menu { padding: 6px; }
dt { font-weight: 600; color: var(--ps-muted); font-size: .78rem; }
dd { font-size: .85rem; }

/* ---------- Fidélité au design (tableaux + barre de recherche) ---------- */
/* Tableaux : espacement aéré identique au design (12px / 14px) */
.table > :not(caption) > * > * { padding: .75rem .9rem; }
.table thead th { padding-top: .72rem; padding-bottom: .72rem; }
.table tbody tr { transition: background .12s ease; }

/* Barre de recherche : pilule unifiée, fond blanc, bordure subtile */
.input-group { border-radius: 10px; overflow: hidden; box-shadow: var(--ps-sh-sm); }
.input-group > .input-group-text,
.input-group > .form-control {
  background: var(--ps-surface);
  border-color: var(--ps-border);
}
.input-group > .input-group-text { color: var(--ps-muted); padding-right: 2px; }
.input-group > .form-control::placeholder { color: var(--ps-muted); opacity: 1; }
.input-group:focus-within { border-color: var(--ps-teal-600); box-shadow: 0 0 0 .2rem rgba(13,148,136,.12); }
.input-group:focus-within > .form-control,
.input-group:focus-within > .input-group-text { border-color: var(--ps-teal-600); }
.input-group > .form-control:focus { box-shadow: none; }

/* Fond de page cohérent avec le design sur toutes les pages */
body, .ps-main, .ps-content { background: var(--ps-bg); }

/* Coins arrondis : le tableau est clippé aux angles arrondis de la carte */
.card { overflow: hidden; }
.card > .table-responsive:first-child,
.card > .table:first-child { border-radius: var(--ps-r-lg) var(--ps-r-lg) 0 0; }

/* Zébrage visible (via le mécanisme natif Bootstrap, sinon masqué par --bs-table-bg) */
.table > tbody > tr > * { --bs-table-bg-type: var(--ps-surface); }
.table > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: #eef6f4; }

/* Zone sans droit d'ecriture : les commandes s'estompent sans disparaitre,
   pour que la page reste lisible. */
.ps-lecture-seule :disabled { opacity: .5; cursor: not-allowed; }
.ps-lecture-seule button:disabled { filter: grayscale(.4); }

/* ---------- Bouton flottant « Nouveau dossier » ----------
   Le geste le plus frequent du tableau de bord : accessible sans remonter
   au menu, et sans defiler jusqu'a un tableau. */
.ps-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1070;
  height: 50px; padding: 0 20px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ps-teal-700); color: #fff;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 24px rgba(14,42,39,.28);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.ps-fab:hover, .ps-fab:focus-visible {
  background: var(--ps-teal-800); color: #fff;
  box-shadow: 0 12px 30px rgba(14,42,39,.34); transform: translateY(-1px);
}
.ps-fab i { font-size: 18px; }
/* Sur telephone, l'etiquette mangerait la moitie de l'ecran : l'icone seule
   suffit, le libelle reste lisible par les lecteurs d'ecran. */
@media (max-width: 575.98px) {
  .ps-fab { right: 16px; bottom: 16px; padding: 0; width: 52px; height: 52px;
            justify-content: center; }
  .ps-fab .ps-fab-label { position: absolute; width: 1px; height: 1px;
                          overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Assistant analytique ---------- */
.ps-chat { position: fixed; right: 22px; bottom: 22px; z-index: 1080; }
.ps-chat-launcher {
  height: 46px; padding: 0 16px; border: 0; border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  background: var(--ps-teal-700); color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(14,42,39,.22);
}
.ps-chat-launcher:hover { background: var(--ps-teal-800); }
.ps-chat-launcher i { font-size: 17px; }
.ps-chat-panel {
  position: absolute; right: 0; bottom: 58px; width: 410px;
  height: min(650px, calc(100vh - 110px)); overflow: hidden;
  border: 1px solid var(--ps-border); border-radius: 8px;
  background: var(--ps-surface); box-shadow: 0 20px 54px rgba(14,42,39,.22);
  display: grid; grid-template-rows: auto 1fr auto auto;
}
.ps-chat-panel[hidden] { display: none; }
.ps-chat-header {
  min-height: 64px; padding: 11px 12px; display: flex; align-items: center; gap: 10px;
  color: #fff; background: #123f3a;
}
.ps-chat-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: var(--ps-teal-600); font-size: 16px;
}
.ps-chat-header > div:nth-child(2) { min-width: 0; flex: 1; }
.ps-chat-header strong { display: block; font-size: 13px; }
.ps-chat-header span { display: block; color: #b9d3ce; font-size: 10.5px; }
.ps-chat-icon-btn {
  width: 34px; height: 34px; border: 0; border-radius: 7px;
  display: grid; place-items: center; background: transparent; color: #d9e8e5;
}
.ps-chat-icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.ps-chat-messages { padding: 16px; overflow-y: auto; background: #f7faf9; }
.ps-chat-message { display: flex; margin-bottom: 12px; }
.ps-chat-message.user { justify-content: flex-end; }
.ps-chat-bubble {
  max-width: 88%; padding: 10px 12px; border: 1px solid var(--ps-border);
  border-radius: 8px; background: #fff; color: var(--ps-ink-2);
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap;
}
.ps-chat-message.user .ps-chat-bubble {
  border-color: var(--ps-teal-700); background: var(--ps-teal-700); color: #fff;
}
.ps-chat-message.loading .ps-chat-bubble { display: flex; align-items: center; gap: 7px; color: var(--ps-muted); }
.ps-chat-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.ps-chat-kpi {
  min-width: 0; padding: 9px; border: 1px solid var(--ps-border);
  border-left: 3px solid var(--ps-teal-600); border-radius: 6px; background: #fff;
}
.ps-chat-kpi.orange { border-left-color: #f59e0b; }
.ps-chat-kpi.red { border-left-color: #dc2626; }
.ps-chat-kpi.blue, .ps-chat-kpi.indigo { border-left-color: #2563eb; }
.ps-chat-kpi strong { display: block; font-size: 17px; color: var(--ps-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ps-chat-kpi span { display: block; margin-top: 2px; font-size: 10px; color: var(--ps-muted); line-height: 1.25; }
.ps-chat-chart { margin-top: 9px; padding: 10px; border: 1px solid var(--ps-border); border-radius: 6px; background: #fff; }
.ps-chat-chart-title { margin-bottom: 10px; font-size: 11px; font-weight: 700; color: var(--ps-ink); }
.ps-chat-bars { display: flex; flex-direction: column; gap: 7px; }
.ps-chat-bar-row {
  display: grid; grid-template-columns: minmax(70px, 105px) 1fr auto;
  align-items: center; gap: 7px; font-size: 9.5px; color: var(--ps-muted);
}
.ps-chat-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-chat-bar-track { height: 8px; overflow: hidden; border-radius: 3px; background: #e9f0ef; }
.ps-chat-bar-fill { min-width: 2px; height: 100%; background: var(--ps-teal-600); border-radius: 3px; }
.ps-chat-chart.doughnut .ps-chat-bar-fill { background: #2563eb; }
.ps-chat-bar-value { color: var(--ps-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-chat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ps-chat-links a { font-size: 11px; font-weight: 600; }
.ps-chat-links a::after { content: " →"; }
.ps-chat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ps-chat-actions button {
  padding: 6px 9px; border: 1px solid var(--ps-teal-700); border-radius: 6px;
  background: var(--ps-teal-700); color: #fff; font-size: 10.5px; font-weight: 600;
}
.ps-chat-actions button:hover { background: var(--ps-teal-800); }
.ps-chat-feedback {
  display: flex; align-items: center; gap: 5px; margin-top: 9px;
  padding-top: 7px; border-top: 1px solid var(--ps-border); color: var(--ps-muted);
}
.ps-chat-feedback span { margin-right: auto; font-size: 9.5px; }
.ps-chat-feedback button {
  width: 26px; height: 26px; border: 0; border-radius: 5px;
  display: grid; place-items: center; background: transparent; color: var(--ps-muted);
}
.ps-chat-feedback button:hover, .ps-chat-feedback button.selected {
  background: #e6f4f1; color: var(--ps-teal-700);
}
.ps-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ps-chat-suggestions button {
  padding: 6px 8px; border: 1px solid #bcd8d3; border-radius: 6px;
  background: #fff; color: var(--ps-teal-700); font-size: 10.5px; text-align: left;
}
.ps-chat-suggestions button:hover { background: #eaf5f3; border-color: var(--ps-teal-600); }
.ps-chat-form {
  margin: 10px 12px 6px; padding: 5px 5px 5px 11px;
  border: 1px solid var(--ps-border-strong); border-radius: 8px;
  display: flex; align-items: flex-end; gap: 7px; background: #fff;
}
.ps-chat-form:focus-within { border-color: var(--ps-teal-600); box-shadow: 0 0 0 3px rgba(13,148,136,.1); }
.ps-chat-form textarea {
  flex: 1; max-height: 86px; padding: 7px 0; border: 0; outline: 0; resize: none;
  color: var(--ps-ink); background: transparent; font: inherit; font-size: 12px; line-height: 1.4;
}
.ps-chat-form button {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 7px;
  display: grid; place-items: center; background: var(--ps-teal-700); color: #fff;
}
.ps-chat-form button:disabled { opacity: .55; }
.ps-chat-note { padding: 0 12px 9px; color: var(--ps-muted); font-size: 9.5px; text-align: center; }
@media (max-width: 575px) {
  .ps-chat { right: 12px; bottom: 12px; }
  .ps-chat-launcher span { display: none; }
  .ps-chat-launcher { width: 46px; padding: 0; justify-content: center; }
  .ps-chat-panel { position: fixed; inset: 8px; width: auto; height: auto; max-height: none; }
}

/* En-tête de colonne triable.
   La flèche seule ne disait pas que l'en-tête était cliquable : elle était
   trop pâle et trop petite. Le survol l'affirme, et le curseur le confirme. */
.ps-entete-tri { cursor: pointer; }
.ps-entete-tri:hover { color: var(--ps-teal-500) !important; }
.ps-entete-tri:hover .bi { opacity: 1 !important; color: var(--ps-teal-500); }

/* Liste des affaires — reprise de la maquette.
   La pastille d'initiales donne un repère visuel dans une liste où les
   mêmes clients reviennent sans cesse. Les segments montrent combien
   d'étapes restent, là où une barre continue ne donnait qu'un pourcentage. */
.ps-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--ps-teal-50, #E6F4F1); color: var(--ps-teal-500, #0F766E);
}
.ps-segment {
  flex: 1 1 0; height: 5px; border-radius: 3px;
  background: var(--ps-border, #D5DBE1);
}
.ps-segment.fait { background: var(--ps-teal-500, #0F766E); }