/* ACCUEIL — hero, « ma facon de travailler », bonus Multivers.
   Le reste (cartes, sections, boutons, ciel) vit dans public/css/site.css. */

.hero2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 13vh, 8.5rem) 0 clamp(3.5rem, 10vh, 6.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.hero2-in { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .hero2 { padding: 2.75rem 0 3.25rem; }
  .hero2-actions .btn { width: 100%; }
}

.hero2-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin: 0 0 1.4rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero2-hello { color: var(--text); letter-spacing: .08em; text-transform: none; font-weight: 600; }
/* Intitule de poste (phase 3) : la famille de metiers lisible des le premier
   ecran, sans concurrencer la phrase de positionnement. */
.hero2-job { color: var(--text); letter-spacing: .12em; }
.hero2-job::before { content: '·'; margin-inline-end: 1.1rem; color: var(--accent); }

.hero2-title {
  max-width: 15ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero2-lede {
  max-width: 44ch;
  margin: 1.5rem 0 0;
  color: color-mix(in srgb, var(--text) 84%, var(--text-muted));
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.55;
}
.hero2-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }

/* Domaines, dans l'ordre de la hierarchie du profil. Discrets : trois mots
   sous la phrase, jamais une liste de technologies. */
.hero2-focus {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.hero2-focus li {
  padding: .3rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-muted);
  font-size: .86rem;
  font-weight: 600;
}
.hero2-focus li:first-child { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text); }

.hero2-multi {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin-top: 1.4rem;
  color: var(--text-muted);
  font-size: .94rem;
  text-decoration: none;
}
.hero2-multi:hover { color: var(--text); }
.hero2-multi:hover .hero2-star { transform: rotate(45deg) scale(1.15); }
.hero2-star { display: inline-block; color: var(--accent); transition: transform .4s ease; }

/* Le halo du hero est plus present que celui des pages interieures. */
.hero2 .sky-halo { top: -42%; width: min(1400px, 190vw); }

/* Systeme en orbite (decor). Trajectoires = les ellipses du SVG, suivies par
   offset-path : une animation CSS, donc figee par le bloc reduced-motion de
   tokens.css. Chaque planete part d'un point different (--d) pour qu'a
   l'arret elles ne s'alignent pas. */
