/* =========================================
   Panajou Labo — Glass UI (Light-first)
   Global CSS (Bootstrap 5 friendly)
   ========================================= */

/* ---------- Variables ---------- */
:root{
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(20,20,20,.08);
  --glass-shadow: 0 18px 50px rgba(0,0,0,.10);
  --glass-shadow-soft: 0 10px 26px rgba(0,0,0,.08);
  --glass-radius: 20px;

  --bg-top: #f7f8fb;
  --bg-bottom: #eef2f7;

  --text: #101828;
  --muted: rgba(16,24,40,.60);

  --focus: rgba(13,110,253,.22);

  --tile-bg: rgba(13,110,253,.06);
  --tile-radius: 18px;

  --lift-y: -3px;

  /* accent magasin (injecté depuis header.php) */
  --panajou: #0d6efd;
  --panajou-text: #ffffff;

  /* iOS safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ---------- Base ---------- */
*{ -webkit-tap-highlight-color: transparent; }
html, body{ height: 100%; }

body{
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tap targets mobiles (Apple HIG) */
@media (max-width: 991.98px){
  .btn, .navbar-toggler, .nav-link, .dropdown-item,
  .offcanvas a.list-group-item, .offcanvas .accordion-button{
    min-height: 44px;
  }
}

/* ---------- Background (stable iOS) ---------- */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(13,110,253,.12), transparent 55%),
    radial-gradient(900px 600px at 90% 20%, rgba(25,135,84,.10), transparent 55%),
    radial-gradient(800px 520px at 35% 95%, rgba(255,193,7,.12), transparent 55%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  transform: translateZ(0);
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='.35'/>\
</svg>");
  background-size: 160px 160px;
  transform: translateZ(0);
}

/* Wrapper optionnel */
.app-bg{ min-height: 100vh; overflow-x: hidden; }

/* Conteneur */
.app-container{ max-width: 1120px; }

/* Titres */
.page-title{ font-weight: 850; letter-spacing: .2px; }
.page-subtitle{ color: var(--muted); }

/* ---------- Glass cards ---------- */
.glass-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-panel{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(20,20,20,.06);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Hover lift */
.lift{
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
}
.lift:hover{
  transform: translateY(var(--lift-y));
  box-shadow: var(--glass-shadow);
  border-color: rgba(20,20,20,.12);
}

/* ---------- Inputs ---------- */
.input-soft,
.form-control.input-soft,
.form-select.input-soft{
  border-radius: 16px;
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.78);
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(13,110,253,.30);
  box-shadow: 0 0 0 .25rem var(--focus);
}

/* ---------- Buttons ---------- */
.btn-magasin{
  background: var(--panajou);
  color: var(--panajou-text);
  border: none;
  border-radius: 16px;
}
.btn-magasin:hover{
  filter: brightness(.98);
  color: var(--panajou-text);
}

.btn-outline-magasin{
  border-radius: 16px;
  border: 1px solid rgba(13,110,253,.22);
  color: var(--panajou);
  background: rgba(255,255,255,.55);
}
.btn-outline-magasin:hover{
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.34);
  color: var(--panajou);
}

/* Badge soft */
.badge-soft{
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(20,20,20,.08);
  color: rgba(16,24,40,.78);
  border-radius: 999px;
  padding: .35rem .6rem;
}

/* ---------- Tables ---------- */
.table{ border-color: rgba(20,20,20,.08); }
.table thead th{
  color: rgba(16,24,40,.70);
  font-weight: 750;
}

/* ---------- Modals ---------- */
.modal-backdrop{ z-index: 1990 !important; }
.modal{ z-index: 2000 !important; }

.modal-content.modal-glass{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,20,20,.10);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- Navbar / Offcanvas layering ---------- */
.navbar{ z-index: 1070; }
.offcanvas, .offcanvas-backdrop{ z-index: 1080; }
.dropdown-menu{ z-index: 1075; }

