/* Sélecteur de site (Studio / Learn) sous la marque, dans la barre de navigation.
   Partagé par /studio/ et /learn/ : chaque page fournit son balisage de marque et ses couleurs
   via les variables --ss-* (valeurs par défaut : thème clair). */
.brand-wrap { position: relative; display: flex; align-items: center; }
.ss-toggle { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; }
.ss-chev { width: 12px; height: 12px; flex: none; align-self: center; margin-left: 2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; transition: transform 0.25s ease; }
.ss-toggle[aria-expanded="true"] .ss-chev { transform: rotate(180deg); }

.site-switch {
  --ss-row: 44px;
  --ss-bg: rgba(255, 255, 255, 0.96);
  --ss-line: rgba(23, 21, 26, 0.08);
  --ss-knob: rgba(23, 21, 26, 0.06);
  --ss-shadow: 0 16px 40px -12px rgba(23, 21, 26, 0.25);
  position: absolute; left: -10px; top: calc(100% + 10px); z-index: 80;
  display: grid; gap: 2px; padding: 4px;
  border-radius: 16px; background: var(--ss-bg); border: 1px solid var(--ss-line); box-shadow: var(--ss-shadow);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.site-switch[hidden] { display: none; }
/* le curseur : une pastille sur le site courant, que l'on fait glisser (ou qui glisse au clic) vers l'autre site */
.ss-knob { position: absolute; left: 4px; right: 4px; top: 4px; height: var(--ss-row); border-radius: 12px; background: var(--ss-knob); pointer-events: none; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.site-switch.dragging .ss-knob { transition: none; }
.ss-opt { position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; height: var(--ss-row); padding: 0 18px 0 14px; border-radius: 12px; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-user-drag: none; }
.ss-opt[aria-current] { cursor: grab; }
.site-switch.dragging .ss-opt { cursor: grabbing; }
.ss-opt:not([aria-current]) { opacity: 0.6; transition: opacity 0.2s ease; }
.ss-opt:not([aria-current]):hover, .ss-opt:not([aria-current]):focus-visible { opacity: 1; }
.ss-opt img { -webkit-user-drag: none; pointer-events: none; }
/* Site pas encore ouvert : grisé, étiquette « Soon », ni clic ni glisser (site-switch.js ne navigue pas) */
.ss-opt.ss-soon { opacity: 0.38; cursor: default; flex-wrap: nowrap; }
.ss-opt.ss-soon:hover { opacity: 0.38; }
.ss-tag { margin-left: 10px; padding: 2px 7px 3px; border-radius: 999px; border: 1px solid currentColor; font: 600 9px/1 Inter, system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; opacity: 0.9; }