/* ───────────────── Breakpoints ───────────────── */

/* ≥ 860px : grille de formulaire en colonnes */
@media (min-width: 860px){
  .contact form{grid-template-columns:1fr 1fr}
  .contact form label:nth-child(1),
  .contact form label:nth-child(2){grid-column:auto}
  .contact form label:nth-child(3),
  .contact form label:nth-child(4){grid-column:1 / -1}
  .contact form .btn,
  .contact form button{grid-column:1 / -1; justify-self:end}
}

/* ≤ 780px : mobile */
@media (max-width: 780px){
  /* Header & nav */
  .site-header{position:sticky; top:0; z-index:100}
  .site-header .container{position:relative; flex-direction:row; align-items:center}

  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center;
    gap:5px; width:42px; height:42px; border:1px solid rgba(255,255,255,.2);
    background:transparent; color:#fff; border-radius:10px; cursor:pointer; z-index:120;
  }
  .nav-toggle .line{display:block; height:2px; width:22px; background:#fff; transition:transform .2s ease, opacity .2s ease}
  .nav-toggle{ position: relative; z-index: 130; touch-action: manipulation; }

  .nav{
    position:absolute; right:1rem; top:64px;
    display:flex; flex-direction:column; gap:.5rem;
    background:var(--elev); padding:.8rem; border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    width:min(85vw, 280px); max-height:70vh; overflow:auto;
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:110;
  }
  .nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto}
  .nav a{display:block; padding:.6rem .7rem; margin:0}

  /* Effet croix */
  .nav-toggle[aria-expanded="true"] .line:nth-child(2){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .line:nth-child(3){opacity:0}
  .nav-toggle[aria-expanded="true"] .line:nth-child(4){transform:translateY(-7px) rotate(-45deg)}

  /* Parallax stable mobile */
  .hero{background-attachment:scroll}
  .hero-logo{width:clamp(160px, 50vw, 320px)}

  /* Lightbox hit areas plus grandes */
  .lightbox-close, .lightbox-prev, .lightbox-next{
    width:48px; height:48px; font-size:2.2rem;
  }

  .lang-switch{ margin-left:0; }
  .flag-btn{ width:calc(50% - .25rem); justify-content:center; }
  .nav .lang-switch{ gap:.5rem; }
}

/* Option : masquer le label EN/FR et ne garder que les drapeaux (en desktop) */
@media (min-width: 781px){
  .flag-label{ display:none; }
}