.orbits {
  position: absolute;
  top: 50%;
  inset-inline-end: max(1rem, calc((100vw - var(--wrap)) / 2 - 1rem));
  z-index: 0;
  width: 460px;
  height: 320px;
  transform: translateY(-46%) rotate(-12deg);
  pointer-events: none;
}
.orbits-rings { position: absolute; inset: 0; overflow: visible; }
.orbits-rings ellipse { fill: none; stroke: color-mix(in srgb, var(--text) 16%, transparent); stroke-width: 1; }
.orbits-rings ellipse:nth-child(2) { stroke-dasharray: 2 6; }
.orbits-sun {
  position: absolute;
  left: 230px;
  top: 160px;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff6df, #e6b450 45%, #b9751c 75%);
  box-shadow: 0 0 34px 10px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 90px 30px color-mix(in srgb, var(--accent) 16%, transparent);
}
.orbit-p {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  offset-rotate: 0deg;
  offset-distance: var(--d);
  animation: orbite var(--t) linear infinite;
}
.orbit-p1 {
  --d: 18%; --t: 22s;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  offset-path: path('M 138 160 a 92 34 0 1 0 184 0 a 92 34 0 1 0 -184 0');
  background: radial-gradient(circle at 35% 35%, #d9ccff, #7c5cff);
  box-shadow: 0 0 12px 2px rgba(124, 92, 255, .55);
}
.orbit-p2 {
  --d: 62%; --t: 38s;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  offset-path: path('M 78 160 a 152 58 0 1 0 304 0 a 152 58 0 1 0 -304 0');
  background: radial-gradient(circle at 35% 35%, #c6f3df, #2fb57a);
  box-shadow: 0 0 14px 2px rgba(76, 207, 138, .45);
}
.orbit-p3 {
  --d: 36%; --t: 60s;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  offset-path: path('M 12 160 a 218 84 0 1 0 436 0 a 218 84 0 1 0 -436 0');
  background: radial-gradient(circle at 35% 35%, #fff1d2, #e6b450);
  box-shadow: 0 0 12px 2px rgba(230, 180, 80, .5);
}
@keyframes orbite {
  from { offset-distance: var(--d); }
  to { offset-distance: calc(var(--d) + 100%); }
}
@media (max-width: 1080px) {
  .orbits { opacity: .45; inset-inline-end: -6rem; }
}
@media (max-width: 760px) {
  .orbits { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-p { animation: none !important; }
}

/* ------------------------------------------- ma facon de travailler (6 mots) */

.how-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.how-chips li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1.2rem .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
}
.how-n { color: var(--accent); font-family: var(--mono); font-size: .74rem; font-weight: 500; }

/* ---------------------------------------------------------- bonus Multivers */

.bonus {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--halo-2), transparent 60%),
    var(--surface);
}
.bonus-txt p { margin: .9rem 0 1.6rem; color: var(--text-muted); font-size: 1.04rem; line-height: 1.6; max-width: 46ch; }
.bonus-txt .kicker { margin-bottom: .7rem; }
.bonus-tile.tuile-multivers { aspect-ratio: 16 / 10; border-radius: 14px; }

@media (max-width: 760px) {
  .bonus { grid-template-columns: 1fr; }
  .bonus-tile { order: -1; }
}

/* ------------------------------------- phase 21 : le systeme est une entree */

.orbits { pointer-events: none; }
.orbits-sun, .orbit-p { pointer-events: auto; cursor: pointer; display: block; }
.orbits-sun::after, .orbit-p::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; } /* cible de clic plus large */
.orbits-sun { transition: transform .25s ease; }
.orbits-sun:hover, .orbits-sun:focus-visible { transform: scale(1.18); }
.orbit-p:hover, .orbit-p:focus-visible, .orbit-p.arme { animation-play-state: paused; z-index: 2; }
.orbit-p:hover, .orbit-p:focus-visible, .orbit-p.arme { filter: brightness(1.25); }
.orbits:has(.orbit-p:hover, .orbit-p:focus-visible, .orbit-p.arme) .orbit-p:not(:hover):not(:focus-visible):not(.arme) { opacity: .45; }
.orbits-sun:focus-visible, .orbit-p:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.orbit-tip {
  position: absolute;
  inset-inline-end: -6px; /* ancre au bord : evite de sortir de l'ecran a droite */
  bottom: 170%;
  display: none;
  flex-direction: column;
  gap: .1rem;
  min-width: max-content;
  padding: .35rem .6rem;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--text);
  font-size: .8rem;
  line-height: 1.25;
  text-align: center;
  transform: rotate(12deg); /* annule la rotation de .orbits */
  pointer-events: none;
}
.orbit-tip b { font-weight: 600; }
.orbit-tip i { font-style: normal; color: var(--muted, var(--text)); opacity: .85; }
.orbit-p:hover .orbit-tip, .orbit-p:focus-visible .orbit-tip, .orbit-p.arme .orbit-tip { display: flex; }

/* Entree : zoom du systeme vers le point clique, texte du hero estompe. */
.warp-sortie .orbits { transition: transform .5s cubic-bezier(.5, 0, .9, .4), opacity .5s ease; transform-origin: var(--warp-x, 50%) var(--warp-y, 50%); transform: translateY(-46%) rotate(-12deg) scale(7); opacity: 0; pointer-events: none; }
.warp-sortie .hero2-in, .warp-sortie .site-header { transition: opacity .35s ease; opacity: 0; }
.warp-sortie .sky-halo { transition: opacity .5s ease, transform .5s ease; transform: scale(1.4); opacity: 1; }
/* Retour : le systeme se re-deploie depuis le zoom. */
.warp-retour .orbits { animation: warp-retour .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes warp-retour {
  from { transform: translateY(-46%) rotate(-12deg) scale(5); opacity: 0; }
  to { transform: translateY(-46%) rotate(-12deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .warp-sortie .orbits, .warp-sortie .hero2-in, .warp-sortie .site-header, .warp-retour .orbits { transition: none; animation: none; }
}

/* Deux sorties du catalogue (projets, builds) : cote a cote, a la ligne si l ecran est etroit. */
.sec-more { display: flex; flex-wrap: wrap; gap: .6rem; }