/* "Ce qui fait la différence" constellation — full rebuild (explicit
   direction: the previous pass was too small/cramped, its connectors
   read as improvised lines rather than real arrows, and the center used
   the decorative rocket instead of the real brand mark). Quote (small,
   italic, a thin gradient rule on its left edge — not a big box, not
   giant decorative quote marks), small heading (same gradient-highlight
   class as the H1, .page-title-highlight, just smaller), then the real
   constellation: the actual IACINE TECH logo (/logo.webp) with its
   breathing halo, and the 5 qualities in a balanced pentagon around it.
   No connectors and no ring around the logo (explicit direction —
   removed after review; the pentagon layout alone reads clearly without
   them). Desktop-only absolute-positioned "orbit" (below 1024px this
   collapses to a plain 2-column card grid — page-split.css itself only
   ever splits into two columns at 1024px+). */

.skills-quote {
  margin: clamp(28px, 3vh, 36px) 0 0;
  padding-left: 16px;
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, #3f7bf8, #b86bf8) 1;
  font-family: var(--font-satoshi);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--li-text-secondary, rgba(255, 255, 255, 0.6));
  max-width: 42ch;
}

@media (min-width: 1024px) {
  .skills-quote {
    text-align: left;
  }
}

/* Deliberately smaller than the H1 (22-26px, explicit direction) — same
   Satoshi voice as .page-title since it's still part of the same left
   column, just lighter. Clearly separated from the quote above it
   (24-32px, explicit direction — the two used to read as glued
   together). */
.skills-constellation-heading {
  margin: clamp(24px, 2.6vh, 32px) 0 0;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: #fff;
}

@media (min-width: 640px) {
  .skills-constellation-heading {
    font-size: 24px;
  }
}

@media (min-width: 1024px) {
  .skills-constellation-heading {
    font-size: 25px;
    text-align: left;
  }
}

/* ---- Base (mobile-first): the same real circle as desktop, just at a
   smaller scale (explicit direction — "fais pareil un rond pour la
   version téléphone", replacing the earlier 2+3 flex-wrap grid). Square
   box, logo centered inside it via absolute positioning (not the old
   margin: 0 auto 24px block-flow logo), qualities positioned around it
   at the same exact 72°-spaced angles as desktop — only the box size and
   item width scale down between the two; the position percentages
   themselves are identical at every width (see the shared
   .skills-quality--* rules below), since they're just points on a
   circle, independent of how big that circle is. */
.skills-orbit {
  position: relative;
  width: min(320px, calc(100vw - 48px));
  height: min(320px, calc(100vw - 48px));
  margin: 60px auto 0;
}

.skills-orbit__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  margin: 0;
}

.skills-orbit__img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Same breathing halo as before — opacity + scale only, no rotation/
   translation of the logo itself, very slow (6.5s). */
.skills-orbit__halo {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(32px);
  pointer-events: none;
}

.skills-orbit__halo--blue {
  background: radial-gradient(circle, rgba(63, 123, 248, 0.55), transparent 70%);
  animation: skills-orbit-pulse 6.5s ease-in-out infinite;
}

.skills-orbit__halo--violet {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(184, 107, 248, 0.5), transparent 70%);
  animation: skills-orbit-pulse 6.5s ease-in-out infinite -3.25s;
}

@keyframes skills-orbit-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.98);
  }
  50% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skills-orbit__halo {
    animation: none;
    opacity: 0.75;
  }
}

.skills-qualities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}

