/* =============================================================================
   Nego - système UI repris de DESIGN_UI.md (Célestine)
   Classes préfixées autonomes posées par-dessus Tabler. Couleur d'entité via
   var(--main-*, repli) ; vert / orange / rouge de sens jamais modifiés.
   ========================================================================== */

:root {
  --main-color: #1ab394;
  --main-color-dark: #179f85;
  --main-soft: #ebf8f5;
  --main-tint: #d8f2ec;
  --main-line: #a8e2d6;
  --main-ink: #106b58;
  --main-rgb: 26, 179, 148;
  /* Tailles de texte : valeurs DESIGN_UI sur téléphone et tablette,
     agrandies sur ordinateur (bloc « Ordinateur » en fin de feuille) */
  --fs-base: 13px;
  --fs-sm: 12px;
  --fs-xs: 11px;
  --fs-section: 14px;
  --fs-h: 19px;
  --fs-brand: 16px;
  --fs-key: 20px;
  --top-h: 59px; /* hauteur de la barre du haut (éléments collants) */
}

/* ---------- Base ---------------------------------------------------------- */
body {
  background: #f6f8fa;
  color: #26323d;
  font-size: var(--fs-base);
  overflow-x: hidden;
}
a { color: #1c6ca1; }
body::before { /* bande d'entité de 3 px, repère permanent */
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2100;
  background: var(--main-color, #1ab394);
}
.st-muted { color: #8a96a3; }
.st-overline {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #8a96a3;
}
.ml-auto { margin-left: auto; }

/* ---------- Barre du haut ------------------------------------------------- */
.st-top {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 3px 16px 0;
  background: #fff; border-bottom: 1px solid #e4e8ec;
}
.st-brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-brand); font-weight: 700; color: #26323d; text-decoration: none; }
.st-brand:hover { color: #26323d; text-decoration: none; }
.st-brand-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--main-tint, #d8f2ec); color: var(--main-color, #1ab394);
}
.st-entity {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 14px;
  background: var(--main-soft, #ebf8f5); border: 1px solid var(--main-line, #a8e2d6); color: var(--main-ink, #106b58);
}
.st-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.st-nav a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 8px;
  color: #5b6875; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.st-nav a:hover { background: #eef2f5; color: #26323d; }
.st-nav a.is-active { background: var(--main-soft, #ebf8f5); color: var(--main-ink, #106b58); box-shadow: inset 0 -3px 0 var(--main-color, #1ab394); }
.st-user { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-user-text { text-align: right; line-height: 1.2; min-width: 0; }
.st-user-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-user-role { font-size: var(--fs-xs); color: #8a96a3; }
.cmp-btn.st-burger { display: none; }

/* Menu replié (burger) sous 1200 px : sept entrées ne tiennent pas sur une ligne */
@media (max-width: 1199px) {
  .st-top { flex-wrap: wrap; padding: 3px 12px 0; }
  .cmp-btn.st-burger { display: inline-flex; margin-left: auto; }
  .st-user { margin-left: 0; }
  .st-user-text { display: none; }
  .st-nav {
    display: none; order: 10; flex-basis: 100%; flex-direction: column; align-items: stretch;
    margin: 0 0 8px; padding-top: 6px; border-top: 1px solid #e4e8ec;
  }
  .st-top.is-open .st-nav { display: flex; }
  .st-nav a { min-height: 44px; }
}

/* ---------- Page ---------------------------------------------------------- */
.st-page { max-width: none; margin: 0; padding: 4px 0 24px; } /* toute la largeur de la fenêtre */
.st-page.has-bar { padding-bottom: 90px; } /* le contenu ne passe pas sous la barre fixe */

/* En-tête de page avec retour à gauche (4.2) */
.qb-head { display: flex; align-items: center; gap: 12px; margin: 12px; min-width: 0; }
.qb-back {
  flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid #d3dae1; border-radius: 8px; background: #fff; color: #26323d; text-decoration: none;
}
.qb-back:hover { background: #eef2f5; color: #26323d; text-decoration: none; }
.qb-head-text { min-width: 0; }
.qb-head-text h2 { margin: 0; font-size: var(--fs-h); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-head-text small { color: #5b6875; }
.qb-family {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; padding: 1px 8px; border-radius: 14px;
  background: var(--main-soft, #ebf8f5); border: 1px solid var(--main-line, #a8e2d6); color: var(--main-ink, #106b58);
}
@media (max-width: 767px) { .qb-head-text h2 { white-space: normal; } }

/* Section numérotée (4.1) */
.req-section { background: #fff; margin: 12px; padding: 14px 16px; border: 1px solid #e4e8ec; border-radius: 10px; min-width: 0; }
.req-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--fs-section); font-weight: 600; color: #26323d; }
.req-step {
  flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--main-color, #1ab394); color: #fff; font-size: var(--fs-sm);
}
.req-section.qb-done .req-step { background: #1e7b34; }
.req-section.qb-missing .req-step { background: #ed5565; }
.req-section-hint { font-size: var(--fs-sm); color: #5b6875; margin: -6px 0 12px; }

/* ---------- Champs (4.3) -------------------------------------------------- */
.qb-grid { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.qb-field { flex: 1 1 220px; min-width: 0; }
.qb-field.qb-narrow { flex: 0 1 170px; }
.qb-field.qb-wide { flex-basis: 100%; }
.qb-field > label, .qb-label { display: block; margin-bottom: 4px; font-size: var(--fs-sm); font-weight: 600; color: #5b6875; }
.qb-hint { margin-top: 4px; font-size: var(--fs-xs); color: #8a96a3; }
.form-control {
  min-height: 38px; border: 1px solid #d3dae1; border-radius: 6px; box-shadow: none; font-size: var(--fs-base); color: #26323d;
}
.form-control:focus { border-color: #7fb5dc; box-shadow: 0 0 0 3px rgba(28, 132, 198, .16); }
.form-control.is-error { border-color: #ed5565; background: #fffafa; }
.is-set { border-color: var(--main-color, #1ab394) !important; box-shadow: inset 0 0 0 1px var(--main-color, #1ab394); }

/* Pastilles de choix (4.4) */
.qb-field-chips { display: flex; align-items: center; gap: 12px; flex-basis: 100%; }
.qb-field-chips > label { flex: 0 0 220px; margin: 0; }
.qb-field-chips + .qb-field-chips { border-top: 1px dashed #edf0f3; padding-top: 12px; }
.qb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-chip { position: relative; margin: 0; cursor: pointer; }
.qb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qb-chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid #d3dae1; border-radius: 18px; background: #fff; color: #26323d; font-size: var(--fs-base);
}
.qb-chip input:checked + span { background: #dceefc; border-color: #96c4e7; color: #1c6ca1; font-weight: 600; }
.qb-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(28, 132, 198, .25); }
.qb-chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.qb-chip-none span { color: #8a96a3; border-style: dashed; }
@media (max-width: 767px) {
  .qb-field-chips { flex-direction: column; align-items: flex-start; gap: 6px; }
  .qb-field-chips > label { flex-basis: auto; }
}

/* ---------- Boutons (4.6) ------------------------------------------------- */
.btn { border-radius: 6px; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--main-color, #1ab394); border-color: var(--main-color, #1ab394); }
.btn-primary:hover, .btn-primary:focus { background: var(--main-color-dark, #179f85); border-color: var(--main-color-dark, #179f85); }
.qb-btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px;
  border: 1px solid #d3dae1; border-radius: 8px; background: #fff; color: #1c6ca1; font-weight: 600; cursor: pointer;
}
.qb-btn-soft:hover { background: #eef2f5; }
.cmp-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid #d3dae1; border-radius: 8px; background: #fff; color: #5b6875; cursor: pointer;
}
.cmp-btn:hover { background: #eef2f5; }
.cmp-btn-danger { color: #a12626; }
.cmp-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Lignes de liste (4.8) ---------------------------------------- */
.st-list { display: flex; flex-direction: column; gap: 8px; }
.st-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff;
  border: 1px solid #e4e8ec; border-left: 4px solid var(--main-color, #1ab394); border-radius: 8px; min-width: 0;
}
.st-row-main { flex: 1 1 auto; min-width: 0; }
.st-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row-sub { font-size: var(--fs-sm); color: #5b6875; overflow-wrap: anywhere; }
.st-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
a.st-row-lien { color: #26323d; text-decoration: none; min-height: 56px; }
a.st-row-lien:hover { background: #eef2f5; color: #26323d; text-decoration: none; }
.st-row.is-responsable { border-left-color: var(--main-ink, #106b58); }
.st-row.is-direction { border-left-color: #1c84c6; }
@media (max-width: 767px) {
  .st-row { flex-wrap: wrap; }
  .st-row-actions { flex-basis: 100%; justify-content: flex-start; }
}
.st-empty { padding: 24px 12px; text-align: center; color: #8a96a3; }
.st-empty .fa { display: block; font-size: 32px; margin-bottom: 8px; color: #d3dae1; }

/* Résultats de recherche (boutons pleine largeur) */
.st-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.st-result {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left;
  background: #fff; border: 1px solid #e4e8ec; border-radius: 8px; color: #26323d; cursor: pointer;
}
.st-result:hover { background: #eef2f5; }
.st-result.is-selected { background: var(--main-soft, #ebf8f5); border-color: var(--main-color, #1ab394); }
.st-result:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Pastilles d'état (4.9) ---------------------------------------- */
.st-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 14px; font-size: var(--fs-sm); font-weight: 600;
  background: #f6f8fa; border: 1px solid #e4e8ec; color: #5b6875; white-space: nowrap;
}
.st-badge.is-main { background: var(--main-soft, #ebf8f5); border-color: var(--main-line, #a8e2d6); color: var(--main-ink, #106b58); }
.st-badge.is-ok { background: #eaf7ee; border-color: #bfe5c9; color: #1e7b34; }
.st-badge.is-warn { background: #fff8e6; border-color: #f3dca0; color: #8a5a00; }
.st-badge.is-error { background: #fdeeee; border-color: #f0b8b8; color: #a12626; }
.st-badge.is-info { background: #eef6fd; border-color: #c9e0f3; color: #1c6ca1; }

/* ---------- Bandeaux (4.10) ---------------------------------------------- */
.st-banner { display: flex; gap: 10px; align-items: flex-start; margin: 12px; padding: 10px 14px; border: 1px solid; border-radius: 8px; }
.st-banner > .fa { font-size: 16px; margin-top: 1px; }
.st-banner.is-info { background: #eef6fd; border-color: #c9e0f3; color: #1c6ca1; }
.st-banner.is-warn { background: #fff8e6; border-color: #f3dca0; color: #8a5a00; }
.st-banner.is-error { background: #fdeeee; border-color: #f0b8b8; color: #a12626; }
.st-banner.is-ok { background: #eaf7ee; border-color: #bfe5c9; color: #1e7b34; }
.st-banner.in-section { margin: 0 0 12px; }

/* ---------- Tuiles d'information (4.11) ----------------------------------- */
.oc-infos { display: flex; flex-wrap: wrap; gap: 10px; }
.oc-info { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; padding: 10px; background: #f6f8fa; border-radius: 8px; min-width: 0; }
.oc-info-icon {
  flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--main-tint, #d8f2ec); color: var(--main-color, #1ab394);
}
.oc-info-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #8a96a3; }
.oc-info-value { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 767px) { .oc-info { flex-basis: calc(50% - 5px); } .oc-info-icon { flex-basis: 28px; width: 28px; height: 28px; } }

/* ---------- Barre d'actions fixe (4.15) ----------------------------------- */
.qb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 20px; background: #fff; border-top: 1px solid #e4e8ec; box-shadow: 0 -6px 18px rgba(16, 24, 40, .06);
}
.qb-bar .btn { min-height: 44px; padding: 0 18px; }
.qb-state { font-size: var(--fs-sm); font-weight: 600; color: #1e7b34; }
.qb-state.qb-dirty { color: #8a5a00; }
@media (max-width: 767px) { .qb-bar > .btn { flex: 1 1 50%; } .qb-state { display: none; } }

/* ---------- Navigation d'étapes collante (4.16) -------------------------- */
.qb-steps {
  position: sticky; top: var(--top-h); z-index: 900; display: flex; gap: 6px; margin: 0 12px; padding: 8px 0;
  overflow-x: auto; scrollbar-width: none; background: rgba(246, 248, 250, .94); backdrop-filter: blur(4px);
}
.qb-steps::-webkit-scrollbar { display: none; }
.qb-steps a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 6px;
  border: 1px solid #e4e8ec; border-radius: 18px; background: #fff; color: #26323d; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.qb-steps a .req-step { background: #8a96a3; }
.qb-steps a.is-filled .req-step { background: var(--main-color, #1ab394); }
.qb-steps a.is-done .req-step { background: #1e7b34; }
.qb-steps a.is-missing .req-step { background: #ed5565; }
.req-section { scroll-margin-top: 120px; }
.req-section.qb-flash { animation: qbFlash 1s ease-out; }
@keyframes qbFlash { from { box-shadow: 0 0 0 4px rgba(28, 132, 198, .35); } to { box-shadow: 0 0 0 0 rgba(28, 132, 198, 0); } }
@media (pointer: coarse) { .qb-steps a { min-height: 44px; } }

/* ---------- Cartes (4.7) -------------------------------------------------- */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cmp-card {
  position: relative; display: flex; gap: 10px; padding: 12px; background: #f6f8fa; border: 1px solid #e4e8ec;
  border-left: 4px solid #d3dae1; border-radius: 10px; min-width: 0; cursor: pointer; margin: 0;
}
.cmp-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.cmp-card input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cmp-card .cmp-check {
  flex: 0 0 24px; width: 24px; height: 24px; border: 2px solid #d3dae1; border-radius: 6px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-base);
}
.cmp-card input:checked ~ .cmp-check { background: var(--main-color, #1ab394); border-color: var(--main-color, #1ab394); }
.cmp-card:has(input:checked) { border-left-color: var(--main-color, #1ab394); background: #fff; }
.cmp-card.is-checked { border-left-color: var(--main-color, #1ab394); background: #fff; }
.cmp-card input:focus-visible ~ .cmp-check { box-shadow: 0 0 0 3px rgba(28, 132, 198, .25); }
.cmp-card-body { flex: 1 1 auto; min-width: 0; }
.cmp-family { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; color: var(--main-ink, #106b58); }
.cmp-name { font-weight: 600; overflow-wrap: anywhere; }
.cmp-meta { font-size: var(--fs-sm); color: #5b6875; overflow-wrap: anywhere; }
.cmp-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; border: 1px solid #e4e8ec; background: #fff center / contain no-repeat; }
@media (max-width: 767px) { .cmp-grid { grid-template-columns: 1fr; } }

/* ---------- Fichiers par catégorie --------------------------------------- */
.st-files { display: flex; flex-direction: column; gap: 10px; }
.st-file-cat { padding: 10px 12px; border: 1px solid #e4e8ec; border-radius: 8px; background: #fff; }
.st-file-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-file-head .qb-label { margin: 0; flex: 1 1 160px; font-size: var(--fs-base); color: #26323d; }
.st-file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.st-file-list:empty { display: none; }
.st-file {
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 8px; background: #f6f8fa; min-width: 0;
}
.st-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.st-file-size { font-size: var(--fs-xs); color: #8a96a3; white-space: nowrap; }
.st-file.is-error { background: #fdeeee; color: #a12626; }
.st-check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; margin: 0; }
.st-check input { width: 18px; height: 18px; }
@media (pointer: coarse) { .st-check { min-height: 44px; } }

/* Liste de ce qui bloque (4.10 .oc-blocking) */
.st-blocking ul { margin: 4px 0 0; padding-left: 18px; }
.st-blocking a { color: inherit; text-decoration: underline; }
@media (pointer: coarse) { .st-blocking li a { display: block; min-height: 44px; padding: 10px 0; } }

/* ---------- Onglets (fond entité, trait haut sur l'actif) ---------------- */
.st-tabs { display: flex; gap: 6px; margin: 12px 12px 0; overflow-x: auto; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid #e4e8ec; border-radius: 8px; background: #fff; color: #5b6875; font-weight: 600; cursor: pointer;
}
.st-tabs button.is-active { background: var(--main-soft, #ebf8f5); color: var(--main-ink, #106b58); border-color: var(--main-line, #a8e2d6); box-shadow: inset 0 3px 0 var(--main-color, #1ab394); }
@media (pointer: coarse) { .st-tabs button { min-height: 44px; } }

/* ---------- Fiche technique dl (4.14) ------------------------------------ */
.st-dl { margin: 0; }
.st-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #edf0f3; }
.st-dl dt { font-weight: 600; color: #5b6875; font-size: var(--fs-sm); }
.st-dl dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.st-brief { padding: 10px 12px; background: #f6f8fa; border-radius: 8px; white-space: normal; overflow-wrap: anywhere; }

/* Lien en pastille (4.9) */
.ord-offer {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 9px; border-radius: 14px;
  background: var(--main-soft, #ebf8f5); border: 1px solid var(--main-line, #a8e2d6); color: var(--main-ink, #106b58); font-weight: 600; text-decoration: none;
}
.ord-offer:hover { background: var(--main-tint, #d8f2ec); border-color: var(--main-color, #1ab394); color: var(--main-ink, #106b58); text-decoration: none; }

/* ---------- Chronologie (4.13) ------------------------------------------- */
.st-timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid #e4e8ec; }
.st-timeline li { position: relative; padding: 0 0 12px 24px; }
.st-timeline-dot {
  position: absolute; left: -33px; top: 0; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #e4e8ec; color: #8a96a3; font-size: var(--fs-base);
}
.st-timeline li.is-last .st-timeline-dot { background: var(--main-color, #1ab394); border-color: var(--main-color, #1ab394); color: #fff; }
.st-timeline-body { padding: 8px 12px; background: #f6f8fa; border-radius: 8px; font-size: var(--fs-base); overflow-wrap: anywhere; }
.st-timeline-body .st-muted { font-size: var(--fs-xs); }

/* ---------- Décision sur un BAT (valider / demander une modification) ---- */
.st-decision { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-decision-bloc { padding: 12px; border: 1px solid #e4e8ec; border-radius: 10px; background: #fff; min-width: 0; }
.st-decision-bloc.is-ok { border-top: 4px solid #1e7b34; }
.st-decision-bloc.is-warn { border-top: 4px solid #f8ac59; }
.st-decision .btn { min-height: 44px; }
.st-apercu { display: block; max-width: 100%; max-height: 480px; border: 1px solid #e4e8ec; border-radius: 8px; background: #fff; }
@media (max-width: 767px) { .st-decision { grid-template-columns: 1fr; } }

/* ---------- Barre de filtres (4.18) -------------------------------------- */
.st-filtres { margin: 0 12px; padding: 10px 12px; background: #eef2f5; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.st-filtres-champs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-filtres-champs .st-filtre-q { flex: 1 1 240px; min-width: 0; }
.st-filtres-champs .st-filtre { flex: 0 1 180px; min-width: 150px; }
.st-filtre-mes { padding: 0 10px; background: #fff; border: 1px solid #d3dae1; border-radius: 6px; }
.st-filtres-groupes .st-badge { padding: 0 6px; font-size: var(--fs-xs); }
@media (max-width: 767px) { .st-filtres-champs > * { flex: 1 1 100% !important; } }
.qb-chip span.is-on { background: #dceefc; border-color: #96c4e7; color: #1c6ca1; font-weight: 600; }
a.qb-chip { text-decoration: none; }

/* ---------- Tableau Studio (colonnes) ------------------------------------ */
.st-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px; align-items: start; }
.st-col { background: #eef2f5; border-radius: 10px; min-width: 0; }
.st-col-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 600; border-bottom: 2px solid var(--main-line, #a8e2d6);
  color: var(--main-ink, #106b58);
}
.st-col-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.st-col-vide { padding: 12px; text-align: center; color: #8a96a3; font-size: var(--fs-sm); }
.st-carte { background: #fff; border: 1px solid #e4e8ec; border-left: 4px solid var(--main-color, #1ab394); border-radius: 8px; min-width: 0; }
.st-carte.prio-urgente { border-left-color: #f8ac59; }
.st-carte.prio-critique { border-left-color: #ed5565; }
.st-carte.is-retard { box-shadow: inset 0 0 0 1px #f0b8b8; }
.st-carte-lien { display: block; padding: 10px; color: #26323d; text-decoration: none; }
.st-carte-lien:hover { background: #f6f8fa; color: #26323d; text-decoration: none; }
.st-carte-haut { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.st-carte-client { font-weight: 600; overflow-wrap: anywhere; }
.st-carte-meta { font-size: var(--fs-sm); color: #5b6875; overflow-wrap: anywhere; }
.st-carte-attente { font-size: var(--fs-sm); color: #8a5a00; background: #fff8e6; border-radius: 6px; padding: 4px 8px; margin-top: 4px; overflow-wrap: anywhere; }
.st-carte-bas { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: var(--fs-sm); color: #5b6875; }
.st-carte-affecter { display: flex; gap: 6px; padding: 0 10px 10px; }
.st-carte-affecter .form-control { flex: 1 1 auto; min-width: 0; }
.st-carte-affecter .btn { flex: 0 0 44px; min-height: 38px; padding: 0; }
@media (pointer: coarse) { .st-carte-affecter .btn { min-height: 44px; } }

/* ---------- Messagerie ---------------------------------------------------- */
.st-badge-menu { padding: 0 6px; font-size: var(--fs-xs); min-width: 20px; justify-content: center; }
.st-pastille-non-lu { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ed5565; flex: 0 0 10px; }
.cmp-btn.st-burger { position: relative; }
.st-pastille-burger { position: absolute; top: 4px; right: 4px; }
.st-avatar {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--main-tint, #d8f2ec); color: var(--main-color, #1ab394);
}
.st-row.is-non-lu { background: #fffdf5; border-left-color: #ed5565; }
.st-row.is-non-lu .st-row-title, .st-row.is-non-lu .st-apercu-message { font-weight: 700; color: #26323d; }

/* Fil de discussion (onglet Échanges) */
.st-fil { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px 2px; }
.st-msg { display: flex; flex-direction: column; max-width: min(80%, 760px); align-self: flex-start; } /* lignes lisibles même en pleine largeur */
.st-msg.is-moi { align-self: flex-end; align-items: flex-end; }
.st-msg-bulle { padding: 8px 12px; border-radius: 10px; background: #f6f8fa; border: 1px solid #e4e8ec; overflow-wrap: anywhere; white-space: normal; }
.st-msg.is-moi .st-msg-bulle { background: var(--main-soft, #ebf8f5); border-color: var(--main-line, #a8e2d6); }
.st-msg.is-systeme .st-msg-bulle { background: #fff8e6; border-color: #f3dca0; color: #8a5a00; }
.st-msg-meta { font-size: var(--fs-xs); color: #8a96a3; margin-top: 2px; }
.st-msg-pj { margin-top: 6px; }
.st-saisie { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e4e8ec; }
.st-saisie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 767px) { .st-msg { max-width: 92%; } .st-avatar { display: none; } }

/* ---------- Mes actions (liste « À traiter », DESIGN_UI 4.19) ------------- */
.st-actions { display: flex; flex-direction: column; gap: 8px; }
.st-action {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; background: #fff;
  border: 1px solid #e4e8ec; border-radius: 8px; color: #26323d; text-decoration: none; min-width: 0;
}
.st-action:hover { background: #eef2f5; color: #26323d; text-decoration: none; }
.st-action-icone { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.st-action.niveau-calme .st-action-icone { background: rgba(26, 179, 148, .12); color: #1ab394; }
.st-action.niveau-surveiller .st-action-icone { background: rgba(248, 172, 89, .16); color: #a85507; }
.st-action.niveau-chaud .st-action-icone { background: rgba(237, 85, 101, .12); color: #b52020; }
.st-action-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.st-action-titre { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-action-dossier { font-size: var(--fs-sm); color: #5b6875; }
.st-action-detail { font-size: var(--fs-sm); color: #8a96a3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-action-age { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 44px; }
.st-action-age strong { font-size: var(--fs-key); font-weight: 700; }
.st-action-age small { font-size: var(--fs-xs); color: #8a96a3; }
.st-action.niveau-surveiller .st-action-age strong { color: #a85507; }
.st-action.niveau-chaud .st-action-age strong { color: #b52020; }
.st-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.st-pastille.niveau-calme { background: #1ab394; }
.st-pastille.niveau-surveiller { background: #f8ac59; }
.st-pastille.niveau-chaud { background: #ed5565; }
@media (max-width: 767px) { .st-action-detail { white-space: normal; } }

/* ---------- Mes notifications --------------------------------------------- */
.st-pref { flex-wrap: wrap; }
.st-pref.is-coupe { opacity: .7; }
.st-pref-canaux { display: flex; flex-wrap: wrap; gap: 16px; }
.st-pref-canal { display: flex; flex-direction: column; gap: 4px; }
.cmp-btn.is-active { background: var(--main-soft, #ebf8f5); color: var(--main-ink, #106b58); border-color: var(--main-line, #a8e2d6); }

/* ---------- Connexion ----------------------------------------------------- */
.st-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.st-login-box { width: 100%; max-width: 400px; }
.st-login-head { text-align: center; margin-bottom: 4px; }
.st-login-head .st-brand-icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 8px; }
.st-login-head h1 { font-size: var(--fs-h); font-weight: 600; margin: 0; }
.st-login .req-section { margin: 12px 0; }
.st-login .btn-primary { width: 100%; min-height: 44px; }

/* ---------- Tactile : tout ce qui se touche fait au moins 44 px (6) -------- */
@media (pointer: coarse) {
  .form-control, .btn, .cmp-btn, .qb-btn-soft { min-height: 44px; }
  .cmp-btn { width: 44px; height: 44px; }
  .qb-chip span { min-height: 44px; padding: 8px 14px; }
  .st-nav a { min-height: 44px; }
  .ord-offer { min-height: 44px; padding: 8px 12px; }
}

/* ---------- Ergonomie commune --------------------------------------------- */
/* Focus clavier visible sur tout ce qui se clique (liens-lignes, cartes, menu) */
a.st-row-lien:focus-visible, .st-carte-lien:focus-visible, .st-action:focus-visible,
.st-nav a:focus-visible, .st-tabs button:focus-visible, .qb-back:focus-visible, .cmp-btn:focus-visible, .qb-btn-soft:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(28, 132, 198, .35);
}
/* Onglets de la fiche dossier : restent visibles en faisant défiler */
.st-tabs-collants {
  position: sticky; top: var(--top-h); z-index: 900; margin: 0 12px; padding: 8px 0;
  background: rgba(246, 248, 250, .94); backdrop-filter: blur(4px);
}
.st-onglet { scroll-margin-top: calc(var(--top-h) + 64px); }
/* Grille de sections : une colonne, deux sur grand écran (.st-cols) */
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.st-col-pile { min-width: 0; }

/* ---------- Ordinateur : texte plus grand, mise en page large ------------- */
@media (min-width: 992px) {
  :root {
    --fs-base: 15px;
    --fs-sm: 13.5px;
    --fs-xs: 12.5px;
    --fs-section: 16.5px;
    --fs-h: 23px;
    --fs-brand: 18px;
    --fs-key: 24px;
    --top-h: 63px;
  }
  body { line-height: 1.5; }
  .st-page { padding: 4px 12px 32px; }
  .st-top { min-height: 60px; padding: 3px 24px 0; }
  .st-brand-icon { width: 36px; height: 36px; }
  .btn { font-size: var(--fs-base); min-height: 40px; }
  .form-control { min-height: 42px; }
  .qb-btn-soft { min-height: 40px; padding: 0 14px; }
  .cmp-btn { width: 38px; height: 38px; }
  .qb-chip span { min-height: 38px; padding: 6px 14px; }
  .req-section { padding: 18px 20px; border-radius: 12px; }
  .req-section-title { margin-bottom: 14px; }
  .req-step { flex-basis: 26px; width: 26px; height: 26px; font-size: var(--fs-sm); }
  .qb-head { margin: 16px 12px 12px; }
  .st-row { padding: 12px 16px; gap: 16px; }
  .st-tabs button { min-height: 44px; padding: 0 16px; }
  .oc-info { padding: 12px 14px; }
  .oc-info-icon { flex-basis: 40px; width: 40px; height: 40px; }
  /* Fiche technique : libellé à gauche, valeur juste à côté (plus besoin de traverser l'écran) */
  .st-dl > div { justify-content: flex-start; }
  .st-dl dt { flex: 0 0 200px; font-size: var(--fs-sm); }
  .st-dl dd { text-align: left; flex: 1 1 auto; }
  /* Listes de dossiers : pastilles de statut alignées en colonne */
  .st-row-lien > .st-badge { min-width: 170px; justify-content: center; }
  .st-kanban { gap: 14px; }
  .st-carte-lien { padding: 12px; }
}

/* Menu : entre 1200 et 1499 px, on garde la place pour les entrées du menu */
@media (min-width: 1200px) and (max-width: 1499px) {
  .st-nav { margin-left: 8px; gap: 2px; }
  .st-nav a { padding: 0 10px; font-size: 14px; }
  .st-user-text, .st-entity { display: none; }
}

/* Grand écran : sections côte à côte */
@media (min-width: 1200px) {
  .st-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-cols.is-large-gauche { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* Tuiles : la tuile Statut prend plus de place, un numéro ne se coupe jamais */
.oc-info.oc-info-wide { flex: 2 1 220px; }
.oc-info > div { min-width: 0; }
.ord-offer { white-space: nowrap; }
@media (min-width: 992px) {
  .oc-info { flex: 1 1 150px; }
  .oc-info.oc-info-wide { flex: 2 1 240px; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .oc-info { gap: 8px; padding: 10px; flex-basis: 135px; }
  .oc-info.oc-info-wide { flex-basis: 200px; }
  .oc-info-icon { flex-basis: 32px; width: 32px; height: 32px; }
}
.oc-info .ord-offer { padding: 2px 8px; gap: 4px; }
/* Pilotage Studio : quatre réglages répartis sur deux colonnes en grand écran */
@media (min-width: 1200px) {
  #secPilotage .qb-grid { gap: 18px 32px; }
  #secPilotage .qb-grid > .qb-field { flex: 1 1 calc(50% - 32px); }
  #secPilotage .qb-field-chips { flex-direction: column; align-items: flex-start; gap: 4px; }
  #secPilotage .qb-field-chips > label { flex-basis: auto; }
}
@media (min-width: 992px) { .oc-info.oc-info-piece { flex-basis: 175px; } }
/* Tableau Studio : toutes les colonnes sur une rangée en mode ordinateur
   (défilement dans son cadre seulement si la fenêtre est vraiment étroite) */
@media (min-width: 992px) {
  .st-kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); overflow-x: auto; padding-bottom: 4px; }
}

/* =============================================================================
   Nego - consultation des prix (jetons DESIGN_UI : neutres, entité, sens)
   ========================================================================== */

/* Recherche globale (accueil) */
.ng-recherche { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 10px 12px; background: #eef2f5; border-radius: 10px; }
.ng-recherche > .fa { color: #8a96a3; }
.ng-recherche .form-control { flex: 1 1 auto; min-width: 0; }
.ng-recherche .btn { min-height: 38px; }
@media (max-width: 767px) { .ng-recherche { flex-wrap: wrap; } .ng-recherche > .fa { display: none; } .ng-recherche .btn { flex: 1 1 100%; } }

/* Tuiles des familles, avec les pictos de Célestine */
.ng-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ng-fam {
  display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 10px 12px; min-width: 0;
  background: #fff; border: 1px solid #e4e8ec; border-left: 4px solid var(--main-color, #1ab394); border-radius: 10px;
  color: #26323d; text-decoration: none;
}
.ng-fam:hover { background: var(--main-soft, #ebf8f5); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); color: #26323d; text-decoration: none; }
.ng-fam.is-off { border-left-color: #d3dae1; opacity: .6; cursor: not-allowed; }
.ng-fam.is-off:hover { background: #fff; box-shadow: none; }
.ng-fam-picto { flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.ng-fam-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ng-fam-nom { font-size: var(--fs-section); font-weight: 600; }
.ng-fam-nb { font-size: var(--fs-sm); font-weight: 600; color: var(--main-ink, #106b58); }
.ng-fam-ex { font-size: var(--fs-xs); color: #8a96a3; }
@media (max-width: 767px) {
  .ng-fams { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ng-fam { flex-direction: column; align-items: flex-start; min-height: 0; }
  .ng-fam-picto { width: 56px; height: 56px; flex-basis: 56px; }
  .ng-fam-ex { display: none; }
}
.ng-version { margin: 4px 12px 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* En-tête : picto de la famille ou du produit */
.ng-head-picto { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; border: 1px solid #e4e8ec; border-radius: 8px; background: #fff; }

/* Filtres et coefficient */
.ng-filtres { margin-top: 12px; }
.ng-coef { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ng-coef label { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: #5b6875; }
.ng-coef .form-control { width: 96px; }
.ng-coef .qb-hint { margin: 0; }
.ng-coef-note { margin: 0; }

/* Lignes de produits */
.ng-ligne { align-items: center; }
.ng-ligne.is-stock { border-left-color: #d3dae1; }
.ng-thumb { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; }
.ng-ligne-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 600; min-width: 0; }
.ng-designation { overflow-wrap: anywhere; min-width: 0; }
.ng-prix { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: 260px; }
.ng-prix-vente { font-size: var(--fs-key); font-weight: 700; white-space: nowrap; color: #26323d; }
.ng-prix-vente small { font-size: var(--fs-sm); font-weight: 400; color: #5b6875; }
.ng-prix-unite, .ng-prix-revient { font-size: var(--fs-xs); color: #8a96a3; }
.ng-plus { display: flex; margin: 12px auto 0; }
@media (max-width: 767px) {
  .ng-ligne { flex-wrap: wrap; }
  .ng-ligne .st-row-main { flex: 1 1 calc(100% - 60px); }
  .ng-prix { flex-basis: 100%; align-items: flex-start; text-align: left; max-width: none; padding-left: 60px; }
}

/* Fiche produit */
.ng-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px; }
.ng-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.ng-calcul { position: sticky; top: calc(var(--top-h) + 8px); }
.ng-gros {
  margin: 16px 0 4px; padding-left: 12px; border-left: 4px solid var(--main-color, #1ab394);
  font-size: 32px; font-weight: 700; line-height: 1.1; color: #26323d;
}
.ng-gros span { font-size: var(--fs-base); font-weight: 400; color: #5b6875; }
.ng-sous { padding-left: 16px; color: #5b6875; }
.ng-marge { padding-left: 16px; margin: 4px 0 8px; color: #1e7b34; font-weight: 600; font-size: var(--fs-sm); }
.ng-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ng-actions .btn { min-height: 44px; }
.ng-table-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ng-paliers { margin: 0; font-variant-numeric: tabular-nums; }
.ng-paliers th, .ng-paliers td { text-align: right; padding: 6px 10px; white-space: nowrap; }
.ng-paliers th:first-child, .ng-paliers td:first-child { text-align: left; white-space: normal; }
.ng-paliers thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px; color: var(--main-ink, #106b58); border-bottom: 2px solid var(--main-line, #a8e2d6); }
.ng-paliers tr.is-on td { background: var(--main-soft, #ebf8f5); font-weight: 600; }
.ng-paliers tr.is-on td.ng-vente { background: var(--main-color, #1ab394); color: #fff; }
@media (max-width: 991px) {
  .ng-fiche { grid-template-columns: 1fr; }
  .ng-calcul { position: static; }
}

/* ---------- Administration ------------------------------------------------ */
.ng-admin-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ng-admin-carte {
  display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 88px; min-width: 0;
  background: #fff; border: 1px solid #e4e8ec; border-top: 4px solid var(--main-color, #1ab394); border-radius: 10px;
  color: #26323d; text-decoration: none;
}
.ng-admin-carte.is-warn { border-top-color: #f8ac59; }
.ng-admin-carte.is-ok { border-top-color: #1e7b34; }
.ng-admin-carte:hover { background: #eef2f5; color: #26323d; text-decoration: none; }
.ng-admin-texte { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ng-admin-titre { font-weight: 600; }
.ng-admin-chiffre { font-size: var(--fs-key); font-weight: 700; }
.ng-erreur { margin-top: 4px; font-size: var(--fs-xs); font-weight: 600; color: #a12626; }

.ng-coefs { margin: 0; }
.ng-coefs th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px; color: var(--main-ink, #106b58); border-bottom: 2px solid var(--main-line, #a8e2d6); }
.ng-coefs td { vertical-align: top; }
.ng-coefs td .form-control { width: 96px; }
.ng-coefs-nom { font-weight: 600; }
@media (max-width: 767px) {
  .ng-coefs th, .ng-coefs td { padding: 6px 3px; }
  .ng-coefs td .form-control { width: 56px; padding: 4px 6px; }
  .ng-coefs th { font-size: 10px; letter-spacing: 0; }
}

.ng-fourn { align-items: flex-start; }
.ng-fourn.is-a-rattacher { border-left-color: #f8ac59; }
.ng-fourn-tete, .ng-fourn-celestine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ng-fourn-celestine { margin-top: 6px; }
.ng-fourn-celestine .ng-ok { color: #1e7b34; }
.ng-fourn-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ng-fourn-sug .ord-offer { border-style: dashed; cursor: pointer; }
.ng-fourn-sug .ord-offer small { font-weight: 400; }
.ng-fourn-panneau { margin-top: 10px; }
.ng-origine { width: auto; min-width: 150px; }
.ng-reglage-valeur { display: flex; align-items: center; gap: 8px; }
.ng-reglage-valeur .form-control { width: 120px; }
.ng-reglages-note { margin: 12px 0 0; }
/* État pour BC d'une fiche fournisseur (champs exigés pour commander) */
.ng-bc { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border: 1px solid; border-radius: 8px; font-size: var(--fs-sm); }
.ng-bc.is-ok { background: #eaf7ee; border-color: #bfe5c9; color: #1e7b34; }
.ng-bc.is-warn { background: #fff8e6; border-color: #f3dca0; color: #8a5a00; }
.ng-bc > .fa { margin-top: 2px; }
.ng-bc-lien { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 600; color: #8a5a00; text-decoration: underline; }
@media (pointer: coarse) { .ng-bc-lien { min-height: 44px; } }
/* Correspondance des familles avec Célestine */
.ng-titre-picto { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; }
.ng-corr { margin: 0; min-width: 860px; }
.ng-corr th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px; color: var(--main-ink, #106b58); border-bottom: 2px solid var(--main-line, #a8e2d6); }
.ng-corr td { vertical-align: top; }
.ng-corr tr.is-famille td { background: #f6f8fa; }
.ng-corr-nom { font-weight: 600; }
.ng-corr-champ { display: flex; align-items: center; gap: 6px; }
.ng-corr-champ .form-control { min-width: 180px; }
.ng-corr-picto { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; border: 1px solid #e4e8ec; border-radius: 6px; background: #fff; }
.ng-classement-note { margin: 8px 0 0; }
.ng-glisser { display: none; margin: -4px 0 8px; }
@media (max-width: 991px) { .ng-glisser { display: block; } }