/* Logos de la maison en orbite — décor des pages de formulaire.
   ------------------------------------------------------------
   Adaptation sans bibliothèque du motif « OrbitingCircles » : des anneaux
   pointillés, des pastilles au monogramme qui tournent à des rayons, des
   vitesses et des sens différents. Purement décoratif : aria-hidden,
   aucun événement de pointeur, et en mouvement réduit les pastilles
   s'arrêtent sur place (les retards négatifs les laissent réparties). */
.orbites{
  position:absolute; inset:0; overflow:hidden;
  display:grid; place-items:center;
  pointer-events:none; z-index:0;
}
.orbites--fixe{ position:fixed; }
.orbite-anneau{
  position:absolute;
  width:calc(var(--r) * 2); height:calc(var(--r) * 2);
  border:1px dashed rgba(195,209,126,.22);
  border-radius:50%;
}
.orbite-puce{
  position:absolute; width:38px; height:38px; margin:-19px;
  top:50%; left:50%;
  display:grid; place-items:center;
  background:rgba(15,43,50,.92);
  border:1px solid rgba(195,209,126,.35);
  border-radius:50%;
  box-shadow:0 6px 18px rgba(11,33,39,.28);
  animation:orbiter var(--t,30s) linear infinite;
  animation-delay:var(--d,0s);
}
.orbite-puce img{ width:19px; height:19px; display:block; }
.orbite-puce--inv{ animation-direction:reverse; }
@keyframes orbiter{
  from{ transform:rotate(0turn) translateX(var(--r)) rotate(0turn); }
  to  { transform:rotate(1turn) translateX(var(--r)) rotate(-1turn); }
}
@media (prefers-reduced-motion:reduce){
  .orbite-puce{ animation-play-state:paused; }
}
/* Version claire : sur fond crème, les anneaux s'assombrissent un peu et
   les pastilles s'éclaircissent. */
.orbites--clair .orbite-anneau{ border-color:rgba(28,77,86,.14); }
.orbites--clair .orbite-puce{
  background:#fff; border-color:rgba(28,77,86,.22);
  box-shadow:0 6px 18px rgba(11,33,39,.10);
}

/* Pastilles en dérive libre — pour l'accueil et la fenêtre « Être
   contacté ». Pas d'orbite : chaque pastille traverse la zone en ligne
   droite, rebondit sur un bord (alternate), repart. Deux axes, deux
   animations : le X vit sur l'élément, le Y sur son enfant, parce qu'une
   seule propriété transform ne peut pas porter deux mouvements. Les
   retards négatifs lâchent chaque pastille en plein vol, jamais toutes
   du même coin. */
.flotteurs{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
  container-type:size;
}
.flotteur{
  position:absolute; left:0; top:0; --taille:38px;
  animation:flotX var(--tx,29s) linear infinite alternate;
  animation-delay:var(--dx,0s);
}
.flotteur>span{
  display:grid; place-items:center;
  width:var(--taille); height:var(--taille);
  background:rgba(15,43,50,.92);
  border:1px solid rgba(195,209,126,.35);
  border-radius:50%;
  box-shadow:0 6px 18px rgba(11,33,39,.28);
  animation:flotY var(--ty,21s) linear infinite alternate;
  animation-delay:var(--dy,0s);
}
.flotteur img{ width:calc(var(--taille) / 2); height:calc(var(--taille) / 2); display:block; }
@keyframes flotX{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(100cqw - var(--taille))); }
}
@keyframes flotY{
  from{ transform:translateY(0); }
  to  { transform:translateY(calc(100cqh - var(--taille))); }
}
@media (prefers-reduced-motion:reduce){
  .flotteur, .flotteur>span{ animation-play-state:paused; }
}
/* Version claire, pour le voile blanc de la fenêtre. */
.flotteurs--clair .flotteur>span{
  background:#fff; border-color:rgba(28,77,86,.22);
  box-shadow:0 6px 18px rgba(11,33,39,.10);
}