.skills-quality {
  position: absolute;
  min-width: 0;
  width: 108px;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* A real circle at every width (explicit direction: "fais pareil un rond
   pour la version téléphone") — 5 points spaced by an exact 72° on a
   circle of radius 40% of .skills-orbit's own box, computed from
   x = 50% + R·sin(θ), y = 50% - R·cos(θ), θ = 0°/72°/144°/216°/288°
   clockwise from the top. Précis sits at θ=0 (top); Curieux/Créatif fall
   at ±72° (upper sides); Autonome/Solutionniste at ±144° (lower sides).
   Percentages only, so this same block works for both the small mobile
   box and the bigger desktop one below — only .skills-orbit's own size
   and .skills-quality's own width change between the two; every item
   anchors by its own center (`transform: translate(-50%, -50%)` above)
   so all 5 stay at an identical, equal distance from the logo at any
   size. */
.skills-quality--precise {
  top: 10%;
  left: 50%;
}

.skills-quality--curious {
  top: 37.6%;
  left: 12%;
}

.skills-quality--creative {
  top: 37.6%;
  left: 88%;
}

.skills-quality--autonomous {
  top: 82.4%;
  left: 26.5%;
}

.skills-quality--solutionist {
  top: 82.4%;
  left: 73.5%;
}

.skills-quality__num {
  display: block;
  font-family: var(--font-satoshi);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  background: linear-gradient(270.04deg, #3f7bf8 0.04%, #b86bf8 99.96%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: filter 0.2s ease;
}

.skills-quality__title {
  display: block;
  margin-top: 2px;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  transition: text-shadow 0.2s ease;
}

.skills-quality__text {
  margin: 3px 0 0;
  font-family: var(--font-satoshi);
  font-size: 11.5px;
  line-height: 1.28;
  color: var(--li-text-secondary, rgba(255, 255, 255, 0.6));
}

/* ---- Narrowest phones (<360px, e.g. 320px): one more size-down tier.
   At the base mobile size above, the longer quality descriptions (which
   vary in length — "Créatif"'s is longer than "Curieux"'s, so they don't
   wrap to the same number of lines) made Précis's box tall enough to
   overlap the upper-ring items at this width specifically (found and
   fixed by direct measurement — 375px and up already had zero overlap at
   the base size). A smaller box + smaller item width + tighter type
   fixes it — verified 0 overlap and ~9px of clearance on both edges at
   320px, still a real, evenly-spaced circle (same percentages, same 72°
   math), just scaled down further for the tightest screens. */
@media (max-width: 359px) {
  .skills-orbit {
    width: 265px;
    height: 265px;
  }

  .skills-quality {
    width: 100px;
  }

  .skills-quality__title {
    margin-top: 1px;
  }

  .skills-quality__text {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.15;
  }
}

/* ---- Desktop (>=1024px): the same circle, just bigger — box size and
   item width scale up, the position percentages above stay untouched. ---- */
@media (min-width: 1024px) {
  /* Square box now (was 400x345) — a real circle needs equal width and
     height, an ellipse can't hold 5 evenly-spaced points at an equal
     visual distance from the center (explicit direction: "un vrai rond
     ... équilibrés parfaitement"). Fixed dimensions, not aspect-ratio —
     real CSS Grid intrinsic-sizing bug found and fixed earlier this pass
     (aspect-ratio tied to the column's own fr-based width tripped a grid
     auto-row-sizing quirk that inflated .skills-intro past .skills-
     feed's height and broke the sticky math further down the page).
     "conserve ses proportions" is trivially satisfied either way since
     the box is always the same fixed size regardless of the column's
     exact width (35-38%). */
  .skills-orbit {
    width: 400px;
    max-width: 100%;
    height: 400px;
    /* Centered horizontally, then nudged left (explicit direction:
       "décale un peu vers la gauche") — real bug found and fixed earlier
       this pass: the box was flush-left by default, and the intro column
       (~478px at common desktop widths) is wider than the fixed 400px
       orbit, so the leftover asymmetric slack pushed the leftmost circle
       point (Curieux) 10px past the actual viewport edge, genuinely
       clipping its text. Centering first restores even slack on both
       sides (~39px each at 478px); translateX then reclaims some of the
       right-side half of that slack to shift the whole circle left,
       comfortably clear of the edge that caused the original bug. Top
       margin bumped from 32px, then 64px (explicit direction — more room
       above the logo/halo now that it directly follows the subtitle). */
    margin: 84px auto 0;
    transform: translateX(-24px);
  }

  /* Logo: 100px (within the requested 88-108px range), well above the
     previous pass's presence — bigger halo scale to match. */
  .skills-orbit__logo {
    width: 100px;
    height: 100px;
  }

  .skills-quality {
    width: 148px;
  }

  /* Restores the original, slightly roomier values back up to their
     pre-mobile-circle sizing — the smaller mobile box needed a tighter
     footprint (smaller text, tighter line-height and margins) to avoid
     the qualities' text overlapping each other; desktop has the room to
     keep the original spacing untouched. */
  .skills-quality__title {
    margin-top: 3px;
  }

  .skills-quality__text {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  /* Hover/focus-within: number gains the gradient fill (already has it —
     this just intensifies it), title gets a soft halo, max 1-2px shift
     (explicit direction, nothing bigger). The quality itself is not
     interactive (no href/button), so this only needs :hover — there is
     nothing to focus. Every item shares the same translate(-50%, -50%)
     anchor now, so hover only needs one shared rule (no more per-item
     override). */
  .skills-quality:hover {
    transform: translate(-50%, -50%) translateY(-2px);
  }

  .skills-quality:hover .skills-quality__num {
    filter: brightness(1.3) saturate(1.2);
  }

  .skills-quality:hover .skills-quality__title {
    text-shadow: 0 0 14px rgba(139, 92, 246, 0.55);
  }

  @media (prefers-reduced-motion: reduce) {
    .skills-quality {
      transition: none;
    }
  }
}