/* ==========================================================================
   Page de connexion « Orbite » (kit fsf-orbite 1.0) — formulaire centré, logo FSF et plateformes en orbite.
   Mouvement : transform et opacity uniquement (GPU), boucles lentes, prefers-reduced-motion respecté.
   Réglages : Paramètres → Page de connexion (variables --o-* posées sur .auth-orbite).
   ========================================================================== */

.auth-split.auth-orbite {
  display: block; position: relative; min-height: 100vh; min-height: 100dvh;
  overflow: hidden; isolation: isolate;
  background: var(--o-fond);
}
.auth-orbite.orbite-degrade {
  background: radial-gradient(circle at 50% 46%, var(--o-fond-clair) 0%, var(--o-fond) 42%, var(--o-fond-sombre) 100%);
}

/* ---- Arrière-plan animé ---------------------------------------------------- */
.orbite-fond {
  position: fixed; inset: 0; z-index: 0; display: grid; place-items: center;
  opacity: var(--o-op, 1); filter: blur(var(--o-flou, 0px)); pointer-events: none;
  transform: translate(var(--o-dx, 0px), var(--o-dy, 0px));
}
.orbite-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .14; filter: grayscale(.3); }

.orbite-scene {
  position: relative; width: calc(var(--o-r) * 2); height: calc(var(--o-r) * 2);
  animation: o-zoom var(--o-zoom-d, 18s) cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
}
@keyframes o-zoom { from { transform: scale(1); } to { transform: scale(var(--o-zoom, 1.08)); } }

.orbite-anneau {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .07); transform: translate(-50%, -50%);
  animation: o-apparait 1.6s cubic-bezier(.23, 1, .32, 1) both;
}
.orbite-anneau--1 { width: calc(var(--o-r) * 2); height: calc(var(--o-r) * 2); }
.orbite-anneau--2 { width: calc(var(--o-r) * 1.2); height: calc(var(--o-r) * 1.2); border-style: dashed; border-color: rgb(255 255 255 / .06); animation-delay: .15s; }
.orbite-anneau--3 { width: calc(var(--o-r) * 2.9); height: calc(var(--o-r) * 2.9); border-color: rgb(255 255 255 / .04); animation-delay: .3s; }

.orbite-rotor { position: absolute; inset: 0; animation: o-tour var(--o-tour, 160s) linear infinite var(--o-sens, normal); will-change: transform; }
@keyframes o-tour { to { transform: rotate(360deg); } }

