/* WELABS — the colorful variant of the site: index-v3.html (the homepage)
   plus every interior page (offres.html, projets.html, contact.html, etc.).
   index-v2.html deliberately stays monochrome as the comparison reference.
   Additive on top of style-v2.css (+ style-v3.css on the homepage), loaded
   last so these rules win the cascade without editing any shared file. The
   accent colors are lifted directly from the constellation's nebula glow
   (see .constellation__sticky in style-v3.css) so the color feels sourced
   from the starry-sky moment rather than bolted on separately. */

:root {
  --site-accent-a: #5a70de;
  --site-accent-b: #934ec8;
  --site-accent-grad: linear-gradient(90deg, var(--site-accent-a), var(--site-accent-b));
}

/* Hero headline accent word — was weight-only (no color at all, by
   original design); here it gets the gradient treatment instead. */
.text-accent {
  font-weight: 700;
  background: var(--site-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary buttons — gradient instead of flat black. */
.btn--primary {
  background: var(--site-accent-grad);
  border-color: transparent;
}
.btn--primary:hover {
  background: linear-gradient(90deg, #4a5fd0, #7f3fb8);
  box-shadow: 0 10px 26px -10px rgba(90, 112, 222, 0.55);
}

/* Ghost buttons — blue-tinted instead of neutral gray. */
.btn--ghost {
  border-color: rgba(90, 112, 222, 0.35);
  color: var(--site-accent-a);
}
.btn--ghost:hover {
  border-color: var(--site-accent-a);
  background: rgba(90, 112, 222, 0.06);
}
/* .btn--ghost-light sits on the constellation's dark backdrop (the CTA at
   the end of the scroll moment) — keep it light by default, tint on hover.
   Redeclared here (not just style-v3.css) so it wins the tie against the
   .btn--ghost color rule above: same specificity, later in source order. */
.btn--ghost-light {
  color: #fff;
}
.btn--ghost-light:hover {
  border-color: rgba(147, 168, 255, 0.85);
  background: rgba(90, 112, 222, 0.18);
  color: #fff;
}

/* AI live demo — user bubble, input focus and the active mode tab pick up
   the same gradient/blue (the mic control already gets it — see
   .ai-live__ctrl--mic.is-active in style-v3.css, no override needed). */
.ai-live__bubble--user {
  background: var(--site-accent-grad);
}
.ai-live__input:focus {
  border-color: var(--site-accent-a);
  box-shadow: 0 0 0 3px rgba(90, 112, 222, 0.15);
}
.ai-live__live-dot {
  background: linear-gradient(135deg, var(--site-accent-a), var(--site-accent-b));
  box-shadow: 0 0 0 3px rgba(90, 112, 222, 0.18);
}

/* Footer social icons — colored hover instead of plain white tint. */
.footer-social__link:hover {
  background: linear-gradient(135deg, rgba(90, 112, 222, 0.55), rgba(147, 78, 200, 0.55));
}

/* Contact page form — same blue focus ring as the chat demo input. */
.field input:focus, .field textarea:focus {
  border-color: var(--site-accent-a);
  box-shadow: 0 0 0 3px rgba(90, 112, 222, 0.12);
}