/* Slider « le même agenda, trois regards » — préfixe cmp- (autonome, encres fixes
   car le composant vit sur fond variable selon les pages/zones). */
#cmp { max-width: 1100px; margin: 0 auto; }
#cmp-visual {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 8.8;
  border: 1px solid rgba(28, 42, 80, .12);
  box-shadow: 0 30px 64px -28px rgba(28, 42, 80, .42);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: #fff;
}
#cmp-visual:active { cursor: grabbing; }
#cmp-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
  will-change: opacity, transform;
}
#cmp-tag {
  position: absolute; left: 16px; top: 14px; z-index: 5;
  font-family: var(--px, monospace); font-size: 13.5px; letter-spacing: .04em;
  color: #fff; background: rgba(22, 34, 63, .78);
  padding: 7px 14px; border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: background .3s;
}
#cmp-tag.royaume { background: rgba(189, 138, 42, .92); }

#cmp-track { position: relative; margin: 24px auto 0; max-width: 720px; padding: 0 12px; }
#cmp-rail { height: 6px; border-radius: 999px; background: rgba(28, 42, 80, .14); position: relative; cursor: pointer; }
#cmp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #e8b552, #bd8a2a); }
#cmp-thumb {
  position: absolute; top: 50%; translate: -50% -50%;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, #e8b552, #bd8a2a);
  box-shadow: 0 8px 22px -6px rgba(189, 138, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
  display: flex; align-items: center; justify-content: center;
  color: #1a1206; font-size: 13px; cursor: grab;
}
#cmp-thumb:active { cursor: grabbing; }
#cmp .cmp-notches { display: flex; justify-content: space-between; margin-top: 12px; }
#cmp .cmp-notch {
  font-family: var(--px, monospace); font-size: 13.5px; color: #46577e;
  background: none; border: none; cursor: pointer; padding: 6px 4px;
  transition: color .25s;
}
#cmp .cmp-notch.on { color: #bd8a2a; }

@media (max-width: 640px) {
  #cmp-visual { aspect-ratio: 4 / 3.2; }
  #cmp .cmp-notch { font-size: 11.5px; }
}