/* DSA CRM v11.29 — Bandeau latéral compact, documents façon Apple, loupe de zoom. */

/* ══════════════════════════════════════════════════════════════════════════
   1. BANDEAU LATÉRAL
   Le logo occupait 126 px de haut et le bloc utilisateur 56 px, soit près de
   200 px avant le premier onglet. Les couches v10.4, v10.8, v11.2 et v11.3 se
   sont empilées en augmentant la taille à chaque fois. On repart d'une valeur
   unique, mesurée : logo 62 px, utilisateur 44 px.
   ══════════════════════════════════════════════════════════════════════════ */
.sb-logo{
  height:62px!important;
  width:calc(100% - 20px)!important;
  margin:8px 10px 10px!important;
  padding:6px 10px!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.sb-logo img{
  width:auto!important;
  max-width:150px!important;
  height:42px!important;
  max-height:42px!important;
  object-fit:contain!important;
}

.sb-user{
  min-height:0!important;
  height:auto!important;
  padding:7px 10px!important;
  margin:0 10px 8px!important;
  border-radius:10px!important;
  gap:8px!important;
  align-items:center!important;
}
.sb-user strong,.sb-user b{ font-size:12.5px!important; line-height:1.25!important; }
.sb-user small,.sb-user span{ font-size:10.5px!important; line-height:1.25!important; }
.sb-user .av,.sb-user .avatar,.sb-user i{
  width:26px!important; height:26px!important;
  min-width:26px!important; font-size:11px!important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. DOCUMENTS DU MANDAT — présentation façon Apple
   Vignettes agrandies (132 px → 200 px), cartes claires, coins généreux,
   ombre douce, survol franc. La grille s'adapte à la largeur réelle plutôt
   qu'à un nombre de colonnes figé.
   ══════════════════════════════════════════════════════════════════════════ */
.doc-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  gap:16px!important;
  align-items:start!important;
}

.doc-card{
  border:1px solid rgba(0,0,0,.07)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05)!important;
  overflow:hidden!important;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s cubic-bezier(.22,.61,.36,1),
             border-color .22s!important;
  contain-intrinsic-size:330px!important;
}
.doc-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(0,0,0,.1)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.08),0 18px 40px rgba(0,0,0,.1)!important;
}
.doc-card.selected{
  border-color:#8b1a2f!important;
  box-shadow:0 0 0 3px rgba(139,26,47,.14),0 8px 24px rgba(0,0,0,.1)!important;
}

/* Vignette : nettement plus grande, image entière visible. */
.doc-card-preview{
  height:200px!important;
  background:linear-gradient(180deg,#fafafa 0%,#f2f2f4 100%)!important;
  border-bottom:1px solid rgba(0,0,0,.05)!important;
  padding:10px!important;
  box-sizing:border-box!important;
}
.doc-card-preview img{
  width:100%!important; height:100%!important;
  object-fit:contain!important;         /* le document n'est plus rogné */
  border-radius:8px!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.1)!important;
  transition:transform .25s cubic-bezier(.22,.61,.36,1)!important;
}
.doc-card:hover .doc-card-preview img{ transform:scale(1.03)!important; }

.doc-card-body,.doc-card-info,.doc-card > div:not(.doc-card-preview){ padding:11px 13px!important; }
.doc-card-title,.doc-card strong{
  font-size:13px!important; font-weight:600!important;
  line-height:1.35!important; color:#1d1d1f!important;
  letter-spacing:-.01em!important;
}
.doc-card small,.doc-card-meta{ font-size:11px!important; color:#86868b!important; }

/* Case de sélection : pastille arrondie, lisible sur toute vignette. */
.doc-card-check{
  width:20px!important; height:20px!important;
  top:10px!important; left:10px!important;
  accent-color:#8b1a2f!important;
  border-radius:6px!important;
  box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.2)!important;
}

/* Actions : masquées au repos, révélées au survol, comme dans le Finder. */
.doc-card-actions,.doc-quick-classify{
  opacity:0; transition:opacity .2s,transform .2s!important;
}
.doc-card:hover .doc-card-actions,
.doc-card:focus-within .doc-card-actions,
.doc-card:hover .doc-quick-classify{ opacity:1!important; transform:none!important; }

.doc-card button,.doc-card .btn{
  border-radius:9px!important;
  font-size:11.5px!important;
  padding:5px 11px!important;
  border:1px solid rgba(0,0,0,.08)!important;
  transition:background .15s!important;
}

@media (max-width:900px){
  .doc-grid{ grid-template-columns:repeat(auto-fill,minmax(165px,1fr))!important; }
  .doc-card-preview{ height:165px!important; }
}
@media (max-width:560px){
  .doc-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; }
  .doc-card-preview{ height:145px!important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. LOUPE DE ZOOM
   Le facteur est appliqué sur la racine et mémorisé par appareil.
   ══════════════════════════════════════════════════════════════════════════ */
.v1129-zoom{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; background:#fff;
}
.v1129-zoom-head{ display:flex; align-items:center; gap:9px; min-width:190px; }
.v1129-zoom-head svg{ width:19px; height:19px; flex:0 0 auto; color:#8b1a2f; }
.v1129-zoom-head b{ font-size:13px; font-weight:600; color:#1d1d1f; display:block; }
.v1129-zoom-head small{ font-size:11px; color:#86868b; }
.v1129-zoom-ctl{ display:flex; align-items:center; gap:6px; }
.v1129-zoom-ctl button{
  width:32px; height:32px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(0,0,0,.1); background:#fff;
  font-size:16px; line-height:1; color:#1d1d1f;
  transition:background .15s;
}
.v1129-zoom-ctl button:hover{ background:#f2f2f4; }
.v1129-zoom-ctl button:disabled{ opacity:.35; cursor:default; }
.v1129-zoom-val{
  min-width:58px; text-align:center;
  font-size:13px; font-weight:600; color:#1d1d1f;
  font-variant-numeric:tabular-nums;
}
.v1129-zoom input[type=range]{ flex:1; min-width:130px; accent-color:#8b1a2f; }
.v1129-zoom-reset{
  border:none; background:none; cursor:pointer;
  font-size:12px; color:#8b1a2f; text-decoration:underline; padding:4px 2px;
}
@media (max-width:560px){
  .v1129-zoom-head{ min-width:0; width:100%; }
  .v1129-zoom input[type=range]{ order:5; width:100%; flex:1 0 100%; }
}