/* ============================================================
   RESPONSIVE — tablet, mobile
   ============================================================ */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__aside { max-width: 380px; }
  .status-card { left: auto; right: 6%; }
  .about__grid,
  .skills__layout,
  .veille__grid,
  .contact__grid,
  .project-layout { grid-template-columns: 1fr; }
  .about__sticky, .project-aside { position: static; }
  .project-aside { order: -1; }
}

@media (max-width: 760px) {
  :root { --nav-h: 60px; }

  /* Nav collapses to logo + burger; links become a sheet.
     Neutralise the transform so fixed children map to the viewport,
     not to the nav's (transformed) containing block. */
  .nav { left: 12px; right: 12px; width: auto; transform: none; padding: 8px 8px 8px 16px; gap: var(--sp-3); }

  /* When scrolled, backdrop-filter would make .nav a containing block
     for the position:fixed menu sheet (breaking it). Use a solid glass
     background instead so the full-screen sheet stays anchored to the viewport. */
  .nav.is-scrolled {
    background: rgba(11, 13, 18, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-6);
    background: rgba(8,9,12,0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--hairline);
    transform: translateX(100%);
    transition: transform var(--dur-3) var(--ease-emph);
    z-index: var(--z-overlay);
  }
  .nav.is-open .nav__links { transform: translateX(0); }
  .nav__link { padding: 0.9em 1em; font-size: var(--fs-body); }
  .nav__cta { display: none; }
  .nav__burger {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-left: auto;
    z-index: calc(var(--z-overlay) + 1);
    position: relative;
  }
  .nav__burger span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2); }
  .nav__burger span + span { margin-top: 5px; }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .form-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .company-hero__top { gap: var(--sp-4); }
  .project-row { grid-template-columns: auto 1fr; }
  .project-row__arrow { display: none; }
  .hero__roles { flex-wrap: wrap; }
  .status-card { position: static; margin-top: var(--sp-4); display: inline-flex; }
  .hero__aside { max-width: none; }
}

@media (max-width: 480px) {
  .cube-grid { grid-template-columns: 1fr; }
  .cube { width: 60%; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions .btn { width: auto; }
}

/* Reduced transparency preference */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled, .status-card, .nav__links { backdrop-filter: none; background: var(--bg-raised); }
}