/* ═══════════════════════════════════════════════════
   Donna · Filtres Margot — Prix, Surface, Arrondissement
   v1115 13mai26 — handoff Margot intégré
   v1116 13mai26 — unification visuelle avec .fside existants (Anthony S3)
   
   Branché sur tokens donna existants (--bg --surface --s2 --s3 --border
   --border-hi --text --text-dim --muted --accent --accent-dim)
   ═══════════════════════════════════════════════════ */

/* ═══ [v1116] Unification : .fside et .fp-group au même look ═══
   Override les anciennes définitions de shell-v2.css pour aligner TOUTES les
   cartes de filtres (Vue, Consultant, Statut, Type de bien, Pièces, DPE, Archive,
   etc.) sur le style Margot (padding 18px, border subtle, radius 4px).
   Anthony S3 : "Il faut que tous les autres filtres de Biens et Clients fit
   avec ce nouvel UI". */
.fside,
.fp-group{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  /* [v1119 fix Anthony S2 "mets me meme radius que sur ce screenshot (plus arrondis)"]
     Avant v1119: 4px. Maintenant 12px pour matcher .kpi-card (style.css L26)
     qui est le radius standard donna des cards/conteneurs. */
  border-radius:8px !important; /* [v1120] aligné sur .t-aside Tâches (var(--radius-lg) = 8px) */
  overflow:visible !important; /* override .fside overflow:hidden de shell-v2.css L566 */
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fp-group{
  padding:10px 12px 12px;
  gap:10px;
  margin-bottom:0;
}
/* [v1116] Override le padding-bottom 14px et padding-bottom .fside-chips:4px de
   shell-v2.css L1761-1769 pour cohérence visuelle avec .fp-group.
   [v1117 fix Anthony S2 "réduis un peu le padding autour des rectangle des filtres"]
   v1117 : 12px 14px 14px.
   [v1120 fix Anthony S4 "réduis encore le padding interne, y'en a trop"]
   v1120 : 10px 12px 12px. */
body.shell-v2-on .biens-sidefilters .fside,
body.shell-v2-on .clients-sidefilters .fside{
  padding:10px 12px 12px !important;
}
body.shell-v2-on .biens-sidefilters .fside-chips,
body.shell-v2-on .clients-sidefilters .fside-chips{
  padding-bottom:0 !important;
}

/* ═══ [v1116] Header "FILTRES" collapse — style Margot .fp-head ═══
   Anthony S3 : "le 'filtre' en haut est toujours dans l'ancien UI"
   Override .fside-collapse (shell-v2.css L571-581) : fond surface au lieu de s2,
   padding plus généreux, margin-bottom 0 (était -2px, créait la ligne fine
   S2 'une ligne qui est apparue en dessous du header'). */
.fside-collapse,
.fp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* [v1117 14px 18px → v1120 fix Anthony S4 "réduis encore le padding interne"] */
  padding:10px 14px !important;
  background:var(--surface) !important; /* était var(--s2) */
  border:1px solid var(--border) !important;
  /* [v1119 fix Anthony S2 "plus arrondis"] 4px → 12px (matche .kpi-card) */
  border-radius:8px !important; /* [v1120] aligné sur .t-aside Tâches (var(--radius-lg) = 8px) */
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.12em !important; /* était .5px */
  text-transform:uppercase;
  color:var(--muted) !important;
  margin-bottom:0 !important; /* était -2px → la ligne fine S2 */
}

