/* ─────────────────────────────────────────────────────────────
   AES Audiovisual — Site-wide mobile/tablet/a11y fixes
   Loaded on all secondary pages (prestation, location,
   integration, engineering, highlights, webshop, contact,
   mentions-legales). Index.html has its own optimized CSS.
   2026-05-24
   ───────────────────────────────────────────────────────────── */

/* Touch targets WCAG 2.5.5 / Apple HIG min 44x44px */
.nav-burger,
#navBurger,
.hamburger,
#hbg {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 12px !important;
  justify-content: center !important;
  align-items: center !important;
}

.nav-burger span,
.hamburger span {
  width: 24px !important;
  height: 2px !important;
}

/* Footer & icon links touch targets */
.social-btn,
.c-icon {
  min-width: 44px;
  min-height: 44px;
}

/* iPad portrait & landscape breakpoint (768–1024px) */
@media (min-width: 901px) and (max-width: 1180px) {
  nav,
  #navbar,
  #mainNav,
  #nav {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .nav-links {
    gap: 1.1rem !important;
  }
  .nav-links a {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
  }
  .page-hero,
  .contact-wrap,
  .eng-hero {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Small tablet / large phone (601–900px) */
@media (max-width: 900px) and (min-width: 601px) {
  .pillars-grid,
  .domain-inner,
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Reduced-motion — disable particles, noise, heavy animations */
@media (prefers-reduced-motion: reduce) {
  #particles-canvas,
  canvas#particles-canvas,
  .noise {
    display: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reduce particles cost on small screens (default = battery friendly) */
@media (max-width: 600px) {
  #particles-canvas,
  canvas#particles-canvas {
    opacity: 0.4;
  }
  .noise {
    opacity: 0.015 !important;
  }
  /* Slightly larger tap area for mobile nav items */
  .nav-mobile a,
  .mob-nav a {
    padding: 0.6rem 1rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* iOS safe-area (notch / Dynamic Island) — used with viewport-fit=cover */
@supports (padding: max(0px)) {
  nav,
  #navbar,
  #mainNav,
  #nav {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Improve text legibility on retina/mobile */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────
   FALLBACK reveal animation
   Si IntersectionObserver tarde ou ne fire pas (cas connu sur certains
   browsers / quand l'élément est déjà dans le viewport au load),
   on force la révélation après 1.5s pour éviter du contenu invisible.
   L'observer reste prioritaire — quand .visible est ajouté avant
   1.5s, la transition CSS .reveal.visible prend le relais et ce
   fallback n'a pas le temps de tourner.
   ───────────────────────────────────────────────────────────── */
@keyframes aes-fallback-reveal {
  0%   { opacity: 0; }
  100% { opacity: 1; transform: none; }
}
.reveal:not(.visible),
.reveal-l:not(.visible),
.reveal-r:not(.visible) {
  animation: aes-fallback-reveal 0.7s ease 1.2s forwards;
}
/* Sur prefers-reduced-motion, on affiche tout immédiatement */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-l,
  .reveal-r {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Prevent zoom on input focus iOS (font-size must be ≥16px) */
@media (max-width: 600px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}