/* Transformeuse RUN ⇄ BUILD : interrupteur commun et transition entre les deux thèmes.
   Chaque thème définit --tf-fg, --tf-muted, --tf-line, --tf-knob, --tf-knob-ink et, s'il le faut, --tf-bg. */

/* Échelle typographique commune (page de choix, RUN, BUILD). Tout est en rem : la taille de police choisie
   dans le navigateur est respectée. Plancher du site : 14 px pour les étiquettes courtes, 16 px pour toute phrase. */
:root {
  --fs-label: 0.875rem;                                     /* 14 px : navigation, dates, compteurs, pastilles, interrupteur, surtitres */
  --fs-note: 1rem;                                          /* 16 px : notes, légendes, sources (Geist, bas de casse) */
  --fs-body-s: 1rem;                                        /* 16 px : lecture secondaire (preuves, cartes étroites, fiche d'accueil) */
  --fs-body: 1.0625rem;                                     /* 17 px : texte courant */
  --fs-role: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17 → 19 px : intitulés de poste, titres de petits blocs */
  --fs-position: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 → 20 px : « Senior SRE · Tech Lead transverse » */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);   /* 18 → 22 px : chapôs */
  --ls-caps: 0.06em;                                        /* interlettrage des capitales en chasse fixe */
  --measure: 52ch;                                          /* longueur de ligne maximale des paragraphes */
}

/* Les navigateurs mobiles ne grossissent pas le texte d'eux-mêmes : l'échelle ci-dessus fait foi. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Très grands écrans (au-delà de 1920 × 1080, par exemple une 4K sans mise à l'échelle) : la page grandit avec
     la fenêtre au lieu de plafonner. 0,8333vw = 16 px à 1920 px de large, 1,4815vh = 16 px à 1080 px de haut ;
     en dessous, 1rem reste la taille de police choisie dans le navigateur. Les plafonds des thèmes sont en rem. */
  font-size: max(100%, min(0.8333vw, 1.4815vh));
}

@view-transition {
  navigation: auto;
}

/* L'identité et l'interrupteur restent en place pendant que le monde change autour d'eux. */
.tf-identity {
  view-transition-name: tf-identity;
}

.tf-switch {
  view-transition-name: tf-switch;
}

::view-transition-old(root) {
  animation: tf-recede 1050ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

::view-transition-new(root) {
  animation: tf-portal 1050ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

::view-transition-group(tf-identity),
::view-transition-group(tf-switch) {
  animation-duration: 1050ms;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

@keyframes tf-portal {
  from {
    clip-path: circle(0% at var(--tf-x, 88%) var(--tf-y, 5%));
  }

  to {
    clip-path: circle(160% at var(--tf-x, 88%) var(--tf-y, 5%));
  }
}

@keyframes tf-recede {
  to {
    transform: scale(0.9);
    filter: blur(8px) brightness(0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Interrupteur */
.tf-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--tf-line);
  border-radius: 999px;
  background: var(--tf-bg, transparent);
  color: var(--tf-muted);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 250ms ease;
}

.tf-switch:hover {
  border-color: var(--tf-fg);
}

.tf-switch:focus-visible {
  outline: 2px solid var(--tf-fg);
  outline-offset: 4px;
}

.tf-switch__label {
  transition: color 250ms ease;
}

.tf-switch__label.is-active {
  color: var(--tf-fg);
}

.tf-switch__track {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: 999px;
  background: var(--tf-line);
}

.tf-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tf-knob);
  box-shadow: 0 0 0 0 var(--tf-knob);
  transition: transform 420ms cubic-bezier(0.76, 0, 0.24, 1);
}

.tf-switch[data-tf-mode="build"] .tf-switch__knob,
.tf-switch.is-flipping[data-tf-mode="run"] .tf-switch__knob {
  transform: translateX(20px);
}

.tf-switch.is-flipping[data-tf-mode="build"] .tf-switch__knob {
  transform: translateX(0);
}

.tf-switch__hint {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--tf-fg);
  color: var(--tf-knob-ink);
  /* « Voir le côté BUILD » : une phrase courte, en Geist à 16 px comme les notes. */
  font-family: "Geist", system-ui, sans-serif;
  font-size: var(--fs-note);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

.tf-switch:hover .tf-switch__hint,
.tf-switch:focus-visible .tf-switch__hint {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .tf-switch__hint {
    display: none;
  }
}