/* Nobula — landing V4 : « Tous vos produits. » Un rayon de produits qui avance d'un cran à la fois ;
   au centre, sous la puce IA, la photo de départ brûle en visuel (motion-objets.js).
   Les cartes donnent l'ombre et la place ; les images sont peintes par la plaque WebGL (plate.js). */

/* Remonte de 44 px sur « Produits. / Mode. » ; même z-index que lui mais plus loin dans la page :
   elle passe dessus, et le tunnel (z-index 4) passe sur elle. */
.sc-objets {
  z-index: 3; margin-top: -44px; border-radius: 44px 44px 0 0;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 -34px 60px -44px rgba(20, 18, 23, .35);
  padding: clamp(88px, 12vh, 132px) 0 clamp(84px, 11vh, 120px);
}
.ob-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 64px; }
.ob-head h2 { font-size: clamp(44px, 5.6vw, 92px); font-weight: 500; line-height: .92; letter-spacing: -.055em; }
.ob-head p { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--ink-2); padding-bottom: 6px; }

/* Le rayon court d'un bord à l'autre de l'écran. --ob-s : agrandissement de la carte au centre.
   Hauteur : place de la puce au-dessus + carte du centre + place de l'étiquette dessous. */
.ob-stage {
  --ob-w: clamp(150px, 21vw, 300px); --ob-s: 1.3; --ob-gap: 24px; --ob-top: 28px;
  position: relative; margin-top: clamp(36px, 6vh, 60px);
  height: calc(var(--ob-top) + var(--ob-w) * var(--ob-s) + 58px);
}
.ob-card {
  position: absolute; left: 0; top: 0; width: var(--ob-w); aspect-ratio: 1 / 1;
  border-radius: 6px; background: var(--bg); transform-origin: 50% 100%; will-change: transform;
  box-shadow: 0 0 0 1px rgba(20, 18, 23, .07), 0 34px 60px -30px rgba(20, 18, 23, .5), 0 2px 8px rgba(20, 18, 23, .06);
}
.ob-canvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }

/* Poste central : la puce IA au-dessus, la catégorie du produit dessous */
.ob-chip {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--ob-top) - 15px);
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px 0 10px; border-radius: 999px; white-space: nowrap;
  background: var(--grad); background-size: 125% 100%; color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 8px 20px -8px rgba(136, 3, 153, .8);
}
.ob-chip svg { width: 15px; height: 15px; }
.ob-cat {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--ob-top) + var(--ob-w) * var(--ob-s) + 20px);
  font-size: 12px; color: var(--ink);
}
.ob-cat .kin-w { justify-self: center; }

@media (max-width: 760px) {
  .sc-objets { margin-top: -28px; border-radius: 28px 28px 0 0; }
  .ob-stage { --ob-w: 46vw; --ob-s: 1.32; --ob-gap: 14px; }
  .ob-card { border-radius: 5px; }
}