/* ============================================================
   TALENTUM — Skin Toggle (Phase 6)
   Bouton de bascule cinéma ↔ studio dans la navbar.
   ============================================================ */

/* Transition douce sur les éléments structuraux lors du changement de peau */
html,
body,
#site-navbar[data-state="visible"],
#site-footer,
.mobile-menu {
  transition: background-color 0.6s var(--ease-cinematic),
              color 0.6s var(--ease-cinematic);
}

/* ---- Bouton toggle on/off (Step 7.12) — frontière noir/blanc glissante 3/4 ↔ 1/4
   + liseré or glissant sous le 3/4 actif. Sans texte. Couleurs fixes (noir gauche, blanc droite). ---- */

.skin-toggle {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 45px;  /* Step 7.9 — réduit de 20% (56→45) pour cohérence avec le toggle FR/EN */
  height: 19px; /* 24→19 (−20%) */
  border-radius: 4px;
  border: 1px solid var(--color-accent-gold); /* hairline or : délimite le bouton sur navbar claire ET sombre */
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.skin-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* Zone noire (gauche) : 3/4 en mode noir, 1/4 en mode blanc — la frontière glisse */
.skin-toggle__half {
  display: block;
  height: 100%;
}

.skin-toggle__half--nr {
  background: var(--color-skin-noir);
  flex: 0 0 66.667%; /* Step 7.12 — 2/3 en mode noir */
  transition: flex-basis 0.45s var(--ease-expo-out);
}

/* Zone blanche (droite) : occupe tout le reste (1/4 ou 3/4) */
.skin-toggle__half--bl {
  background: var(--color-skin-blanc);
  flex: 1 1 auto;
}

/* Mode blanc (studio) : le noir se réduit à 1/3 → le blanc passe à 2/3 */
.skin-toggle[data-active-skin="studio"] .skin-toggle__half--nr {
  flex-basis: 33.333%;
}

/* Liseré or — glisse sous le 3/4 actif (gauche en mode noir, droite en mode blanc) */
.skin-toggle__indicator {
  position: absolute;
  bottom: 2px;
  left: 4px; /* Step 7.9 — recentré sous le 2/3 noir après réduction −20% (était 6px) */
  width: 21px; /* −20% (était 26px) */
  height: 1px; /* aussi fin que le contour or */
  background: var(--color-accent-gold);
  border-radius: 1px;
  transition: transform 0.45s var(--ease-expo-out);
}

.skin-toggle[data-active-skin="studio"] .skin-toggle__indicator {
  transform: translateX(14px); /* Step 7.9 — −20% (était 18px) : glisse sous le 2/3 blanc */
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  #site-navbar[data-state="visible"],
  #site-footer,
  .mobile-menu {
    transition: none;
  }

  .skin-toggle__half--nr,
  .skin-toggle__indicator {
    transition: none;
  }
}