/* ─────────────────────────────────────────────────────────────
   Ajustements téléphone — Vespra Event

   Le site s'adapte déjà à toutes les largeurs d'écran. Ce fichier ne
   corrige qu'un point : quelques titres et prix restaient dimensionnés
   pour l'ordinateur et paraissaient trop imposants sur un téléphone.

   Rien n'est modifié au-dessus de 560 px de large : l'affichage sur
   tablette et sur ordinateur reste exactement le même qu'avant.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {

  /* Titre d'accueil : la ville défile dedans, c'est l'accroche de la page,
     elle garde donc une taille affirmée sur téléphone. */
  .hero-h { font-size: clamp(33px, 9.6vw, 42px) !important; margin-bottom: 26px !important; }
  .hero-eye { margin-bottom: 14px !important; }

  /* Les deux boutons du haut restent côte à côte sur une seule ligne :
     le texte est réduit juste ce qu'il faut pour que « Demander un devis »
     tienne dans son contour, même sur un écran de 320 px. */
  .hero-cta { flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; }
  .hero-cta .btn-p,
  .hero-cta .btn-o {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 11px 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Titres de section */
  .sec-h,
  .prods-section .sec-h,
  .why .sec-h,
  .cta-engage h2 { font-size: clamp(24px, 6.8vw, 30px) !important; }

  /* Fiches produit : le prix principal était fixé à 52 px, quelle que
     soit la largeur de l'écran. */
  .prod-title { font-size: clamp(26px, 7.6vw, 34px) !important; }
  .prod-article h2 { font-size: 25px !important; margin-top: 28px !important; }
  .prod-article h3 { font-size: 19px !important; }
  .prod-price-main { font-size: 38px !important; }
  .prod-price-main small { font-size: 16px !important; }

  /* Articles de blog */
  .art-h1 { font-size: clamp(26px, 7.6vw, 34px) !important; }
  .art-main h2 { font-size: 25px !important; margin-top: 30px !important; }
  .art-main h3 { font-size: 19px !important; }
  .related h2,
  .art-cta h2 { font-size: 28px !important; }

  /* Pages « villes » et pages d'information : mêmes titres surdimensionnés */
  .ville-h1, .zone-h1, .page-h1 { font-size: clamp(26px, 7.6vw, 34px) !important; }

  /* Notices */
  .notices-h1, .nc-title { font-size: clamp(24px, 7vw, 32px) !important; }

  /* Zones tactiles : liens du fil d'Ariane et du pied de page trop fins
     pour être visés au doigt (recommandation Apple/Google : 44 px). */
  .breadcrumb a,
  .foot-link,
  .hdr-back { display: inline-block; padding: 6px 0 !important; }
}

/* Très petits téléphones (iPhone SE et équivalents) */
@media (max-width: 360px) {
  .hero-h { font-size: 33px !important; }
  .prod-price-main { font-size: 34px !important; }
  /* « Demander un devis » est le plus long des deux libellés : c'est lui
     qui fixe la taille à laquelle les deux boutons tiennent sur une ligne. */
  .hero-cta .btn-p,
  .hero-cta .btn-o { font-size: 11px !important; padding: 11px 4px !important; }
}