/* Un « bras » par plateforme : trait du logo vers la pastille */
.orbite-bras { position: absolute; left: 50%; top: 50%; width: var(--o-r); height: 0; transform-origin: 0 0; transform: rotate(var(--a)); }
.orbite-trait {
  position: absolute; top: calc(var(--o-ep, 1.5px) / -2); height: var(--o-ep, 1.5px);
  left: calc(var(--o-logo) / 2 + 6px); right: calc(var(--o-noeud) / 2 + 4px);
  background: linear-gradient(90deg, transparent, var(--o-trait) 18%, var(--o-trait));
  transform-origin: left center;
  animation: o-tracer 1.6s cubic-bezier(.23, 1, .32, 1) both;
  animation-delay: calc(350ms + var(--i) * 140ms);
}
.orbite-pointille .orbite-trait { background: repeating-linear-gradient(90deg, var(--o-trait) 0 6px, transparent 6px 12px); }
@keyframes o-tracer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.orbite-noeud {
  position: absolute; left: 100%; top: 0;
  width: var(--o-noeud); height: var(--o-noeud);
  margin: calc(var(--o-noeud) / -2) 0 0 calc(var(--o-noeud) / -2);
  transform: rotate(calc(-1 * var(--a)));
}
/* Contre-rotation : la pastille garde son icône et son nom à l'endroit pendant l'orbite */
.orbite-contre { position: relative; display: block; width: 100%; height: 100%; animation: o-tour var(--o-tour, 160s) linear infinite var(--o-contre, reverse); }
.orbite-pastille {
  --c: #3A7459;
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  color: #fff;
  background: color-mix(in srgb, var(--c) 72%, #fff 8%);
  border: 1.5px solid rgb(255 255 255 / .38);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 18px 40px -12px rgb(0 0 0 / .45);
  animation: o-apparait 900ms cubic-bezier(.23, 1, .32, 1) both;
  animation-delay: calc(700ms + var(--i) * 140ms);
}
.orbite-pastille svg { width: calc(var(--o-noeud) * .4); height: calc(var(--o-noeud) * .4); }
.orbite-nom {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  white-space: nowrap; font-size: 13px; font-weight: 650; letter-spacing: .01em;
  color: rgb(255 255 255 / .85); text-shadow: 0 1px 8px rgb(0 0 0 / .35);
  animation: o-apparait 900ms cubic-bezier(.23, 1, .32, 1) both;
  animation-delay: calc(850ms + var(--i) * 140ms);
}
@keyframes o-apparait { from { opacity: 0; transform: translateX(var(--tx, 0)) scale(.85); } }
.orbite-nom { --tx: -50%; }

/* Logo central */
.orbite-centre {
  position: absolute; left: 50%; top: 50%;
  width: var(--o-logo); height: var(--o-logo); margin: calc(var(--o-logo) / -2) 0 0 calc(var(--o-logo) / -2);
  display: grid; place-items: center;
  animation: o-apparait 1.2s cubic-bezier(.23, 1, .32, 1) both;
}
.orbite-centre img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 44px rgb(0 0 0 / .35)); }
.orbite-centre-vide {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgb(255 255 255 / .5); background: rgb(255 255 255 / .08); color: #fff;
  font-size: calc(var(--o-logo) * .28); font-weight: 800; letter-spacing: -.03em;
}
.orbite-pulse > * { animation: o-pulse 5s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes o-pulse { from { transform: scale(1); } to { transform: scale(1.04); } }

/* ---- Formulaire centré ------------------------------------------------------ */
.orbite-formulaire { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-orbite .orbite-carte {
  width: 100%;
  padding: 30px 30px 24px; border-radius: 28px;
  background: color-mix(in srgb, var(--surface) var(--o-carte, 92%), transparent);
  -webkit-backdrop-filter: blur(var(--o-carte-flou, 14px)) saturate(1.2);
  backdrop-filter: blur(var(--o-carte-flou, 14px)) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .55);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 40px 80px -30px rgb(0 0 0 / .55);
  animation: o-carte 700ms cubic-bezier(.23, 1, .32, 1) both;
}
.auth-orbite[data-densite="standard"] .orbite-carte { max-width: 420px; }
.auth-orbite .auth-head { margin-bottom: 20px; }
.auth-orbite .auth-foot { margin-top: 22px; }
/* Décalage du formulaire (ordinateur) : borné pour que la carte reste entièrement visible */
.auth-orbite .orbite-carte { translate: clamp(calc(-50vw + 50% + 24px), var(--o-fdx, 0px), calc(50vw - 50% - 24px)) var(--o-fdy, 0px); }
@keyframes o-carte { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---- Animation désactivée ou mouvement réduit ------------------------------- */
.orbite-fixe .orbite-scene, .orbite-fixe .orbite-rotor, .orbite-fixe .orbite-contre, .orbite-fixe .orbite-pulse > * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .orbite-scene, .orbite-rotor, .orbite-contre, .orbite-pulse > *,
  .orbite-trait, .orbite-pastille, .orbite-nom, .orbite-anneau, .orbite-centre, .auth-orbite .orbite-carte { animation: none; }
}

/* ---- Téléphone : l'orbite passe au-dessus du formulaire ---------------------- */
@media (max-width: 600px) {
  .orbite-fond { position: absolute; inset: 0 0 auto 0; height: 290px; transform: none; }
  .orbite-scene { --o-r: 104px; --o-logo: 78px; --o-noeud: 40px; }
  .orbite-anneau--3 { display: none; }
  .orbite-nom { display: none; }
  .orbite-formulaire { place-items: start center; padding-top: 270px; }
  .auth-orbite .orbite-carte { padding: 24px 20px 18px; translate: none; }
}

/* ---- Plateforme courante en couleur, les autres grisées en filigrane -------- */
.orbite-bras--autre .orbite-noeud { opacity: var(--o-autres, .45); }
.orbite-bras--autre .orbite-pastille {
  color: rgb(255 255 255 / .75);
  background: rgb(255 255 255 / .08);
  border-color: rgb(255 255 255 / .22);
  box-shadow: none;
  filter: grayscale(1);
}
.orbite-bras--autre .orbite-nom { font-weight: 550; color: rgb(255 255 255 / .7); }
.orbite-bras--autre .orbite-trait { opacity: .55; }

.orbite-bras--courante { z-index: 1; }
.orbite-bras--courante .orbite-noeud { scale: 1.16; }
.orbite-bras--courante .orbite-pastille {
  background: var(--c);
  border: 2px solid rgb(255 255 255 / .85);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 35%, transparent), 0 0 0 14px rgb(255 255 255 / .08), 0 20px 46px -12px rgb(0 0 0 / .55);
}
.orbite-bras--courante .orbite-nom { font-weight: 750; color: #fff; }
.orbite-bras--courante .orbite-trait { background: linear-gradient(90deg, transparent, var(--o-trait) 12%, rgb(255 255 255 / .8)); }
.orbite-pointille .orbite-bras--courante .orbite-trait { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .8) 0 6px, transparent 6px 12px); }
@media (max-width: 600px) { .orbite-bras--courante .orbite-noeud { scale: 1.2; } }