/* Responsive safeguards independent from the Tailwind CDN. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

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

@media (max-width: 1023px) {
  nav > div:first-child {
    position: relative;
  }

  nav .lg\:flex {
    display: none !important;
  }

  #menuButton {
    display: grid !important;
    position: absolute;
    top: 18px;
    right: 0;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid rgba(168, 94, 12, .35);
    border-radius: 9999px;
    background: rgba(255, 250, 244, .96);
    color: #48223B;
    font-size: 1.2rem;
    line-height: 1;
  }

  #mobileMenu.hidden {
    display: none !important;
  }

  #mobileMenu:not(.hidden) {
    display: block !important;
  }

  #parcours .grid,
  #seances .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  main,
  article,
  section,
  div,
  p,
  h1,
  h2,
  h3,
  a {
    min-width: 0;
  }

  p,
  h1,
  h2,
  h3,
  a {
    overflow-wrap: anywhere;
  }

  body > main > section:first-child h1,
  article h1,
  section h1 {
    max-width: 100% !important;
    font-size: clamp(2.8rem, 14vw, 3.6rem) !important;
    line-height: .98 !important;
  }

  main h2,
  article h2,
  section h2 {
    font-size: clamp(2.35rem, 11vw, 3rem) !important;
    line-height: 1 !important;
  }

  #parcours .grid,
  #seances .grid,
  #formations .grid,
  #ressources .grid,
  #approche .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .article-content {
    font-size: 1rem;
    line-height: 1.75;
  }

  .article-content .step {
    gap: .8rem;
  }

  .article-content .step-num {
    flex: 0 0 auto;
    font-size: 1.85rem;
  }
}