/* ==========================================================================
   Scène du hero de l'accueil (05/11/2026) : panneau bleu nuit, mot qui tourne,
   cerveau intégré au décor, terminal MCP, halo qui suit la souris.
   Sans JavaScript ou avec « réduire les animations » : tout est visible et immobile.
   ========================================================================== */
#hero.bc-hero-scene { position: relative; isolation: isolate; padding: 72px 0 88px; margin: 8px 0 0; overflow: hidden; }
#hero.bc-hero-scene::before {
  content: ""; position: absolute; inset: 0 24px; z-index: -2; border-radius: 36px;
  background:
    radial-gradient(900px 520px at 85% 20%, rgba(0, 152, 243, .35), transparent 60%),
    radial-gradient(700px 480px at 10% 90%, rgba(255, 165, 0, .16), transparent 60%),
    radial-gradient(600px 400px at 45% 0%, rgba(79, 192, 255, .18), transparent 65%),
    linear-gradient(160deg, #0d2257 0%, #08132f 55%, #050c22 100%);
  background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100%;
  box-shadow: 0 40px 90px rgba(5, 12, 34, .35);
}
/* Grille fine + halo qui suit la souris (--mx / --my posés par le script). */
#hero.bc-hero-scene::after {
  content: ""; position: absolute; inset: 0 24px; z-index: -1; border-radius: 36px; pointer-events: none;
  background:
    radial-gradient(420px 420px at var(--mx, 70%) var(--my, 35%), rgba(79, 192, 255, .16), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
}
#hero.bc-hero-scene .container { position: relative; padding-left: 48px; padding-right: 48px; }

/* Textes sur fond sombre */
html body #hero.bc-hero-scene h1:not(#bc) { color: #fff; }
#hero.bc-hero-scene h1 .bc-degrade, #hero.bc-hero-scene h1 .bc-mot {
  background: linear-gradient(90deg, #4fc0ff, #8fe0ff 40%, #ffb84d 70%, #4fc0ff);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
#hero.bc-hero-scene h1 .bc-mot { display: inline-block; min-width: 4ch; }
html body #hero.bc-hero-scene h2:not(#bc) { color: #c4d2ef; }
html body #hero.bc-hero-scene .col-lg-7 > p:first-child:not(#bc) { background: rgba(255, 255, 255, .1); color: #e8eefc; border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
#hero.bc-hero-scene .bc-accroches a { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }
#hero.bc-hero-scene .bc-accroches a:hover { background: rgba(255, 255, 255, .14); border-color: #4fc0ff; color: #fff; }
#hero.bc-hero-scene .btn-get-started { background: #ffa500; box-shadow: 0 14px 36px rgba(255, 165, 0, .35); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
#hero.bc-hero-scene .btn-get-started span { color: #0b1b3f; font-weight: 800; }
#hero.bc-hero-scene .btn-get-started:hover { box-shadow: 0 18px 44px rgba(255, 165, 0, .5); }
#hero.bc-hero-scene .bc-hero-lien { color: #fff; }
#hero.bc-hero-scene .bc-hero-lien:hover { color: #8fe0ff; }

/* Cerveau fondu dans le décor + halo */
#hero.bc-hero-scene .hero-img { perspective: 1200px; }
.bc-scene-visuel { position: relative; transform-style: preserve-3d; transition: transform .3s ease-out; }
.bc-scene-visuel::before {
  content: ""; position: absolute; inset: 8% 12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 152, 243, .55), transparent 65%); filter: blur(30px);
}
#hero.bc-hero-scene .bc-hero-visuel {
  border-radius: 28px; box-shadow: none; aspect-ratio: 16 / 10;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 55% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 55% 50%, #000 45%, transparent 100%);
}