/* =========================================
   MENU / NAVBAR (Bootstrap friendly)
   - safe-area iOS
   - anti-stretch logo + icon toggle
   ========================================= */

/* Navbar safe-area + spacing */
.navbar{
  padding-top: calc(.45rem + var(--safe-top)) !important;
  padding-left: max(.75rem, var(--safe-left)) !important;
  padding-right: max(.75rem, var(--safe-right)) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Brand anti-stretch (IMG) */
.navbar .navbar-brand{
  display: flex !important;
  align-items: center !important;
  gap: .5rem;
  min-width: 0;
}

.navbar .brand-lock{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0;
  flex: 0 0 auto;
}

/* ⚠️ IMPORTANT: pas de display:block!important sinon tu casses .d-none */
.navbar .brand-img{
  height: 34px !important;
  width: auto !important;
  max-width: min(220px, 55vw) !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* sécurité: si l'image a d-none, elle doit rester cachée */
.navbar .brand-img.d-none{
  display: none !important;
}

@media (max-width: 360px){
  .navbar .brand-img{
    height: 30px !important;
    max-width: 48vw !important;
  }
}
/* Offcanvas safe-area */
.offcanvas{
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}
.offcanvas-header{
  padding-top: calc(1rem + var(--safe-top)) !important;
}
.offcanvas-body{
  padding-bottom: calc(1rem + var(--safe-bottom));
}

/* Icônes bootstrap dans navbar/offcanvas (stables iOS) */
.navbar .bi,
.offcanvas .bi{
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
  width: 1.35rem;
  text-align: center;
  vertical-align: -0.10em;
}

/* Boutons ronds thème (anti stretch iOS) */
#themeToggleBtn,
#themeToggleBtnOff,
#themeToggleBtnMobileFixed{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  flex: 0 0 36px !important;
}

#themeToggleBtn i,
#themeToggleBtnOff i,
#themeToggleBtnMobileFixed i{
  display: inline-block !important;
  flex: none !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  font-size: 1.15rem !important;
  transform: translateZ(0);
}

/* iOS PWA hard safety */
@supports (-webkit-touch-callout: none){
  .navbar .btn{ align-self: center !important; }
}
/* Offcanvas sizing (évite plein écran iPhone) */
.offcanvas.offcanvas-end{
  width: 85vw !important;
  max-width: 420px !important;
}

/* Backdrop un peu léger */
.offcanvas-backdrop.show{
  opacity: .25 !important;
}

/* ✅ Dropdown au survol (desktop only) */
@media (min-width: 992px){
  .navbar .dropdown-hover:hover > .dropdown-menu{
    display: block;
    margin-top: 0;
  }
  .navbar .dropdown-hover:hover > .dropdown-toggle{
    /* optionnel : style “actif” */
    opacity: .95;
  }
}

/* =========================================
   OFFCANVAS MOBILE — Glass UI (menu.php)
   Rend le menu mobile plus "Apple / glass"
   ========================================= */

