.ct-scope-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:4px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:rgba(255,255,255,.6);
  vertical-align:middle;

  --ct-tip-bg: rgba(0,0,0,.85);
  --ct-tip-color: #fff;
  --ct-tip-fs: 12px;
}
.ct-scope-toggle--archive{ margin-right:12px; }

.ct-scope-toggle__btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:7px 10px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  line-height:1;
}
.ct-scope-toggle__btn:hover{ background:rgba(0,0,0,.06); }
.ct-scope-toggle__btn.is-active{ background:rgba(0,0,0,.10); }

/* Tooltip body : jamais coupé par overflow:hidden */
.ct-scope-tooltip{
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  display: none;

  background: rgba(0,0,0,.85);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--ct-tip-fs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;

  z-index: 2147483647;
  pointer-events: none;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);

  --ct-tip-bg-live: rgba(0,0,0,.85);
}
.ct-scope-tooltip[data-visible="1"]{ display: block; }

.ct-scope-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-10px;
  border:6px solid transparent;
  border-top-color: var(--ct-tip-bg-live);
}
.ct-scope-tooltip.is-below::after{
  top:-10px;
  bottom:auto;
  border-top-color: transparent;
  border-bottom-color: var(--ct-tip-bg-live);
}

/* Kill-switch: si un ancien JS a créé .ct-scope-tooltip (cache), on le masque */
.ct-scope-tooltip{ display:none !important; }

/* Tooltip CSS-only : visible uniquement au hover/focus-within */
.ct-scope-toggle__item{
  position: relative;
  display:inline-flex;
  align-items:center;
  overflow: visible;
}
.ct-scope-toggle__tip{
  display:none;
  position:absolute;
  left:50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2147483647;
  pointer-events:none;

  background: var(--ct-tip-bg, rgba(0,0,0,.85));
  color: var(--ct-tip-color, #fff);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--ct-tip-fs, 12px);
  line-height: 1.2;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}
.ct-scope-toggle__tip::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--ct-tip-bg, rgba(0,0,0,.85)) transparent transparent transparent;
}
.ct-scope-toggle__item:hover .ct-scope-toggle__tip,
.ct-scope-toggle__item:focus-within .ct-scope-toggle__tip{
  display:block;
}
@media (hover:none), (pointer:coarse){
  .ct-scope-toggle__tip{ display:none !important; }
}