/* Terminal MCP */
.bc-terminal {
  position: absolute; right: -2%; bottom: -6%; width: min(350px, 92%); padding: 12px 14px 14px; border-radius: 16px;
  background: rgba(8, 19, 47, .82); border: 1px solid rgba(143, 224, 255, .25); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.45;
  transform: translateZ(60px);
}
.bc-terminal__barre { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; color: #8fa6d8; font-size: .7rem; }
.bc-terminal__barre i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; }
.bc-terminal__barre i:nth-child(2) { background: #ffc84a; } .bc-terminal__barre i:nth-child(3) { background: #3ccf7a; margin-right: 6px; }
.bc-terminal__ligne { margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e8eefc; }
.bc-terminal__ligne--question::before { content: "› "; color: #ffb84d; }
.bc-terminal__ligne--outil { color: #8fe0ff; }
.bc-terminal__ligne--outil::before { content: "⚙ "; }
.bc-terminal__ligne--ok { color: #7ff0b0; }
.bc-terminal__ligne--ok::before { content: "✓ "; }

@media (prefers-reduced-motion: no-preference) {
  #hero.bc-hero-scene::before { animation: bc-scene-mesh 18s ease-in-out infinite alternate; }
  #hero.bc-hero-scene h1 .bc-degrade, #hero.bc-hero-scene h1 .bc-mot { animation: bc-scene-degrade 6s linear infinite; }
  .bc-scene-visuel::before { animation: bc-scene-halo 4.5s ease-in-out infinite; }
  .bc-scene-visuel { animation: bc-scene-flotte 7s ease-in-out infinite; }
  /* Terminal : les lignes s'écrivent une à une, en boucle (12 s). */
  .bc-terminal__ligne { animation: bc-scene-tape 12s steps(36, end) infinite both; }
  .bc-terminal__ligne--outil { animation-delay: 1.6s; }
  .bc-terminal__ligne--ok { animation-delay: 3.2s; }
  .bc-mot.est-sortant { animation: bc-scene-mot-sort .35s ease forwards, bc-scene-degrade 6s linear infinite; }
  .bc-mot.est-entrant { animation: bc-scene-mot-entre .45s cubic-bezier(.2, .8, .2, 1) both, bc-scene-degrade 6s linear infinite; }
}
@keyframes bc-scene-mesh { from { background-position: 0% 0%, 100% 100%, 50% 0%, 0 0; } to { background-position: 100% 60%, 0% 40%, 30% 100%, 0 0; } }
@keyframes bc-scene-degrade { to { background-position: -250% 0; } }
@keyframes bc-scene-halo { 0%, 100% { opacity: .7; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes bc-scene-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes bc-scene-tape { 0% { max-width: 0; } 18% { max-width: 100%; } 88% { max-width: 100%; opacity: 1; } 96%, 100% { max-width: 100%; opacity: 0; } }
@keyframes bc-scene-mot-sort { to { opacity: 0; transform: translateY(-.35em); filter: blur(4px); } }
@keyframes bc-scene-mot-entre { from { opacity: 0; transform: translateY(.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

@media (max-width: 991px) {
  #hero.bc-hero-scene { padding: 40px 0 48px; }
  #hero.bc-hero-scene::before, #hero.bc-hero-scene::after { inset: 0 10px; border-radius: 26px; }
  #hero.bc-hero-scene .container { padding-left: 28px; padding-right: 28px; }
  .bc-terminal { right: 4%; bottom: -8%; width: 92%; }
  #hero.bc-hero-scene .hero-img { margin-bottom: 24px; }
}
/* Les paragraphes du hero sont des pastilles bleues (style.css) : pas dans le terminal. */
html body #hero .bc-terminal p.bc-terminal__ligne:not(#bc) { background: none; border: 0; border-radius: 0; padding: 0; width: auto; max-width: 100%;
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 500; text-align: left; letter-spacing: 0; backdrop-filter: none; }
html body #hero .bc-terminal p.bc-terminal__ligne--question:not(#bc) { color: #e8eefc; }
html body #hero .bc-terminal p.bc-terminal__ligne--outil:not(#bc) { color: #8fe0ff; }
html body #hero .bc-terminal p.bc-terminal__ligne--ok:not(#bc) { color: #7ff0b0; }