/* ==========================================================================
   Section « métiers en cercle » (accueil) — variante isolée, à comparer
   Esprit : planche d'architecte (compas, rapporteur, bulles de repère)
   Taille, vitesse et couleur d'accent : réglages en haut de assets/js/services-orbit.js
   ========================================================================== */

.orbit {
  --orbit-bg: #262320;                         /* anthracite chaud */
  --orbit-ink: #f2ede7;                        /* blanc cassé */
  --orbit-muted: #aba49c;                      /* gris clair (contraste 7:1 sur le fond) */
  --orbit-line: rgba(242, 237, 231, 0.34);     /* traits fins */
  --orbit-faint: rgba(242, 237, 231, 0.14);    /* traits de construction */
  --orbit-accent: #c65a3d;                     /* brique / terracotta (remplacé par le réglage JS) */
  --orbit-accent-text: #e58a6c;                /* accent éclairci pour du texte sur fond foncé */
  --orbit-size: 640px;
  --orbit-bubble: 64px;

  position: relative;
  padding-block: var(--section);
  background-color: var(--orbit-bg);
  /* grille de dessin, à peine visible */
  background-image:
    linear-gradient(rgba(242, 237, 231, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 237, 231, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
  color: var(--orbit-ink);
  overflow: hidden;
}

.orbit-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--orbit-ink);
}
.orbit-title .grad { background-image: var(--grad-aube-clair); }
.orbit-lead { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.5; color: var(--orbit-muted); }

/* ---------------------------------------------- Sans JavaScript : simple liste */
.orbit-drawing,
.orbit-detail { display: none; }
.orbit-default { text-align: center; max-width: 34rem; margin: 0 auto var(--s5); }
.orbit-list { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.orbit-node { display: flex; align-items: center; gap: var(--s2); min-height: 48px; color: var(--orbit-ink); }
.orbit-bubble {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--orbit-bubble);
  height: var(--orbit-bubble);
  border: 1px solid var(--orbit-line);
  border-radius: 50%;
  background: var(--orbit-bg);
  color: var(--orbit-ink);
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), color 320ms var(--ease-out);
}
.orbit-icon { width: 24px; height: 24px; stroke-width: 1.4; }
.orbit-label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--orbit-muted); }

/* ---------------------------------------------- Avec JavaScript : le cercle */
.js .orbit-wrap {
  position: relative;
  width: min(var(--orbit-size), 100% - 340px);   /* place pour les noms autour */
  aspect-ratio: 1;
  margin-inline: auto;
}
.js .orbit-stage { position: absolute; inset: 0; }
.js .orbit-drawing { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-drawing * { fill: none; vector-effect: non-scaling-stroke; }
.orbit-circle { stroke: var(--orbit-line); stroke-width: 1; }
.orbit-construction { stroke: var(--orbit-faint); stroke-width: 1; stroke-dasharray: 3 6; }
.orbit-construction--outer { stroke-dasharray: 1 7; }
.orbit-ticks { stroke: var(--orbit-faint); stroke-width: 1; }
.orbit-cross { stroke: var(--orbit-line); stroke-width: 1; transition: opacity 280ms var(--ease-out); }
/* la pointe du compas s'efface quand le détail d'un métier occupe le centre */
@media (min-width: 640px) { .orbit.has-active .orbit-cross { opacity: 0; } }
.orbit-annotation line { stroke: var(--orbit-accent); stroke-width: 1; }
.orbit-annotation { opacity: 0; transition: opacity 280ms var(--ease-out); }
.orbit.has-active .orbit-annotation { opacity: 1; }

.js .orbit-list { display: block; position: absolute; inset: 0; }
.js .orbit-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; will-change: transform; }
.js .orbit-node { display: block; position: absolute; left: 0; top: 0; min-height: 0; }
.js .orbit-bubble { position: absolute; left: calc(var(--orbit-bubble) / -2); top: calc(var(--orbit-bubble) / -2); }
.js .orbit-label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  padding: 2px 0;
  pointer-events: none;
  transition: color 320ms var(--ease-out);
  will-change: transform;
}

/* Métier actif : couleur d'accent, texte droit */
.orbit-item.is-active .orbit-bubble { background: var(--orbit-accent); border-color: var(--orbit-accent); color: #fff; }
.orbit-item.is-active .orbit-label { color: var(--orbit-ink); }
.orbit-node:hover .orbit-bubble { border-color: var(--orbit-ink); }
.orbit-node:focus-visible { outline: none; }
.orbit-node:focus-visible .orbit-bubble { outline: 2px solid var(--orbit-ink); outline-offset: 4px; }

/* Centre : titre par défaut, ou détail du métier, en fondu */
.js .orbit-default,
.js .orbit-detail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
}
.js .orbit-default { pointer-events: none; }
.js .orbit-detail { display: block; opacity: 0; visibility: hidden; }
.orbit.has-active .orbit-default { opacity: 0; visibility: hidden; }
.orbit.has-active .orbit-detail { opacity: 1; visibility: visible; transition-delay: 0s; }
.orbit.has-active .orbit-default { transition-delay: 0s, 280ms; }
.orbit-detail.is-swapping { opacity: 0 !important; transition-duration: 140ms; }

.orbit-detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--orbit-ink);
}
.orbit-detail-text { margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.5; color: var(--orbit-muted); }
.orbit-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  margin-top: var(--s1);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orbit-accent-text);
}
.orbit-detail-link .icon { width: 1rem; height: 1rem; transition: transform 180ms var(--ease-out); }
.orbit-detail-link:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------- Tablette : cercle seul, noms au survol via le centre */
@media (max-width: 999px) {
  .js .orbit-wrap { width: min(var(--orbit-size), 100%); }
  .js .orbit-label { display: none; }
}

/* ---------------------------------------------- Mobile : titre au-dessus, détail en dessous */
@media (max-width: 639px) {
  .orbit { --orbit-bubble: 48px; }
  .js .orbit-wrap { width: 100%; aspect-ratio: auto; }
  .js .orbit-stage { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: var(--s4) auto; }
  .js .orbit-default,
  .js .orbit-detail { position: static; width: auto; transform: none; }
  .js .orbit-default { max-width: none; }
  .orbit.has-active .orbit-default { opacity: 1; visibility: visible; }
  .js .orbit-detail { min-height: 9.5rem; }
  .orbit-icon { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .orbit-default,
  .js .orbit-detail,
  .orbit-annotation { transition: none; }
}