/* ============================================================
   PAMY DIGITAL - RESPONSIVE FIXES V1
   Objectif : empêcher les textes de toucher/déborder les bords,
   garder des proportions lisibles sur petit écran.
   ============================================================ */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

input,
textarea,
select,
button {
  max-width: 100%;
}

main,
header,
section,
article,
form,
nav,
div {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
a,
span,
strong,
label,
small,
li,
button {
  overflow-wrap: break-word;
  word-break: normal;
}

h1 {
  font-size: clamp(1.55rem, 6.4vw, 2.25rem) !important;
  line-height: 1.12 !important;
}

h2 {
  font-size: clamp(1.15rem, 4.8vw, 1.5rem) !important;
  line-height: 1.18 !important;
}

h3 {
  line-height: 1.2 !important;
}

.pd-compact-card {
  border-radius: 1.1rem !important;
}

.pd-compact-card__meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-compact-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  main {
    padding-left: max(0.9rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.9rem, env(safe-area-inset-right)) !important;
  }

  .max-w-7xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl {
    max-width: 100% !important;
  }

  .text-5xl,
  .text-4xl {
    font-size: clamp(1.85rem, 8vw, 2.5rem) !important;
    line-height: 1.08 !important;
  }

  .text-3xl {
    font-size: clamp(1.45rem, 6.6vw, 1.875rem) !important;
    line-height: 1.12 !important;
  }

  .text-2xl {
    font-size: clamp(1.3rem, 5.8vw, 1.55rem) !important;
    line-height: 1.15 !important;
  }

  .text-xl {
    font-size: clamp(1.05rem, 4.9vw, 1.25rem) !important;
    line-height: 1.2 !important;
  }

  .text-lg {
    font-size: clamp(1rem, 4.3vw, 1.125rem) !important;
    line-height: 1.25 !important;
  }

  .p-8 {
    padding: 1.25rem !important;
  }

  .p-6 {
    padding: 1.05rem !important;
  }

  .px-8 {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-8 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .rounded-3xl {
    border-radius: 1.35rem !important;
  }

  .rounded-2xl {
    border-radius: 1rem !important;
  }

  .shadow-xl,
  .shadow-2xl {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
  }

  .pd-admin-desktop-nav {
    display: none !important;
  }

  header .h-16,
  header .md\:h-20 {
    min-height: 4rem !important;
  }

  .pd-bottom-nav__inner span {
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  .pd-bottom-nav__inner a {
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
  }

  .pd-bottom-nav__inner svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

@media (max-width: 380px) {
  main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .text-3xl {
    font-size: clamp(1.32rem, 6.9vw, 1.65rem) !important;
  }

  .text-2xl {
    font-size: clamp(1.18rem, 6vw, 1.42rem) !important;
  }

  .text-xl {
    font-size: clamp(1rem, 5.3vw, 1.15rem) !important;
  }

  .p-6,
  .p-5 {
    padding: 0.95rem !important;
  }

  .gap-6 {
    gap: 1rem !important;
  }

  .gap-5 {
    gap: 0.85rem !important;
  }
}