/* ==========================================================================
   LA BASCULE JOUR / NUIT ANIMÉE — bureau-b1, 12/09/2026

   La feuille de « theme-transition.js ». Tout est borné par l'attribut
   « html[data-bascule-theme="actif"] », que le script ne pose QUE pendant un
   changement de thème et retire à la fin. Hors de ce moment, ce fichier ne
   s'applique à rien — et s'il devait un jour exister une autre View Transition
   dans Louis, elle garderait son fondu par défaut.

   POURQUOI « animation: none » SUR LES DEUX COUCHES. Par défaut le navigateur
   fait un fondu croisé : l'ancienne image s'efface pendant que la nouvelle
   apparaît. Ce n'est pas ce qu'on veut — on veut les deux à pleine opacité,
   la nouvelle PAR-DESSUS, et un disque qui la découpe pour laisser voir
   l'ancienne dessous. D'où : pas d'animation propre sur les couches, et le
   « mix-blend-mode: normal » qui annule le « plus-lighter » par défaut.

   ⚠️ LA DURÉE PASSE PAR LE CURSEUR DES PRÉFÉRENCES (règle de bureau-9a).
   « --bascule-theme-duree » est calculée en JS à partir de --anim-vit, que
   app.js pose à 100/vitesse — et à 0 quand le curseur est à zéro. Le script
   ne lance alors aucune transition : une durée nulle laisserait quand même un
   cliché à poser, et un écran qui clignote est pire qu'un écran immobile.
   ========================================================================== */

html[data-bascule-theme="actif"]::view-transition-old(root),
html[data-bascule-theme="actif"]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* La durée du groupe, sans quoi le groupe se termine avant le disque et la
   dernière image saute. */
html[data-bascule-theme="actif"]::view-transition-group(root) {
  animation-duration: var(--bascule-theme-duree, 400ms);
}

/* ⚠️ LA FORME REPLIÉE, POSÉE AUSSI EN CSS. Entre le cliché et le moment où le
   JS démarre son animation, il s'écoule une image. Sans cette règle, le
   navigateur y peint le nouveau thème EN ENTIER : on voit un éclair du thème
   d'arrivée avant que le disque ne parte de zéro. Repris de Magic UI, qui
   l'avait posé pour Firefox — c'est vrai partout, simplement plus visible là. */
html[data-bascule-theme="actif"]::view-transition-new(root) {
  clip-path: var(--bascule-theme-depart, circle(0% at 50% 50%));
}

/* --- Le bouton de la barre du haut -----------------------------------------
   Il hérite de « .outils-titre button » (app.css:361-377) : taille, rayon,
   survol, tout y est déjà. On ne pose ici que ce qui lui est propre.

   ⚠️ LE SOLEIL EST PLEIN, ET C'EST UNE CORRECTION VUE À L'IMAGE. Son voisin
   immédiat est la roue dentée des Préférences, qu'app.css dessine comme un
   cercle de rayon 3,2 entouré de huit rayons (index.html:68-72) — c'est-à-dire
   la même figure qu'un soleil au trait. À 15 px et à trois pixels l'un de
   l'autre, on ne les distinguait pas. Le disque rempli les sépare sans changer
   la roue, qui n'est pas à moi. */
.outils-titre #bascule-theme svg circle { fill: currentColor; }
.outils-titre #bascule-theme svg {
  transition: rotate calc(.35s * var(--anim-vit, 1)) cubic-bezier(.34, 1.56, .64, 1);
}
.outils-titre #bascule-theme:hover:not(:disabled) svg { rotate: 25deg; }

/* --- L'ÉCRAN DE CONNEXION N'A PAS DE THÈME À BASCULER -------------------------
   Relevé le 12/09 : au seuil, elementsFromPoint au centre du bouton rend
   « DIV.cx-fond froid » — il est SOUS les fonds du portail, donc invisible. Et
   il serait inutile même visible : themeCourant() lit la préférence du compte,
   et il n'y a pas encore de compte. L'audit le comptait « occulté » sur les
   vues de connexion, à juste titre.

   Ce n'est pas la même chose que pendant la demande du CODE, après la
   connexion : là, app.css garde la barre de titre cliquable exprès (« on doit
   pouvoir passer en clair avant de lire son propre écran »), et le bouton
   reste — la vitrine, elle, n'est plus là. */
body:has(.cx-vitrine) #bascule-theme { display: none; }

/* --- Mouvement réduit -------------------------------------------------------
   Le réglage du système prime sur tout. Le script le lit lui aussi et ne lance
   alors aucune transition ; cette règle est la ceinture qui va avec la
   bretelle, pour le cas où le balayage serait déclenché autrement.

   ⚠️ POUR MESURER : un Chrome piloté annonce « reduce » par défaut, et toute
   mesure d'animation y est fausse sans
   page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "no-preference" }]).
   Le drapeau de ligne de commande ne suffit pas. (Relevé de bureau-9a, qui y a
   perdu deux relevés.) */
@media (prefers-reduced-motion: reduce) {
  html[data-bascule-theme="actif"]::view-transition-group(root) { animation-duration: 1ms; }
  html[data-bascule-theme="actif"]::view-transition-new(root) { clip-path: none; }
  .outils-titre #bascule-theme svg { transition: none; }
  .outils-titre #bascule-theme:hover:not(:disabled) svg { rotate: none; }
}