/* ============================================================================
   LE FOND — des calques empilés, et trois façons de les animer.
   Voir fond.php pour les sept régimes, fond.js pour ce qui bouge.
   ============================================================================ */

.fonds{ position:absolute; inset:0; z-index:0 }

.fond{
  position:absolute; inset:0; display:block; border-radius:0;
  background:center bottom/cover no-repeat fixed;
  filter:saturate(var(--fond-saturation, 1)) brightness(var(--fond-lumiere, 1));
  opacity:0;
  transform:scale(1.06);
  animation:fond-respire 64s ease-in-out infinite alternate;
  /* La couleur moyenne de la photo est posée SOUS elle : tout ce qui
     s'aperçoit pendant un croisement — ou avant que l'image soit chargée —
     est SA propre teinte, pas celle de la page. C'est elle qui rend le
     croisement des deux courbes ci-dessous possible sans clignotement. */
  background-color:var(--fond-couleur, transparent);
}
@keyframes fond-respire{
  from{ transform:scale(1.06) translate3d(0,0,0) }
  to  { transform:scale(1.13) translate3d(-1.2%,0,0) } }

/* ---- LE CROISEMENT ----
   Les deux calques bougent, mais PAS SUR LA MÊME COURBE :
     — l'entrant monte en ease-OUT : il prend vite de la présence, puis
       s'installe sans à-coup sur la fin ;
     — le sortant descend en ease-IN : il TIENT au début, pendant que l'autre
       monte, et ne lâche qu'une fois couvert.
   Sur la même courbe, les deux passent par 50 % au même instant et l'image
   apparaît d'un coup au milieu. Croisées, la somme des opacités ne descend
   jamais sous 1 : ça se fond au lieu d'apparaître. */
.fond.on{ opacity:var(--fond-opacite, 1); z-index:1;
  transition:opacity var(--fond-fondu, 1.6s) var(--fondu-entrant, cubic-bezier(.16,.84,.44,1)) }
.fond.sortant{ opacity:0; z-index:0;
  transition:opacity var(--fond-fondu, 1.6s) var(--fondu-sortant, cubic-bezier(.56,0,.84,.16)) }

/* ---- LA PARALLAXE ----
   La réserve n'est plus une pile mais une BANDE : les images sont posées les
   unes SOUS les autres et la bande glisse moins vite que la page. Elle n'est
   donc plus collée aux quatre bords — elle part du haut et descend aussi loin
   qu'il le faut ; c'est au parent de la couper.
   Une seule image : `--fond-zoom` l'agrandit, sinon il n'y a rien à faire
   glisser au-dessus ni en dessous d'elle. */
.fonds[data-parallaxe]{ inset:0 0 auto 0; will-change:transform }
.fonds[data-parallaxe] .fond{
  position:relative; inset:auto; display:block;
  block-size:calc(100lvh * var(--fond-zoom, 1));
  background-attachment:scroll; background-position:center center;
  opacity:var(--fond-opacite, 1); transition:none; transform:none; animation:none }

/* ---- LE KEN BURNS ----
   L'ANIMATION DOIT SURVIVRE AU FONDU. Posée sur `.on` seule, elle cesse de
   s'appliquer à l'instant où la classe part — et le transform retombe d'un
   coup à sa valeur de base PENDANT que le calque est encore visible en train
   de se fondre. C'est un zoom qui se rembobine sous les yeux, au pire moment.
   La règle couvre donc les DEUX états : passer de `.on` à `.sortant` ne change
   aucune propriété d'animation, elle ne redémarre pas, elle continue. */
.fonds[data-ken] .fond{ animation:none; transform:scale(var(--ken-depart, 1.04)) }
.fonds[data-ken] .fond.on,
.fonds[data-ken] .fond.sortant{
  animation:fond-ken var(--ken-duree, 9600ms) linear forwards }
/* Une image sur deux dérive dans l'AUTRE SENS : trois plans qui glissent tous
   vers le même coin donnent l'impression que c'est la page qui bouge. */
.fonds[data-ken] .fond.on:nth-child(even),
.fonds[data-ken] .fond.sortant:nth-child(even){ animation-name:fond-ken-inverse }
@keyframes fond-ken{
  from{ transform:scale(var(--ken-depart, 1.04)) translate3d(0,0,0) }
  to  { transform:scale(var(--ken-arrivee, 1.18))
        translate3d(calc(-1 * var(--ken-derive, 2%)), calc(-.75 * var(--ken-derive, 2%)), 0) } }
@keyframes fond-ken-inverse{
  from{ transform:scale(var(--ken-arrivee, 1.18))
        translate3d(var(--ken-derive, 2%), calc(.75 * var(--ken-derive, 2%)), 0) }
  to  { transform:scale(var(--ken-depart, 1.04)) translate3d(0,0,0) } }

@media (prefers-reduced-motion:reduce){
  .fond{ transition:none; animation:none }
  .fonds[data-ken] .fond.on,
  .fonds[data-ken] .fond.sortant{ animation:none } }