/* Mobile compact — L'Effervescence des Sourires
   Ajuste uniquement la présentation sur téléphone.
   Les pages, couleurs, photos et la version ordinateur restent identiques. */
@media (max-width: 767px) {
  html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
  body { overflow-x: clip; font-size: 14px; }
  main, main > section, footer { min-width: 0; }

  /* Plus de place pour le contenu, moins de vide sur les côtés */
  main section.px-margin-desktop,
  main section > .px-margin-desktop,
  main section .px-margin-desktop,
  main > .px-margin-desktop,
  footer .px-margin-desktop {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Réduire l'impression de zoom sans changer l'organisation */
  main h1 { font-size: clamp(1.65rem, 6.8vw, 2.05rem) !important; line-height: 1.16 !important; letter-spacing: -.02em; overflow-wrap: break-word; }
  main h2 { font-size: clamp(1.32rem, 5.4vw, 1.65rem) !important; line-height: 1.22 !important; overflow-wrap: break-word; }
  main h3 { font-size: clamp(1.12rem, 4.5vw, 1.32rem) !important; line-height: 1.3 !important; overflow-wrap: break-word; }
  main p, main li { font-size: .9rem; line-height: 1.52; overflow-wrap: break-word; }
  main p { max-width: 100%; }
  main .text-lg { font-size: .98rem !important; }
  main .text-xl { font-size: 1.06rem !important; }
  main .text-2xl { font-size: 1.3rem !important; }

  /* Sections plus compactes */
  main section.py-stack-lg { padding-top: 30px !important; padding-bottom: 30px !important; }
  main section.py-stack-md { padding-top: 24px !important; padding-bottom: 24px !important; }
  main section.mb-stack-lg { margin-bottom: 30px !important; }
  main section > .max-w-container-max,
  main section.max-w-container-max { max-width: 100%; }
  main .gap-gutter { gap: 18px; }
  main .grid > *, main .flex > *, footer .flex > * { min-width: 0; }

  /* Même en-tête, en plus discret */
  header > div { min-width: 0; padding-left: 12px !important; padding-right: 12px !important; gap: 8px; }
  header a { min-width: 0; }
  header a > img { max-width: 36px; max-height: 36px; height: auto; object-fit: contain; flex-shrink: 0; margin-right: 7px; }
  header a > span { font-size: .78rem !important; line-height: 1.18 !important; white-space: normal; overflow-wrap: anywhere; }
  #mobile-menu-btn { flex-shrink: 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #mobile-menu { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  #mobile-menu a { display: block; padding: 9px 8px; border-radius: 10px; line-height: 1.35; }

  /* Images non déformées, même présentation */
  main img, main video, main iframe { max-width: 100%; }
  main img { height: auto; }
  main .gallery-image, main .focus-image, main .tech-image, main img.object-cover { height: 100%; }
  main .overflow-hidden { max-width: 100%; }

  /* Boutons plus fins, zones tactiles préservées */
  main a.rounded-full, main button.rounded-full {
    max-width: 100%; text-align: center; justify-content: center;
    white-space: normal; font-size: .88rem; line-height: 1.3;
    min-height: 42px;
  }
  main input, main select, main textarea { max-width: 100%; font-size: 16px; }
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 380px) {
  main section.px-margin-desktop,
  main section > .px-margin-desktop,
  main section .px-margin-desktop { padding-left: 12px !important; padding-right: 12px !important; }
  header a > img { max-width: 32px; margin-right: 5px; }
  header a > span { font-size: .74rem !important; }
}