/* ═══════════════════════════════════════════════════════════════════
   Bulles de defilement — feuille commune a toutes les pages
   ───────────────────────────────────────────────────────────────────
   Chargee apres le <style> de chaque page, elle prime naturellement.
   Une seule modification ici se repercute sur tout le site.
   ═══════════════════════════════════════════════════════════════════ */

.uf-scroll,
.scroll-top-btn,
.scroll-down-btn{
  background:rgba(255,255,255,.10);
  color:rgba(10,10,10,.78);
  border:1.5px solid rgba(0,0,0,.30);
  box-shadow:0 1px 5px rgba(0,0,0,.10);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  /* La transition ne porte QUE sur les couleurs. Y inclure transform,
     box-shadow ou une dimension ferait bouger la bulle au moment ou
     elle change de teinte — c'est ce qui donnait l'impression qu'elle
     se deplacait. L'apparition au defilement garde sa propre regle,
     definie dans la page. */
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}

/* Au survol, la bulle reprend de la matiere */
.uf-scroll:hover,
.scroll-top-btn:hover,
.scroll-down-btn:hover{
  background:#1a6b3c;
  color:#fff;
  border-color:#1a6b3c;
}

/* ═══ Position et taille — source unique pour tout le site ═══
   Les pages ne basculaient pas au meme endroit : 968 px pour les
   articles, 520 px pour l'accueil. Entre les deux, les bulles
   changeaient d'ecartement, de taille et donc de hauteur d'une page
   a l'autre. Un seul point de bascule desormais, defini ici.

   La hauteur est calee sur svh et non sur %. Sur mobile, la barre
   d'adresse du navigateur se replie au defilement : la hauteur de
   fenetre change, et une position en pourcentage fait sauter les
   bulles. svh designe la petite hauteur, celle qui ne bouge pas. */
.uf-scroll,
.scroll-top-btn,
.scroll-down-btn{
  position:fixed !important;
  right:28px !important;
  width:42px !important;
  height:42px !important;
  top:50% !important;
  top:50svh !important;
  margin-top:0 !important;
}
#ufUp, .scroll-top-btn{transform:translateY(-50%) translateY(-23px) !important}
#ufDown, .scroll-down-btn{transform:translateY(-50%) translateY(23px) !important}

/* Etat masque : on conserve le glissement lateral d'origine */
#ufUp:not(.visible), .scroll-top-btn:not(.visible){
  transform:translateY(-50%) translateY(-23px) translateX(10px) !important;
}
#ufDown:not(.visible), .scroll-down-btn:not(.visible){
  transform:translateY(-50%) translateY(23px) translateX(10px) !important;
}

@media(max-width:968px){
  .uf-scroll,.scroll-top-btn,.scroll-down-btn{
    right:12px !important;
    width:38px !important;
    height:38px !important;
    font-size:.95rem !important;
  }
  #ufUp, .scroll-top-btn{transform:translateY(-50%) translateY(-21px) !important}
  #ufDown, .scroll-down-btn{transform:translateY(-50%) translateY(21px) !important}
  #ufUp:not(.visible), .scroll-top-btn:not(.visible){
    transform:translateY(-50%) translateY(-21px) translateX(10px) !important;
  }
  #ufDown:not(.visible), .scroll-down-btn:not(.visible){
    transform:translateY(-50%) translateY(21px) translateX(10px) !important;
  }
}

/* ── Bloc sombre sous la bulle : on passe en clair ──
   L'attribut est pose par /js/bulles.js, qui mesure la couleur reelle
   a la hauteur des bulles — pas sous la barre de menu, qui survole
   d'autres blocs. */
html[data-fond-cote="sombre"] .uf-scroll,
html[data-fond-cote="sombre"] .scroll-top-btn,
html[data-fond-cote="sombre"] .scroll-down-btn{
  background:rgba(255,255,255,.07) !important;
  color:rgba(255,255,255,.94) !important;
  border-color:rgba(255,255,255,.45) !important;
  /* meme ombre que sur fond clair : aucune variation de geometrie */
  box-shadow:0 1px 5px rgba(0,0,0,.10) !important;
}
html[data-fond-cote="sombre"] .uf-scroll:hover,
html[data-fond-cote="sombre"] .scroll-top-btn:hover,
html[data-fond-cote="sombre"] .scroll-down-btn:hover{
  background:#2bff88 !important;
  color:#05130b !important;
  border-color:#2bff88 !important;
}

/* Les fleches SVG des bulles rondes suivent la couleur du texte */
html[data-fond-cote="sombre"] .uf-round svg{fill:currentColor}

@media (prefers-reduced-motion:reduce){
  .uf-scroll,.scroll-top-btn,.scroll-down-btn{transition:none}
}