/* 📱 Police dynamique responsive pour titre de catégorie */

.header-category-image-wrapper h1 {
  /* Police responsive qui s'adapte à la largeur de l'écran */
  font-size: clamp(2rem, 8vw, 6em);
}

@media (max-width: 768px) {
  .header-category-image-wrapper h1 {
    font-size: clamp(2rem, 8vw, 4rem) !important;
    left: 1rem !important;
    right: 1rem !important;
    text-align: center !important;
    width: calc(100% - 2rem) !important;
    transform: translate(0, -50%) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    padding: 0 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .header-category-image-wrapper h1 {
    font-size: clamp(1.5rem, 10vw, 3rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: calc(100% - 1rem) !important;
    padding: 0 0.25rem !important;
  }
}

@media (max-width: 320px) {
  .header-category-image-wrapper h1 {
    font-size: clamp(1.2rem, 12vw, 2.5rem) !important;
  }
}

/* Optimisations supplémentaires pour très petits écrans */
@media (max-width: 280px) {
  .header-category-image-wrapper h1 {
    font-size: clamp(1rem, 15vw, 2rem) !important;
    line-height: 1.1 !important;
  }
}