/*╭━━━━━━━━━━╯ DÉBUT RWD (petits écrans) ╰━━━━━━━━━━╮*/
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
}

/*╭━━━━━━━━━━╯ DÉBUT Smartphone & Tablette (≤1024px) — empilage formulaire + header compact ╰━━━━━━━━━━╮*/
@media (max-width: 1024px){
  /* Navigation burger */
  .main-nav{
    display:none;flex-direction:column;gap:.25rem;
    padding:.5rem;background:var(--card);
    position:absolute;right:1rem;top:64px;border:1px solid var(--border);border-radius:16px
  }
  .main-nav.open{display:flex}
  .hamburger{display:inline-block}

  /* Hero + conteneur plus compacts */
  .site-main{ padding:1rem .9rem; }
  .hero{ padding:1.25rem 1rem; text-align:left; }
  .hero h1{ font-size:1.45rem; line-height:1.3; word-break:break-word; }
  .brand .logo{ height:40px; }

  /*╭━━━━━━━━━━╯ DÉBUT Empilage du formulaire (corrige champs hors cadre) ╰━━━━━━━━━━╮*/
  /* On coupe la logique "ligne" des .row à l’intérieur d’un .form */
  .form .row{
    display:block !important;      /* au lieu de flex */
  }
  /* Chaque enfant occupe la largeur totale */
  .form .row > *{
    width:100% !important;
    max-width:100% !important;
  }
  /* Les labels gardent leur mise en page verticale mais prennent 100% */
  .form label{
    width:100% !important;
    display:flex;
    flex-direction:column;
    gap:.35rem;
    margin:.25rem 0;
  }
  /* Les champs remplissent vraiment la ligne */
  .form input,
  .form select,
  .form textarea{
    width:100% !important;
  }
  /* Bouton large et facile à toucher */
  .form .btn{
    width:100%;
    max-width:420px;
  }
  /*╰━━━━━━━━━━╮ FIN Empilage du formulaire ╭━━━━━━━━━━╯*/

  /* CTA en colonne */
  .cta{flex-direction:column}
}
/*╰━━━━━━━━━━╮ FIN Smartphone & Tablette (≤1024px) ╭━━━━━━━━━━╯*/

/*╰━━━━━━━━━━╮ FIN RWD ╭━━━━━━━━━━╯*/