/* ============================================================
   Amandine Viard — responsive.
   Le site est intégré en styles inline (hérité de la maquette
   Claude Design) : ces règles surchargent les styles inline via
   !important + sélecteurs d'attribut.
   - Toute grille inline passe en 1 colonne sur mobile, SAUF les
     éléments marqués data-grid (header, barres logo) qui gardent
     leur grille, et data-grid="2" qui garde 2 colonnes.
   ============================================================ */

/* ---------- Tablette (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  /* grilles de cartes 4 colonnes → 2 colonnes */
  [style*="repeat(4,1fr)"]:not([data-grid]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* grilles 3 colonnes → 2 colonnes (le 3e élément passe dessous) */
  [style*="repeat(3,1fr)"]:not([data-grid]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------- Mobile large / petite tablette (≤ 820px) ---------- */
@media (max-width: 820px) {
  body { overflow-x: hidden; }

  /* toutes les grilles inline → 1 colonne (hors data-grid) */
  [style*="grid-template-columns"]:not([data-grid]) {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  [data-grid="2"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* gouttières réduites */
  section[style*="padding"],
  section > div[style*="padding"],
  header > div,
  footer > div,
  [data-menu="fade"] > div,
  [data-menu="inner"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* titres */
  h1 span[style*="font-size:40px"],
  h1 span[style*="font-size:46px"] { font-size: 27px !important; }
  h1 span[style*="font-size:48px"],
  h1 span[style*="font-size:52px"] { font-size: 31px !important; }
  h2 { font-size: 27px !important; }

  /* header : logo réduit, lien texte masqué, boutons compacts */
  header img { height: 34px !important; }
  header [data-nav] a:first-child { display: none !important; }
  header [data-nav] a { padding: 10px 16px !important; }
  header > div { padding-top: 14px !important; padding-bottom: 14px !important; }

  /* menu overlay : entrées plus petites, colonne unique, aside sous la nav */
  [data-menu="inner"] { padding-top: 34px !important; gap: 44px !important; }
  [data-menu="inner"] nav a span:last-child { font-size: 26px !important; }
  [data-menu="inner"] nav a { padding: 12px 0 !important; }
  [data-menu="inner"] aside {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(198, 163, 90, 0.24);
    padding-top: 30px;
  }
  [data-menu="fade"] img { height: 34px !important; }

  /* cartes / encadrés : padding interne réduit */
  [style*="padding:42px 40px"] { padding: 28px 22px !important; }
  [style*="padding:38px 34px"] { padding: 28px 22px !important; }
  [style*="padding:34px 30px"] { padding: 26px 20px !important; }
  [style*="padding:42px 36px"] { padding: 28px 22px !important; }

  /* rangées flex (CTA, boutons) : autoriser le retour à la ligne */
  section [style*="display:flex"][style*="gap:30px"],
  section [style*="display:flex"][style*="gap:26px"],
  section [style*="display:flex"][style*="gap:28px"] {
    flex-wrap: wrap !important;
    row-gap: 18px !important;
  }

  /* cadres décoratifs décalés : réduire le débord pour éviter le scroll horizontal */
  [style*="inset:14px -14px"] { inset: 10px -8px -8px 10px !important; }
  [style*="inset:-14px 14px"] { inset: -8px 10px 10px -8px !important; }
}

/* ---------- Cibles tactiles (≤ 820px) ----------
   Recommandation WCAG 2.5.8 : 44px de côté. Les liens de l'en-tête étaient
   entre 30 et 34px — atteignables à la souris, pénibles au pouce. On agrandit
   la ZONE sans toucher au dessin : le logo et le téléphone gardent leur taille,
   c'est leur boîte cliquable qui grandit. */
@media (max-width: 820px) {
  header a,
  header [data-action="menu-open"],
  [data-menu="fade"] a,
  [data-menu="fade"] [data-action="menu-close"] {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  header [data-nav] a { justify-content: center !important; }
  .av-skip { min-height: 44px; display: flex; align-items: center; }

  /* Téléphone du hero et de la carte CTA : même logique. */
  .av-hero__tel, .av-cta-card__tel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* La note sous le bouton d'envoi passait à 12.5px : trop petit pour un
     paragraphe qui contient le numéro d'urgence. */
  .av-submit__note { font-size: 13.5px !important; }

  /* Listes de liens du footer : 17px de haut, soit trois cibles dans la
     largeur d'un pouce. On écarte les lignes plutôt que d'agrandir le texte,
     le dessin reste le même. */
  footer a { min-height: 40px; display: inline-flex; align-items: center; }

  /* Téléphone et e-mail, où qu'ils soient : ce sont les liens qu'on touche le
     plus sur mobile, et les plus petits (17 à 37px selon les pages). */
  a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; }

  /* Liens soulignés des pages héritées (styles inline) : on agrandit par le
     HAUT uniquement. Un `min-height` détacherait le soulignement du texte,
     puisque la ligne est un `border-bottom` porté par le lien lui-même. */
  a[style*="border-bottom:1px solid #C6A35A"] { display: inline-block; padding-top: 22px !important; }
}

/* ---------- En-tête sur petit écran (≤ 560px) ----------
   Burger + « MENU » + logo + « RÉSERVER » sur 375px : le logo se retrouvait
   écrasé à 30px de haut, illisible. Le mot « MENU » est redondant avec
   l'icône (qui garde son aria-label) : on le retire et on rend au logo la
   place gagnée. */
@media (max-width: 560px) {
  header [data-action="menu-open"] > span { display: none !important; }
  header > div { gap: 12px !important; }

  /* ⚠️ Le logo porte la marque ET le nom : c'est une image LARGE. À hauteur
     fixe, sa colonne (`auto` dans une grille 1fr/auto/1fr) réclame plus de
     place qu'il n'y en a, et l'image déborde SOUS le bouton « Réserver » —
     rien ne déborde de la page, donc aucun contrôle de scroll ne le voit.
     On la laisse donc se réduire : la hauteur devient un plafond, pas une
     consigne. */
  header > div > div:nth-child(2) { min-width: 0 !important; }
  header img {
    height: auto !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ---------- Petit mobile (≤ 400px) ---------- */
@media (max-width: 400px) {
  header > div { gap: 10px !important; }
  header [data-nav] a {
    padding: 9px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
  }
  /* 36px et non 30 : le mot « MENU » ayant disparu (≤560px), le logo a la
     place de rester lisible. */
  header img { height: 36px !important; }
  h1 span[style*="font-size:40px"],
  h1 span[style*="font-size:46px"] { font-size: 24px !important; }
  h1 span[style*="font-size:48px"],
  h1 span[style*="font-size:52px"] { font-size: 28px !important; }
  [data-menu="inner"] nav a span:last-child { font-size: 22px !important; }
}