/* Animations légères, avec contenu visible si JavaScript ou IntersectionObserver est indisponible. */
@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: hero-arrive 700ms cubic-bezier(.2,.65,.3,1) both; }
  .hero-bottom { animation: hero-bottom-arrive 850ms ease-out both; }
  .motion-js .motion-reveal {
    transition: opacity 620ms ease, transform 620ms cubic-bezier(.2,.65,.3,1);
    transition-delay: var(--motion-delay, 0ms);
  }
  .motion-js .motion-reveal:not(.is-visible):not(:focus-within) {
    opacity: 0;
    transform: translateY(14px);
  }
  .motion-js .motion-reveal:focus-within { opacity: 1; transform: none; transition-delay: 0ms; }
  @keyframes hero-arrive {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes hero-bottom-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Les repères restent alignés sur les cadres du visuel, sans intercepter les interactions. */
.hero-detection{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;opacity:.72}
.hero-detection .detection-frame{fill:none;stroke:#a7dce7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.35;filter:drop-shadow(0 0 3px rgba(123,210,228,.5))}
.hero-detection .detection-scan{stroke:#c0e8f0;stroke-width:1;opacity:0}
@media (prefers-reduced-motion:no-preference){
 .hero-detection .detection-frame{animation:detection-breathe 4.8s ease-in-out infinite}
 .hero-detection .detection-frame-b{animation-delay:-1.1s}
 .hero-detection .detection-frame-c{animation-delay:-2.2s}
 .hero-detection .detection-frame-d{animation-delay:-3.3s}
 .hero-detection .detection-scan{animation:detection-scan 5s ease-in-out infinite}
 .hero-detection .detection-scan-c{animation-delay:-2.5s}
 @keyframes detection-breathe{0%,100%{opacity:.18}45%,60%{opacity:.85}}
 @keyframes detection-scan{0%,20%{opacity:0;transform:translateY(0)}30%{opacity:.4}70%{opacity:.25}80%,100%{opacity:0;transform:translateY(42px)}}
}
/* Le cadrage mobile diffère : l’image conserve ses repères d’origine. */
@media(max-width:760px){.hero-detection{display:none}}
@media(prefers-reduced-motion:reduce){.hero-detection{display:none}}