/* ==========================================================================
   135 — Theme Toggle
   Toggle jour/nuit chorégraphié, 100 % CSS (checkbox caché + :checked).
   Vers la nuit : les 8 rayons se rétractent en tournant, le pouce glisse
   pendant que la piste traverse un dégradé aube→nuit, le disque se morphe
   en croissant (disque-masque qui glisse dans le cercle clippé), puis les
   étoiles s'allument et scintillent en décalé. Vers le jour : les étoiles
   s'éteignent, le croissant se referme, les rayons re-poppent avec
   overshoot. La mini-scène en dessous bascule ses couleurs via :has()
   sur le conteneur de démo. Aucun JavaScript.
   ========================================================================== */

.theme-toggle-demo {
  /* Thème JOUR de la mini-scène (bascule plus bas via :has) */
  --tt-scene-bg: #f2f5ff;
  --tt-scene-fg: #232946;
  --tt-scene-muted: #5a6178;
  --tt-scene-accent: #4c5ed9;
  --tt-scene-border: rgba(35, 41, 70, 0.14);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.theme-toggle-demo:has(.theme-toggle__input:checked) {
  /* Thème NUIT */
  --tt-scene-bg: #10151f;
  --tt-scene-fg: var(--ml-fg, #e8eaf2);
  --tt-scene-muted: var(--ml-muted, #8b91a3);
  --tt-scene-accent: var(--ml-accent, #7c8cff);
  --tt-scene-border: rgba(232, 234, 242, 0.1);
}

/* --- Le toggle -------------------------------------------------------------
   Dimensions pilotées par variables ; la course du pouce en découle. */

.theme-toggle {
  --tt-w: 76px;
  --tt-h: 38px;
  --tt-pad: 4px;
  --tt-thumb: 30px;
  --tt-travel: calc(var(--tt-w) - var(--tt-thumb) - var(--tt-pad) * 2);

  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.theme-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.theme-toggle__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ml-fg, #e8eaf2);
}

/* Piste : un seul grand dégradé aube→nuit que l'on fait défiler */
.theme-toggle__track {
  position: relative;
  flex: none;
  width: var(--tt-w);
  height: var(--tt-h);
  border-radius: 999px;
  background-image: linear-gradient(
    100deg,
    #8ec9ff 0%,
    #ffd9a0 38%,
    #6d4a9e 68%,
    #131a3a 100%
  );
  background-size: 240% 100%;
  background-position: 0% 50%;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: background-position 0.55s ease;
}

.theme-toggle__input:focus-visible ~ .theme-toggle__track {
  outline: 2px solid var(--ml-accent, #7c8cff);
  outline-offset: 3px;
}

.theme-toggle__input:checked ~ .theme-toggle__track {
  background-position: 100% 50%;
}

/* --- Pouce : soleil qui devient lune -------------------------------------- */

.theme-toggle__thumb {
  position: absolute;
  left: var(--tt-pad);
  top: var(--tt-pad);
  width: var(--tt-thumb);
  height: var(--tt-thumb);
  /* retour au jour : petit overshoot, léger retard sur les étoiles */
  transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) 0.05s;
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__thumb {
  transform: translateX(var(--tt-travel));
}

/* Rayons : 8 branches autour du disque. Le conteneur tourne pendant que
   chaque branche se rétracte vers le centre — « rétraction en rotation ». */
.theme-toggle__rays {
  position: absolute;
  inset: 0;
  /* retour au jour : les rayons re-poppent avec overshoot, en dernier */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}

.theme-toggle__ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.5px;
  height: 6px;
  border-radius: 2px;
  background: #ffcf4d;
  transform: translate(-50%, -50%) rotate(var(--tt-a, 0deg)) translateY(-20px);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s,
    opacity 0.25s ease 0.25s;
}

.theme-toggle__ray--1 { --tt-a: 0deg; }
.theme-toggle__ray--2 { --tt-a: 45deg; }
.theme-toggle__ray--3 { --tt-a: 90deg; }
.theme-toggle__ray--4 { --tt-a: 135deg; }
.theme-toggle__ray--5 { --tt-a: 180deg; }
.theme-toggle__ray--6 { --tt-a: 225deg; }
.theme-toggle__ray--7 { --tt-a: 270deg; }
.theme-toggle__ray--8 { --tt-a: 315deg; }

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__rays {
  transform: rotate(90deg);
  transition: transform 0.45s ease;
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__ray {
  transform: translate(-50%, -50%) rotate(var(--tt-a, 0deg)) translateY(-8px) scale(0);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.55, 0, 0.68, 0.19),
    opacity 0.25s ease 0.05s;
}

/* Disque clippé : le cœur (soleil→lune) + le masque qui creuse le croissant */
.theme-toggle__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-toggle__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #ffd75e;
  box-shadow: inset -3px -3px 6px rgba(214, 197, 21, 0.55);
  /* retour au jour : le disque se réchauffe pendant que le masque sort */
  transition: background-color 0.35s ease 0.1s, box-shadow 0.35s ease 0.1s;
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__core {
  background-color: #e9edfb;
  box-shadow: inset -3px -3px 6px rgba(148, 158, 196, 0.6);
  transition: background-color 0.35s ease 0.18s, box-shadow 0.35s ease 0.18s;
}

/* Le disque-masque : même teinte que le fond de nuit de la piste ; en
   glissant dans le cercle clippé il « croque » le disque → croissant. */
.theme-toggle__mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #131a3a;
  transform: translate(115%, -115%);
  /* retour au jour : le masque file en premier */
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__mask {
  transform: translate(30%, -30%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}

/* Cratères de la lune, révélés après le morph */
.theme-toggle__crater {
  position: absolute;
  border-radius: 50%;
  background: #c3cce6;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.theme-toggle__crater--1 {
  left: 22%;
  top: 48%;
  width: 26%;
  height: 26%;
}

.theme-toggle__crater--2 {
  left: 52%;
  top: 68%;
  width: 16%;
  height: 16%;
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__crater {
  opacity: 1;
  transition: opacity 0.3s ease 0.45s;
}

/* --- Étoiles : allumage en décalé puis scintillement ----------------------- */

.theme-toggle__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.theme-toggle__star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #e8eaf2;
  clip-path: polygon(
    50% 0%, 64% 36%, 100% 50%, 64% 64%,
    50% 100%, 36% 64%, 0% 50%, 36% 36%
  );
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle__star--1 { left: 16%; top: 24%; }
.theme-toggle__star--2 { left: 34%; top: 58%; width: 4px; height: 4px; }
.theme-toggle__star--3 { left: 48%; top: 20%; width: 5px; height: 5px; }

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__star {
  opacity: 1;
  transform: scale(1);
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__star--1 {
  transition:
    opacity 0.3s ease 0.35s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
  animation: theme-toggle-twinkle 2.6s ease-in-out 0.9s infinite;
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__star--2 {
  transition:
    opacity 0.3s ease 0.47s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.47s;
  animation: theme-toggle-twinkle 3.1s ease-in-out 1.4s infinite;
}

.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__star--3 {
  transition:
    opacity 0.3s ease 0.59s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.59s;
  animation: theme-toggle-twinkle 2.2s ease-in-out 1.8s infinite;
}

@keyframes theme-toggle-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.72); }
}

/* --- Mini-scène : ses couleurs suivent :has() sur le conteneur ------------- */

.theme-toggle-scene {
  width: 230px;
  max-width: 100%;
  padding: 12px 16px 14px;
  border-radius: 12px;
  background: var(--tt-scene-bg);
  border: 1px solid var(--tt-scene-border);
  transition: background 0.5s ease, border-color 0.5s ease;
}

.theme-toggle-scene__title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tt-scene-fg);
  transition: color 0.5s ease;
}

.theme-toggle-scene__body {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tt-scene-muted);
  transition: color 0.5s ease;
}

.theme-toggle-scene__chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tt-scene-accent);
  border: 1px solid var(--tt-scene-accent);
  transition: color 0.5s ease, border-color 0.5s ease;
}

/* --- Reduced motion --------------------------------------------------------
   Bascule quasi instantanée, pas de scintillement. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__track,
  .theme-toggle__thumb,
  .theme-toggle__rays,
  .theme-toggle__ray,
  .theme-toggle__core,
  .theme-toggle__mask,
  .theme-toggle__crater,
  .theme-toggle__star,
  .theme-toggle-scene,
  .theme-toggle-scene__title,
  .theme-toggle-scene__body,
  .theme-toggle-scene__chip {
    transition: none;
    animation: none;
  }
  .theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__star--1,
  .theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__star--2,
  .theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__star--3 {
    transition: none;
    animation: none;
  }
}