.offcanvas.bg-magasin{
  /* fond magasin avec un voile glass */
  background: color-mix(in srgb, var(--panajou) 92%, #000) !important;
  color: #fff !important;
  border-left: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Header offcanvas */
.offcanvas.bg-magasin .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.offcanvas.bg-magasin .offcanvas-title{
  font-weight: 750;
  letter-spacing: .2px;
}

/* Labels "Navigation / Administratif" */
.offcanvas.bg-magasin .text-white-50,
.offcanvas.bg-magasin .small.text-white-50{
  color: rgba(255,255,255,.70) !important;
  letter-spacing: .2px;
}

/* LISTE Navigation (list-group) */
.offcanvas .off-list{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* Items */
.offcanvas .off-list .off-item{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
  padding: .85rem .9rem !important;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* séparateurs fins */
.offcanvas .off-list .off-item + .off-item{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* hover / active */
.offcanvas .off-list .off-item:hover{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.offcanvas .off-list .off-item.active{
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

/* Icônes dans offcanvas : stables */
.offcanvas .off-list .off-item .bi{
  width: 1.35rem !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

/* ACCORDION "Administratif" */
.offcanvas .off-acc .accordion-item{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: .75rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* Bouton accordion */
.offcanvas .off-acc .accordion-button{
  background: transparent !important;
  color: rgba(255,255,255,.95) !important;
  padding: .9rem .9rem !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 650;
}
.offcanvas .off-acc .accordion-button::after{
  filter: brightness(0) invert(1);
  opacity: .9;
}
.offcanvas .off-acc .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.10) !important;
}

/* Contenu accordion */
.offcanvas .off-acc .accordion-body{
  padding: .5rem .6rem .7rem !important;
  background: rgba(0,0,0,.08);
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Sous-liens dans accordion */
.offcanvas .off-acc .accordion-body .off-list{
  border-radius: 14px;
}
.offcanvas .off-acc .accordion-body .off-item{
  padding: .8rem .85rem !important;
}

/* Footer (Changer + thème) */
.offcanvas .border-top.border-white-25{
  border-color: rgba(255,255,255,.18) !important;
}

/* Close button plus clean */
.offcanvas .btn-close.btn-close-white{
  opacity: .9;
}
.offcanvas .btn-close.btn-close-white:hover{
  opacity: 1;
}

/* ---------- Dashboard icons (responsive fix) ---------- */
.icon-tile{
  width: clamp(48px, 12vw, 64px);
  height: clamp(48px, 12vw, 64px);
  border-radius: clamp(14px, 3.5vw, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tile-bg);
}
.icon-tile > i{
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  line-height: 1;
}

.dashboard-icon{
  width: clamp(48px, 12vw, 64px) !important;
  height: clamp(48px, 12vw, 64px) !important;
  border-radius: clamp(14px, 3.5vw, 16px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: clamp(1.7rem, 6vw, 3rem) !important;
}

.dashboard-card{
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dashboard-card h5{
  font-size: clamp(.95rem, 3.8vw, 1.1rem);
  line-height: 1.15;
  margin-top: .65rem !important;
}

@media (max-width: 575.98px){
  .dashboard-grid .card{
    padding: 1.05rem !important;
    min-height: 128px;
  }
}

/* ---------- Animations ---------- */
.page-fadein{ animation: pageEnter .45s ease both; }
@keyframes pageEnter{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform:none; }
}

/* Liens */
a{ text-decoration: none; }
a:hover{ text-decoration: none; }

/* ---------- Dark mode (Glass UI) ---------- */
html[data-bs-theme="dark"]{
  --glass-bg: rgba(17, 25, 40, .55);
  --glass-border: rgba(255,255,255,.12);
  --glass-shadow: 0 18px 50px rgba(0,0,0,.55);
  --glass-shadow-soft: 0 10px 26px rgba(0,0,0,.45);

  --bg-top: #0b1220;
  --bg-bottom: #070b13;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --focus: rgba(13,110,253,.35);
  --tile-bg: rgba(13,110,253,.18);
}

html[data-bs-theme="dark"] .input-soft,
html[data-bs-theme="dark"] .form-control.input-soft,
html[data-bs-theme="dark"] .form-select.input-soft{
  background: rgba(15, 23, 42, .55);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

html[data-bs-theme="dark"] .badge-soft{
  background: rgba(15, 23, 42, .45);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
}

/* ✅ Login — logo jamais géant */
.login-logo-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .5rem 0 1rem;
}
.login-logo{
  width: clamp(140px, 55vw, 260px) !important;
  max-width: 260px !important;
  height: auto !important;
  max-height: clamp(120px, 22vh, 220px) !important;
  object-fit: contain !important;
}

/* creer_pochette tweaks */
.btn-clear-client{
  z-index: 3;
  height: 38px;
  padding: .375rem .75rem;
  line-height: 1;
  border-radius: 12px;
}

#client_result .list-group-item{
  border-radius: 14px;
  margin-bottom: .35rem;
  border: 1px solid rgba(20,20,20,.08);
  background: rgba(255,255,255,.72);
}
html[data-bs-theme="dark"] #client_result .list-group-item{
  background: rgba(15, 23, 42, .45);
  border-color: rgba(255,255,255,.10);
}

.card-pack-dev .card-header{
  background: var(--panajou);
  color: var(--panajou-text);
}

.input-group-text{
  background: rgba(255,255,255,.65);
  border-color: rgba(20,20,20,.10);
}
html[data-bs-theme="dark"] .input-group-text{
  background: rgba(15,23,42,.50);
  border-color: rgba(255,255,255,.10);
}

#total-global{
  font-weight: 850;
  letter-spacing: .2px;
}

/* Logos génériques */
.brand-logo{
  max-width: min(240px, 70vw);
  height: auto;
  object-fit: contain;
}

/* Tables "clean" optionnelles */
.table-clean{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.35);
  --bs-table-hover-bg: rgba(13,110,253,.06);
  border-color: rgba(20,20,20,.08);
}
.table-clean thead th{
  font-weight: 750;
  color: rgba(16,24,40,.70);
  border-bottom: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.35);
}
html[data-bs-theme="dark"] .table-clean thead th{
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.10);
}

/* =========================================
   liste_pochettes.php — Glass styles
   ========================================= */

.pan-table-wrap{ border-radius: 18px; overflow: visible; }
.pan-table-wrap .dropdown-menu{ z-index: 1080; }

.mono{ font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prewrap{ white-space: pre-wrap; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Chips statut */
.pan-chip{
  font-weight: 800;
  font-size: .92rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  letter-spacing: .15px;
}
.pan-chip .dot{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block; }

.chip-success{background:rgba(25,135,84,.12);color:#198754}.dot-success{background:#198754}
.chip-warning{background:rgba(255,193,7,.16);color:#b78100}.dot-warning{background:#ffc107}
.chip-danger{background:rgba(220,53,69,.14);color:#c12b3a}.dot-danger{background:#dc3545}
.chip-info{background:rgba(13,110,253,.14);color:#0d6efd}.dot-info{background:#0d6efd}
.chip-muted{background:rgba(108,117,125,.16);color:#6c757d}.dot-muted{background:#6c757d}

/* Menu statut */
.status-menu{ border: 1px solid rgba(0,0,0,.08); border-radius: 14px; min-width: 240px; max-width: 92vw; }
.status-item{ background: transparent; border: none; border-radius: 10px; padding: .6rem .75rem; font-weight: 650; }
.status-item:hover{ background: rgba(0,0,0,.06); }
.status-dot{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block; margin-right:.5rem; }

/* Chevron rotation */
.chevron-toggle i,.toggle-details i,.mob-edit-toggle .chev,.mob-details-btn .chev{ transition: transform .2s; }
.chevron-toggle[aria-expanded="true"] i,
.mob-edit-toggle[aria-expanded="true"] .chev,
.mob-details-btn[aria-expanded="true"] .chev,
.toggle-details[aria-expanded="true"] i{ transform: rotate(180deg); }

/* Flash succès */
.status-cell{ position: relative; }
.row-flash{
  position:absolute; inset:-6px -8px;
  background:rgba(25,135,84,.18);
  border:1px solid rgba(25,135,84,.35);
  border-radius:10px;
  pointer-events:none;
  opacity:0; transform:scale(.98);
  transition:opacity .3s ease, transform .3s ease;
}
.row-flash.show{ opacity:1; transform:scale(1); }

/* Mobile cards */
@media (max-width: 991.98px){
  .mob-card{ border-radius: 18px; }
  .mob-card-header{
    display:grid;
    grid-template-columns:1fr auto;
    gap:.75rem;
    align-items:center;
    padding: .95rem 1rem;
    border-bottom: 1px dashed rgba(0,0,0,.10);
  }
  .mob-left{ display:flex; gap:.55rem; align-items:center; }
  .mob-date{
    font-weight: 850;
    font-size: 1.02rem;
    line-height: 1.1;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .mob-edit-toggle{
    border:1px solid rgba(0,0,0,.12);
    background: transparent;
    padding:.35rem .5rem;
    border-radius:.75rem;
  }
  .mob-card-body{ padding:.85rem 1rem 1.05rem; }
  .mob-row{ display:flex; justify-content:space-between; gap:.75rem; margin:.35rem 0; }
  .mob-tag{ font-weight: 750; opacity:.7; }
  .mob-num{
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: .25rem .55rem;
    border-radius: .65rem;
    background: rgba(0,0,0,.06);
  }
  .mob-section-title{ font-size:.85rem; font-weight:750; opacity:.7; margin:.25rem 0 .35rem; }
  .mob-clamp{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .mob-details-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; border-radius: 14px; }
  .touch-big .btn,.touch-big .form-select{ min-height: 44px; border-radius: 14px; }
  .status-menu{ min-width: 220px; }
}

/* Actions */
.btn-action{
  display:inline-flex; align-items:center; justify-content:center;
  width: 40px; height: 40px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 1.15rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.50);
}
.btn-action:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.10); }
.btn-action.view{ color:#0d6efd; background: rgba(13,110,253,.10); border-color: rgba(13,110,253,.14); }
.btn-action.print{ color:#198754; background: rgba(25,135,84,.10); border-color: rgba(25,135,84,.14); }
.btn-action.send{ color:#6f42c1; background: rgba(111,66,193,.12); border-color: rgba(111,66,193,.16); }

@media (max-width: 991.98px){
  .mob-actions{ display:flex; gap: .9rem; justify-content:center; }
  .mob-actions .btn-action{
    width: 58px; height: 58px;
    border-radius: 16px;
    font-size: 1.55rem;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
  }
  .mob-actions .btn-action:active{ transform: scale(.97); }
}

/* =========================================
   detail_pochette.php — Glass UI
   ========================================= */

.pochette-detail .mono{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Tableau “clean” si pas déjà présent globalement */
.table-clean{
  --bs-table-bg: transparent;
}
.table-clean thead th{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
  font-size: .78rem;
  opacity: .85;
}
.pan-table-wrap{ border-radius: 18px; overflow: hidden; }

/* Badge soft (réutilisé) */
.badge-soft{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  color: inherit;
}
[data-bs-theme="dark"] .badge-soft{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* KV blocks (notes / prestation manuelle) */
.pochette-kv{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.50);
  border-radius: 18px;
  padding: 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  align-items: start;
}
[data-bs-theme="dark"] .pochette-kv{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.pochette-kv .kv-label{
  font-weight: 800;
  opacity: .7;
  grid-column: 1 / -1;
}
.pochette-kv .kv-value{
  min-width: 0;
}
.pochette-kv .kv-aside{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

/* Pill prix */
.price-pill{
  display:inline-flex;
  padding: .45rem .7rem;
  border-radius: 14px;
  font-weight: 850;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
}
[data-bs-theme="dark"] .price-pill{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

/* Total hero */
.total-hero{
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: .2px;
}

@media (max-width: 575.98px){
  .total-hero{ font-size: 1.35rem; }
  .pochette-kv{ grid-template-columns: 1fr; }
  .pochette-kv .kv-aside{ justify-content:flex-start; }
}

/* =========================================
   fiche_client.php — Glass UI
   ========================================= */

.fiche-client .mono{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Header client */
.client-header .avatar{
  width: 64px; height: 64px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 1.2rem;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.10);
}
[data-bs-theme="dark"] .client-header .avatar{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.client-header .name{ font-weight: 900; letter-spacing: .2px; }
.client-header .meta-item{ display:flex; align-items:center; gap:.5rem; }

/* badge-soft (si déjà présent globalement tu peux ignorer, sinon utile ici) */
.badge-soft{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  color: inherit;
  padding: .38rem .65rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .85rem;
}
[data-bs-theme="dark"] .badge-soft{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Actions header */
@media (max-width: 576px){
  .client-actions .btn{ width:100%; }
}

/* Statut badge (réutilisable ailleurs) */
.status-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem; border-radius: 999px;
  font-weight: 900; letter-spacing:.3px; font-size:.85rem;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
}
.status-badge .dot{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block; }

.status-badge.success{ background: rgba(25,135,84,.12); color:#198754; border-color: rgba(25,135,84,.22); }
.status-badge.success .dot{ background:#198754 }

.status-badge.warning{ background: rgba(255,193,7,.16); color:#b78100; border-color: rgba(255,193,7,.30); }
.status-badge.warning .dot{ background:#ffc107 }

.status-badge.danger{ background: rgba(220,53,69,.14); color:#c12b3a; border-color: rgba(220,53,69,.26); }
.status-badge.danger .dot{ background:#dc3545 }

.status-badge.info,
.status-badge.primary{ background: rgba(13,110,253,.14); color:#0d6efd; border-color: rgba(13,110,253,.28); }
.status-badge.info .dot,
.status-badge.primary .dot{ background:#0d6efd }

.status-badge.secondary,
.status-badge.dark{ background: rgba(108,117,125,.16); color:#6c757d; border-color: rgba(108,117,125,.30); }
.status-badge.secondary .dot,
.status-badge.dark .dot{ background:#6c757d }

/* Badge étudiant */
.badge-student{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .78rem;
  background: rgba(13,110,253,.12);
  border: 1px solid rgba(13,110,253,.22);
  color: #0d6efd;
}

/* Actions (pastilles) */
.actions-inline{ display:inline-flex; gap:.6rem; align-items:center; }
.action-pill{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 14px;
  text-decoration:none;
  transition: .2s;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
}
.action-pill i{ font-size: 1.25rem; }

.action-pill:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.10); }
[data-bs-theme="dark"] .action-pill{ border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }

.action-pill.view{ color:#0d6efd; background: rgba(13,110,253,.08); border-color: rgba(13,110,253,.18); }
.action-pill.print{ color:#198754; background: rgba(25,135,84,.08); border-color: rgba(25,135,84,.18); }
.action-pill.send{ color:#2956d3; background: rgba(41,86,211,.08); border-color: rgba(41,86,211,.18); }

/* Mobile cards pochettes */
.pochette-card{ border-radius: 18px; }
.pcard-header{
  display:flex; justify-content:space-between; align-items:center;
  gap: .75rem;
  padding-bottom: .65rem;
  border-bottom: 1px dashed rgba(0,0,0,.08);
  margin-bottom: .75rem;
}
[data-bs-theme="dark"] .pcard-header{ border-color: rgba(255,255,255,.12); }

.pcard-date{ font-weight: 900; }
.pcard-body .pc-row{ margin-bottom: .75rem; }
.pcard-body .pc-label{ font-weight: 900; opacity: .65; margin-bottom: .25rem; }
.pc-prestas{ line-height: 1.35; }
.pc-remark{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  padding: .65rem .75rem;
  border-radius: 14px;
}
[data-bs-theme="dark"] .pc-remark{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.pcard-footer{
  margin-top: .75rem;
  display:flex; justify-content:space-between; align-items:center;
  gap: .75rem;
}
.pcard-footer .total{ font-weight: 950; }

/* petits écrans */
@media (max-width: 375px){
  .action-pill{ width: 48px; height: 48px; }
}

/* Floating labels très petits écrans */
@media (max-width: 360px){
  .form-floating > .form-control,
  .form-floating > .form-select { padding-top: 1.75rem; padding-bottom: .5rem; }
  .form-floating > label { padding: .5rem .75rem; }
}


/* ===============================
   Colonnes sticky : Total + Actions
   =============================== */

/* Scope page fiche client */
.fiche-client .card-table { overflow: auto; }

/* TOTAL TTC sticky */
.fiche-client .th-total,
.fiche-client .td-total{
  position: sticky;
  right: 150px; /* largeur colonne Actions */
  z-index: 2;
  background: var(--bs-body-bg);
  box-shadow: -8px 0 14px rgba(0,0,0,.04);
  font-weight: 800;
  white-space: nowrap;
}

/* ACTIONS sticky tout à droite */
.fiche-client .th-actions,
.fiche-client .td-actions{
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--bs-body-bg);
  box-shadow: -10px 0 18px rgba(0,0,0,.08);
}

/* Header au-dessus de tout */
.fiche-client thead .th-total{ z-index: 4; }
.fiche-client thead .th-actions{ z-index: 5; }

/* Largeurs minimales */
.fiche-client .th-total,
.fiche-client .td-total{
  min-width: 130px;
}

.fiche-client .th-actions,
.fiche-client .td-actions{
  min-width: 150px;
}

.fiche-client .td-total{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.92),
      rgba(255,255,255,0.98)
    );
}

[data-bs-theme="dark"] .fiche-client .td-total{
  background:
    linear-gradient(90deg,
      rgba(20,20,20,0.92),
      rgba(20,20,20,0.98)
    );
}
/* =========================
   PATCH MODAL / OFFCANVAS
   ========================= */

/* Toujours au-dessus */
.modal { z-index: 3000 !important; }
.modal-backdrop { z-index: 2990 !important; }

/* Offcanvas reste en dessous */
#navOffcanvas { z-index: 2000 !important; }
.offcanvas-backdrop { z-index: 1990 !important; }

/* Quand une modale est ouverte, on évite que l’offcanvas capte les events */
body.modal-open #navOffcanvas,
body.modal-open .offcanvas-backdrop {
  pointer-events: none !important;
}

/* Empêche un parent transform/overflow de "casser" les fixed (on force la modale à être viewport) */
.modal-dialog { pointer-events: auto; }
.modal-content { pointer-events: auto; }

/* Optionnel mais utile sur iOS */
body.modal-open { touch-action: none; }

/* Bandeau total sticky mobile */
@media (max-width: 767.98px){
  .fiche-client { padding-bottom: 86px; } /* laisse de la place au bandeau */
  .mobile-totalbar{
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 2500;
    border-radius: 16px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  [data-bs-theme="dark"] .mobile-totalbar{
    background: rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.14);
  }
  .mobile-totalbar .inner{
    display:flex; justify-content:space-between; align-items:center;
    padding: 12px 14px;
    font-weight: 700;
  }
}

/* =========================
   KPI COLORS (Dashboard)
   ========================= */

.kpi-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* Liseré coloré + glow léger */
.kpi-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  border-radius: 10px;
  opacity:.95;
}

.kpi-card::after{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width:220px;
  height:220px;
  border-radius: 999px;
  filter: blur(18px);
  opacity:.35;
  pointer-events:none;
}

/* Variantes */
.kpi-success{ background: rgba(25,135,84,.10); }
.kpi-success::before{ background:#198754; }
.kpi-success::after{ background: rgba(25,135,84,.55); }

.kpi-info{ background: rgba(13,110,253,.10); }
.kpi-info::before{ background:#0d6efd; }
.kpi-info::after{ background: rgba(13,110,253,.55); }

.kpi-warning{ background: rgba(255,193,7,.12); }
.kpi-warning::before{ background:#ffc107; }
.kpi-warning::after{ background: rgba(255,193,7,.55); }

.kpi-danger{ background: rgba(220,53,69,.12); }
.kpi-danger::before{ background:#dc3545; }
.kpi-danger::after{ background: rgba(220,53,69,.55); }

.kpi-purple{ background: rgba(111,66,193,.12); }
.kpi-purple::before{ background:#6f42c1; }
.kpi-purple::after{ background: rgba(111,66,193,.55); }

.kpi-cyan{ background: rgba(13,202,240,.12); }
.kpi-cyan::before{ background:#0dcaf0; }
.kpi-cyan::after{ background: rgba(13,202,240,.55); }

/* Lisibilité texte si thème dark */
[data-bs-theme="dark"] .kpi-card .text-muted{ opacity:.8 !important; }