/* responsive-fixes.css — Audit 2026-05-04
 * Corrections responsive partagées entre toutes les pages.
 * Inclus juste avant </head> pour avoir priorité sur les <style> inline.
 */

/* ──────────────────────────────────────────────────────────────────────
 * 1. iOS Safari — background-attachment: fixed casse le rendu sur mobile.
 *    Sur les sections .avis, on retombe sur scroll en dessous de 1024px.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .avis {
    background-attachment: scroll !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 2. Formulaires — grilles 2 ou 3 colonnes en style inline.
 *    Cassent l'affichage sous 600px (champs ~130px chacun).
 *    Bascule en 1 colonne pour rester lisible.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  form > div[style*="grid-template-columns: 1fr 1fr"],
  form > div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div.frm form > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 3. Grille tarifs — minmax(300px, 1fr) déborde sur écrans 320–360px.
 *    Permet aux cards de descendre à 280px.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .t-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 4. Lightbox — boutons prev/next/close < 44x44px (WCAG AA non conforme).
 *    Élargit la zone de tap sur écrans tactiles.
 * ────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .lb-btn,
  .lb-prev,
  .lb-next,
  .lb-close {
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 5. Préférence "reduced motion" — désactive les animations pour les
 *    utilisateurs sensibles (vestibulaires, troubles cognitifs).
 * ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .hero-ey,
  .hero-h1,
  .hero-p,
  .hero-btn {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .fade-in.visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 6. Header sur tablette — entre 600px et 1024px, le logo et le padding
 *    n'ont pas de breakpoint intermédiaire, ce qui peut faire chevaucher
 *    le hero.
 * ────────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 900px) {
  .nav img {
    height: 75px !important;
  }
}