/* Accueil : une IA de détection pour plusieurs plateformes. */
.hero { background: #111a20; }
.hero-photo {
  background-image: linear-gradient(90deg, rgba(12,19,25,.44) 0%, rgba(12,19,25,.18) 42%, rgba(12,19,25,0) 70%), url('assets/hero-ia-photorealiste.png');
  background-position: center;
  background-size: cover;
}
.hero-grid { opacity: .35; mask-image: linear-gradient(to right, black, transparent 43%); }
.hero-content h1 { max-width: min(48%, 630px); font-size: clamp(44px, 4.8vw, 76px); }
.hero-content p { max-width: min(43%, 540px); }
.hero-content .actions { flex-wrap: wrap; }
@media (min-width: 1001px) and (max-width: 1250px) {
  .hero-content h1 { max-width: 53%; font-size: clamp(42px, 5vw, 58px); }
  .hero-content p { max-width: 49%; }
  .hero-photo { background-position: 58% center; }
}
@media (max-width: 1000px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; height: auto; max-height: none; }
  .hero-content { order: 1; padding: 52px 0 40px; }
  .hero-content h1 { max-width: 100%; font-size: clamp(42px, 7vw, 62px); }
  .hero-content p { max-width: 100%; }
  .hero-photo { position: relative; order: 2; inset: auto; width: 100%; height: clamp(245px, 54vw, 480px); background-image: url('assets/hero-ia-photorealiste.png'); background-position: right center; background-size: cover; }
  .hero-grid { bottom: auto; height: 50%; }
  .hero-bottom { display: none; }
}

/* Le visuel D.A.P. reste visible dans sa section dédiée. */
.dap-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 80% center; }

/* Mouvement lent et balayage discret de la zone d'analyse. */
.hero-photo {
  overflow: hidden;
  transform-origin: 72% 50%;
  animation: hero-scene-drift 26s ease-in-out infinite alternate;
}
.hero-photo::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 46%;
  right: 2%;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(169, 218, 243, .5), transparent);
  box-shadow: 0 0 10px rgba(139, 203, 237, .24);
  animation: hero-analysis-sweep 9s ease-in-out infinite;
}
@keyframes hero-scene-drift {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
@keyframes hero-analysis-sweep {
  0%, 100% { top: 12%; opacity: 0; }
  10% { opacity: .55; }
  60% { top: 88%; opacity: .4; }
  70% { top: 88%; opacity: 0; }
}
@media (max-width: 1000px) {
  .hero-photo { transform-origin: center top; }
  .hero-photo::after { left: 28%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; transform: none; }
  .hero-photo::after { animation: none; display: none; }
}

/* Les contours reprennent les coordonnées de l'image pour suivre son cadrage. */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1672 941'%3E%3Crect x='1008' y='446' width='78' height='65' fill='none' stroke='%239bdcff' stroke-width='4'/%3E%3Crect x='1192' y='344' width='105' height='83' fill='none' stroke='%239bdcff' stroke-width='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .22;
  animation: detection-flicker 3.8s ease-in-out infinite;
}
@keyframes detection-flicker {
  0%, 100% { opacity: .16; }
  16% { opacity: .28; }
  22% { opacity: .78; }
  27% { opacity: .36; }
  34% { opacity: .7; }
  47% { opacity: .24; }
  70% { opacity: .3; }
  75% { opacity: .68; }
  82% { opacity: .2; }
}
@media (min-width: 1001px) and (max-width: 1250px) {
  .hero-photo::before { background-position: 58% center; }
}
@media (max-width: 1000px) {
  .hero-photo::before { background-position: right center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo::before { animation: none; opacity: 0; }
}