/* ═══ [v1116] Label dans .fside (.fside-head) — uniformiser avec .fp-group-lbl ═══ */
.fside-head,
.fp-group-lbl{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.fside-head{
  padding:0 !important; /* était 10px 14px 8px — overridé pour rentrer dans le padding 18px de .fside */
  margin-bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
/* ═══ [v1121 fix Anthony S1 "il faut rajouter les titres dans les nouveaux filters comme dans les autres"] ═══
   Le markup renderGroup/renderArrTrigger inclut bien <span class="fp-group-lbl">.
   Mais Anthony "rajouter les titres" → invisible chez lui. Source root probable :
   var(--muted) trop pâle + .fp-group-head sans margin → label collé à la card
   et confondu avec le fond. Fix : force margin-bottom + display flex + visibilité. */
.fp-group-head{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px; /* sépare le label du slider/trigger en dessous */
  min-height:14px;   /* assure une hauteur minimale même si juste label */
}
.fp-group-head .fp-group-lbl{
  display:inline-block !important; /* assure le rendu en flow */
}

/* ═══ NOTE v1123 cleanup : les sélecteurs v1117/v1119/v1120 (.ph[data-active-page],
   .ph[data-pg-hero], .ph.ph--no-border) qui tentaient de virer la border-bottom
   du .ph ont été supprimés ici (étaient inefficaces face au cache navigateur).
   La solution unique active est l'override !important dans shell-v2.css L3464+
   (v1122 fix Margot pages Biens/Clients). Cf ROLLBACK r1122/r1123. */

/* ═══ [v1117 fix Anthony S3+S4 "utilise Noir / Blanc pas violet"] ═══
   Override les états actifs des filtres existants pour cohérence visuelle.
   .fside-pill, .fchip, .fside-row .dot — tous en var(--text)/var(--bg) au
   lieu de var(--accent). Le seul élément qui reste accent : le badge "filtres
   actifs" en haut de la page (qui est un autre composant). */
body.shell-v2-on .fside-pill[data-active="true"],
body.shell-v2-on .biens-sidefilters .fchip[data-active="true"],
body.shell-v2-on .clients-sidefilters .fchip[data-active="true"]{
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: var(--bg) !important;
  font-weight: 600;
}
body.shell-v2-on .fside-row[data-active="true"] .dot{
  background: var(--text) !important;
}

/* ═══ [v1117→v1119 fix Anthony S5 "mets le meme radius ici que sur les nouveaux rectangle filtre"] ═══
   Le rail "donna a regardé tes biens / clients" (.biens-rail-donna) avait
   border-radius: 8px (style.css L4698).
   v1117 : aligné sur 4px (filtres).
   v1119 : Anthony "plus arrondis" → 12px (matche .kpi-card / .fside).
   Sous-éléments à 8px pour harmonie (cards et boutons internes). */
body.shell-v2-on .biens-rail-donna{ border-radius: 8px !important; /* [v1120] aligné sur .t-aside */ }
body.shell-v2-on .biens-rail-donna .drc,
body.shell-v2-on .biens-rail-donna-more,
body.shell-v2-on .biens-rail-donna-id .brain,
body.shell-v2-on .biens-rail-donna-id .brain-img{ border-radius: 8px !important; }

/* ═══ [v1118 fix Anthony S3 "le style donna de la popup de choix client (depuis suggestion brief) a perdu son style UI donna"] ═══
   Les classes .bf-picker-orb, .bf-picker-eyebrow, .bf-picker-head-l, .bf-picker-head-text,
   .bf-picker-donna, .bf-sep, .bf-picker-eyebrow-nm sont injectées par dashboard-brief.js v927
   mais leurs styles n'existaient nulle part (perdu lors d'un refactor antérieur).
   Branding donna : orb violet accent + eyebrow uppercase mono violet "BRIEF · DONNA". */
.bf-picker-head-l{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.bf-picker-orb{
  flex-shrink:0;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bf-picker-orb svg{ display:block; }
.bf-picker-head-text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.bf-picker-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--bp-mono, 'JetBrains Mono', monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  line-height:1;
}
.bf-picker-eyebrow .bf-sep{
  opacity:.5;
  font-weight:500;
}
.bf-picker-eyebrow-nm{
  color:var(--accent);
}
.bf-picker-donna .bf-picker-title{
  margin-top:0;
}

/* ═══ Group container Margot (Prix/Surface/Arr nouveaux) ═══
   .fp-group-head ci-dessus L96+ (avec margin-bottom v1121). */
.fp-group-reset{
  background:transparent;
  border:0;
  padding:0;
  color:var(--muted);
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.fp-group-reset:hover{ color:var(--text); }
.fp-group-reset:disabled{ opacity:.4; cursor:default; }

/* ═══ Range slider ═══ */
.fp-range{ display:flex; flex-direction:column; gap:10px; }
.fp-range-track{
  position:relative;
  height:4px;
  background:var(--s3, var(--border));
  border-radius:99px;
  margin:8px 10px;
  cursor:pointer;
}
.fp-range-fill{
  position:absolute;
  top:0;
  bottom:0;
  background:var(--text);
  border-radius:99px;
  pointer-events:none;
}
.fp-range-handle{
  position:absolute;
  top:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  background:var(--surface);
  border:2px solid var(--text);
  border-radius:50%;
  padding:0;
  cursor:grab;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  touch-action:none;
  user-select:none;
}
.fp-range-handle:hover{ transform:translate(-50%,-50%) scale(1.1); }
.fp-range-handle:active,
.fp-range-handle[data-dragging="true"]{ cursor:grabbing; transform:translate(-50%,-50%) scale(1.15); }
.fp-range-vals{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:13px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.fp-range-vals strong{ font-weight:600; }
.fp-range-dash{ color:var(--muted); }

/* ═══ Presets row 2x2 ═══ */
.fp-presets{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
}
.fp-preset{
  height:30px;
  padding:0 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-dim, var(--muted));
  font:inherit;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background 80ms, border-color 80ms, color 80ms;
}
.fp-preset:hover{
  background:var(--s2);
  color:var(--text);
  border-color:var(--border-hi, var(--border));
}
.fp-preset.is-active{
  /* [v1117 fix Anthony S3 "utilise Noir / Blanc pas violet"] */
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
  font-weight:600;
}

/* ═══ Trigger (Arrondissement → popup) ═══ */
.fp-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:10px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font:inherit;
  font-size:13px;
  cursor:pointer;
  transition:background 80ms, border-color 80ms;
}
.fp-trigger:hover{
  background:var(--s2);
  border-color:var(--border-hi, var(--border));
}
.fp-trigger[aria-expanded="true"]{
  background:var(--s2);
  border-color:var(--text);
}
.fp-trigger-l{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.fp-trigger-l svg{
  width:14px;
  height:14px;
  color:var(--muted);
  flex-shrink:0;
}
.fp-trigger-l > span:nth-child(2){
  color:var(--text-dim, var(--muted));
  font-weight:500;
}
.fp-trigger-summary{
  color:var(--text);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.fp-trigger-summary.is-empty{ color:var(--muted); font-weight:400; }
.fp-trigger-count{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  /* [v1117 fix Anthony S3 "utilise Noir / Blanc pas violet"] */
  background:var(--text);
  color:var(--bg);
  border-radius:99px;
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ═══ Popup arrondissements ═══ */
.fp-pop-backdrop{
  position:fixed;
  inset:0;
  background:rgba(20,22,31,.18);
  opacity:0;
  pointer-events:none;
  z-index:200;
  transition:opacity 120ms;
}
[data-theme="noir"] .fp-pop-backdrop,
.theme-noir .fp-pop-backdrop{ background:rgba(0,0,0,.5); }
.fp-pop-backdrop.is-open{ opacity:1; pointer-events:auto; }

.fp-pop{
  position:fixed;
  z-index:210;
  width:340px;
  background:var(--surface);
  border:1px solid var(--border-hi, var(--border));
  /* [v1119 fix Anthony S2 "plus arrondis"] 6px → 12px (matche .kpi-card / .fside) */
  border-radius:8px; /* [v1120] aligné sur .t-aside Tâches */
  box-shadow:0 12px 32px rgba(20,22,31,.12);
  display:none;
  flex-direction:column;
  max-height:78vh;
}
[data-theme="noir"] .fp-pop,
.theme-noir .fp-pop{ box-shadow:0 12px 40px rgba(0,0,0,.6); }
.fp-pop.is-open{ display:flex; animation:fpPopIn 140ms ease-out; }
@keyframes fpPopIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
/* [v1117 fix Anthony S1 "ça m'affiche un header arrondissement?? supprime moi ça"]
   Le .fp-pop-head était redondant (le contexte est clair : on a cliqué sur le
   trigger Arrondissement). Virer le header → mettre juste le × en absolu top-right. */
.fp-pop-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:1;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  border-radius:6px;
  color:var(--muted);
  cursor:pointer;
}
.fp-pop-close:hover{ background:var(--s2); color:var(--text); }
.fp-pop-close svg{ width:12px; height:12px; }

.fp-pop-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 14px 10px;
  padding-right:44px; /* [v1117] laisse place au × absolu en haut à droite */
  border-bottom:1px solid var(--border);
}
.fp-pop-search svg{ width:13px; height:13px; color:var(--muted); flex-shrink:0; }
.fp-pop-search input{
  flex:1;
  min-width:0;
  height:24px;
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:13px;
  outline:none;
}
.fp-pop-search input::placeholder{ color:var(--muted); }

.fp-pop-body{
  flex:1;
  overflow-y:auto;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.fp-pop-section-lbl{
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.fp-pop-quick{ display:flex; flex-wrap:wrap; gap:6px; }
.fp-quick{
  height:28px;
  padding:0 10px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-dim, var(--muted));
  font:inherit;
  font-size:11.5px;
  font-weight:500;
  cursor:pointer;
}
.fp-quick:hover{ background:var(--s3, var(--border)); color:var(--text); }

.fp-pop-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
}
.fp-arr{
  height:34px;
  display:grid;
  place-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background 80ms, border-color 80ms, color 80ms;
}
.fp-arr sup{ font-size:9px; margin-left:1px; }
.fp-arr:hover{ background:var(--s2); border-color:var(--border-hi, var(--border)); }
/* [v1117 fix Anthony S4 "utilise Noir / Blanc pas violet"] */
.fp-arr.is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }
.fp-arr.is-on sup{ color:var(--bg); }
.fp-arr.is-hidden{ display:none; }

.fp-pop-foot{
  display:flex;
  gap:8px;
  padding:10px 14px;
  border-top:1px solid var(--border);
}
.fp-pop-clear{
  flex:1;
  height:30px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-dim, var(--muted));
  font:inherit;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
}
.fp-pop-clear:hover{ background:var(--s2); color:var(--text); }
.fp-pop-apply{
  flex:1;
  height:30px;
  background:var(--text);
  color:var(--bg);
  border:0;
  border-radius:8px;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.fp-pop-apply:hover{ background:var(--text-dim, var(--muted)); }




/* ═══════════════════════════════════════════════════════════════════
 * [v1192] Rail donna — version compacte + scroll H corrigé + popover
 * clamp viewport. Anthony : "je n'arrive pas à scroll horizontal +
 * il ne faut pas que les cards sortent du cadre à droite + réduis la
 * height de la barre trop grosse là, rapproche-toi de comme c'était
 * avant".
 * ═══════════════════════════════════════════════════════════════════ */

.dr-rail{
  position: relative;
  /* Compact : on aligne sur la hauteur de l'ancien rail (~50px) */
}

/* Le parent .biens-rail-donna a souvent display flex horizontal :
   header gauche + cards milieu + bouton Tout voir droite. Pour que le
   track scrollable prenne tout l'espace dispo et ne déborde pas, on
   force flex: 1 + min-width: 0 (sinon flexbox laisse l'enfant déborder). */
.dr-rail-cards{
  flex: 1 1 0%;
  min-width: 0;  /* ← critique pour que overflow-x marche dans flex parent */
  position: relative;
  margin: 0;
  /* Hauteur fixe pour pas de layout shift */
  height: 32px;
}

/* Track scrollable horizontal — c'est lui qui scroll, pas le parent */
.dr-pills-track{
  display: flex;
  gap: 6px;
  align-items: center;
  height: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  /* [v1193] Scrollbar invisible mais scroll fonctionnel */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
  padding: 0;
  -webkit-overflow-scrolling: touch;
  /* Indication visuelle scroll dispo (gradient fade à droite) */
  mask-image: linear-gradient(to right, black calc(100% - 18px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent);
}
.dr-pills-track::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

/* Pill compacte (24px hauteur interne, 28px total avec padding) */
.dr-pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border: 1px solid var(--border);
  background: var(--s1);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 220px;
  height: 26px;
  line-height: 1;
  transition: background 150ms ease, border-color 150ms ease;
}
.dr-pill:hover{
  background: var(--s2);
  border-color: var(--text-dim);
}
.dr-pill.is-active{
  background: var(--s2);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.dr-pill.is-applied{
  background: color-mix(in srgb, var(--vert, var(--accent)) 8%, var(--s1));
  border-color: color-mix(in srgb, var(--vert, var(--accent)) 35%, var(--border));
}
.dr-pill.is-applied::after{
  content: '✓';
  margin-left: 3px;
  font-weight: 700;
  color: var(--vert, var(--accent));
  font-size: 10px;
}
.dr-pill.is-cancelled{ opacity: 0.4; }
.dr-pill-icon{
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.dr-pill.is-active .dr-pill-icon{ color: var(--accent); }
.dr-pill-title{
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* ─── Popover ─────────────────────────────────────────────────────
   La popover doit pouvoir dépasser le track scrollable et le rail
   entier (qui est en flex avec overflow). On utilise position:fixed
   pour s'affranchir des contraintes de clipping des parents, et on
   positionne en JS au moment de l'ouverture.
*/
.dr-popover{
  position: fixed;
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 16px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 0;
  display: none;
}
.dr-popover.is-open{ display: block; }
.dr-popover::before{
  content: '';
  position: absolute;
  top: -5px;
  left: 16px;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
}
/* Quand le popover est positionné depuis la droite (pill en bord),
   le triangle se met à droite */
.dr-popover.is-right::before{
  left: auto;
  right: 16px;
}
.dr-popover .da-ac{
  margin: 0;
  border: 0;
  box-shadow: none;
}

/* ─── States loader/empty/error ─── */
.dr-loader{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding-left: 4px;
}
.dr-spin{
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dr-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes dr-spin{ to{ transform: rotate(360deg); } }
.dr-empty{
  height: 32px;
  display: flex;
  align-items: center;
  padding-left: 4px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}
.dr-error{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--chaud);
  background: color-mix(in srgb, var(--chaud) 8%, transparent);
  border-radius: 4px;
}
.dr-error button{
  margin-left: auto;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--chaud);
  color: var(--chaud);
  border-radius: 3px;
  font-size: 10.5px;
  cursor: pointer;
}

/* Bouton refresh dans le header — compact */
.dr-rail-refresh{
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 5px;
  cursor: pointer;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, border-color 150ms ease;
  flex-shrink: 0;
}
.dr-rail-refresh:hover{
  color: var(--text);
  border-color: var(--text-dim);
}

/* Header rail — gap compact */
.dr-rail .biens-rail-donna-id{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* [v1193] Bouton compact "143+" au lieu de "Tout voir les 143 signaux" */
.dr-rail-more-compact{
  flex-shrink: 0;
  padding: 4px 10px;
  height: 26px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: color 150ms, border-color 150ms;
}
.dr-rail-more-compact:hover{
  color: var(--text);
  border-color: var(--text-dim);
}