/*
  Géométrie de l'anneau — un "stade" (rectangle aux extrémités parfaitement
  rondes, cf. maquette fournie) couché à l'horizontale : deux segments
  droits horizontaux (haut/bas) reliés par deux demi-cercles (gauche/droite).

  Tout dérive de deux variables (base.css) :
  --orbit-r : rayon des demi-cercles gauche/droite = la moitié de la hauteur.
  --orbit-s : longueur des segments droits = ce qui allonge la forme à
              l'horizontale. --orbit-s:0 redonnerait un cercle pur.

  Contrairement au cercle précédent (parcouru en CSS pur via
  rotate+translateX+rotate), le tracé stade n'est pas un arc de cercle
  unique : le parcours des pastilles est calculé image par image en JS
  (js/orbit.js -> tick), qui pose aussi le <path> du SVG avec les mêmes
  valeurs de R et S lues sur la boîte réelle (aucune duplication de formule).
*/

/* Centre ancré sur le bord droit de l'écran → on ne voit jamais que la
   moitié gauche de la forme. .banner a overflow:hidden, qui coupe
   proprement le reste. Le +26px descend le centre pour dégager la nav. */
.orbit-stage{
  position:absolute;
  top:calc(50% + 26px);
  right:0;
  /* couché à l'horizontale : c'est la LARGEUR qui gagne le segment droit
     (--orbit-s), la hauteur reste un simple diamètre de cercle */
  width:calc(var(--orbit-r) * 2 + var(--orbit-s) + 60px);
  height:calc(var(--orbit-r) * 2 + 60px);
  transform:translate(50%, -50%);
  z-index:1;
  pointer-events:none;
}

.ring-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter:blur(1.5px);
  opacity:0.95;
  overflow:visible;
}
.ring-glow{
  position:absolute;
  inset:-60px;
  /* valeur volontairement énorme : sur un rectangle non carré, border-radius
     se limite automatiquement à la moitié du petit côté -> forme "stade",
     cohérente avec le tracé du <path> ci-dessus (au lieu de 50%, qui
     donnerait une ellipse sur une boîte rectangulaire). */
  border-radius:9999px;
  background:radial-gradient(closest-side, rgba(224,27,61,0.09), transparent 70%);
}

.orbit{ position:absolute; inset:0; }

.badge{
  position:absolute;
  top:0; left:0;
  width:0; height:0;
  /* position posée image par image par js/orbit.js (transform:translate) */
}

/* Pastille façon bouton : même arrondi et même ombre douce que .btn.
   translate(-50%,-50%) la recentre sur son point d'ancrage sur l'anneau. */
.badge .pin{
  position:absolute;
  top:0; left:0;
  transform:translate(-50%, -50%);
  height:112px;
  min-width:208px;
  padding:0 14px;
  border-radius:999px;
  background:var(--white);
  box-shadow:0 10px 26px -8px rgba(22,32,43,0.22), 0 0 0 1px var(--gray-200);
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge .pin img{
  max-height:98px;
  max-width:184px;
  width:auto; height:auto;
  object-fit:contain;
}
.badge .pin .fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.02em;
  white-space:nowrap;
}

/* Chaque logo est un visuel aux proportions exactes de la cellule (pastille
   de l'anneau et du bandeau mobile) : il la remplit de bord à bord. Fond blanc
   pour tous, turquoise pour Sibionics (voir assets/images/partners/*-cell.webp). */
.badge .pin:has(img[src*="-cell"]),
.badge .pin:has(img[src*="sibionics"]),
.logo-strip-pill:has(img[src*="-cell"]),
.logo-strip-pill:has(img[src*="sibionics"]){
  padding:0;
  overflow:hidden;
  position:relative;
}
.badge .pin:has(img[src*="sibionics"]),
.logo-strip-pill:has(img[src*="sibionics"]){ background:#00AFAD; }
.badge .pin img[src*="-cell"],
.badge .pin img[src*="sibionics"],
.logo-strip-pill img[src*="-cell"],
.logo-strip-pill img[src*="sibionics"]{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  max-width:none; max-height:none;
  object-fit:cover;
}

/* Hub texte : boîte large d'exactement un rayon et collée au bord droit,
   donc horizontalement centrée sur le demi-stade visible. */
.orbit-hub{
  position:absolute;
  top:calc(50% + 26px);
  right:0;
  width:var(--orbit-r);
  transform:translateY(-50%);
  padding:0 30px;
  text-align:center;
  z-index:3;
}
.orbit-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:26px;
}
.stats{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.stat b{
  display:block;
  font-family:'Sora', sans-serif;
  font-size:32px;
  line-height:1.1;
  font-weight:700;
  color:var(--ink);
}
.stat span{
  font-size:12.5px;
  color:var(--ink-soft);
}

/* ---- bandeau défilant des logos (remplace l'anneau sous 900px) ---- */
.logo-strip{ display:none; }

@media (max-width:1180px){
  .badge .pin{ height:50px; min-width:92px; padding:0 10px; }
  .badge .pin img{ max-height:44px; max-width:76px; }
  .orbit-hub{ padding:0 22px; }
  .stat b{ font-size:27px; }
  .stats{ gap:18px; }
  .orbit-label{ margin-bottom:20px; }
}

@media (max-width:900px){
  /* L'anneau n'a plus la place de respirer : on le retire et le hub
     redevient un bloc normal dans le flux, sous le hero. */
  .orbit-stage{ display:none; }
  .orbit-hub{
    position:static;
    transform:none;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 28px 44px;
    text-align:left;
  }
  .orbit-label{ margin-bottom:16px; }
  .stats{
    flex-direction:row;
    flex-wrap:wrap;
    gap:28px;
  }
  .stat{ flex:1 1 120px; }
  .stat b{ font-size:26px; }

  /* les logos défilent en tête de section, bord à bord, fondus sur les côtés */
  .logo-strip{
    display:block;
    position:relative;
    overflow:hidden;
    padding:26px 0;
    border-bottom:1px solid var(--gray-100);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .logo-strip-track{
    display:flex;
    gap:14px;
    width:max-content;
    padding-left:14px;   /* = gap : la 2e copie démarre exactement à -50 % */
    animation:mdp-logo-strip 32s linear infinite;
  }
  .logo-strip-pill{
    flex:none;
    height:64px;
    min-width:132px;
    padding:0 12px;
    border-radius:999px;
    background:var(--white);
    box-shadow:0 8px 20px -10px rgba(22,32,43,0.22), 0 0 0 1px var(--gray-200);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo-strip-pill img{
    max-height:54px;
    max-width:116px;
    width:auto; height:auto;
    object-fit:contain;
  }
  .logo-strip-pill .fallback{
    font-family:'Sora', sans-serif;
    font-weight:700;
    font-size:13px;
    color:var(--ink-soft);
  }
}

@keyframes mdp-logo-strip{
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-strip-track{ animation:none; }
}

@media (max-width:520px){
  .orbit-hub{ padding:0 20px 36px; }
  /* chiffres clés en tableau « valeur | libellé » : évite la rangée
     orpheline (2 + 1) qu'on obtenait en flex-wrap sur écran étroit */
  .stats{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px 16px;
    align-items:baseline;
  }
  .stat{ display:contents; }
  .stat b{ font-size:22px; }
  .stat span{ font-size:13px; line-height:1.4; }
  .logo-strip{ padding:20px 0; }
  .logo-strip-pill{ height:56px; min-width:116px; padding:0 12px; }
  .logo-strip-pill img{ max-height:48px; max-width:100px; }
}