/* Responsive pour le texte du hero sur mobile */
@media (max-width: 480px) {
  /* HERO section */
  .hero-section .d-flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .hero-section .d-flex.gap-3 .btn {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
  }
  .hero-subtitle {
    font-size: 1.05rem !important;
    letter-spacing: normal !important;
    word-break: break-word !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: left !important;
    hyphens: auto !important;
    margin-bottom: 1.5rem !important;
  }
  /* AUDIENCE section */
  /* (aucune règle spécifique pour audience à cette taille) */
}

/* Ajustement du bouton de barre latérale sur mobile */
@media (max-width: 767.98px) {
  .sidebar-toggle-button {
    top: 120px !important; /* +8px par rapport à la position d'origine */
  }
}

@media (max-width: 768px) {
  /* HERO section */
  .hero-section .d-flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .hero-section .d-flex.gap-3 .btn {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
  }
  .hero-subtitle {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  /* AUDIENCE section */
  .audience-card .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .audience-card .audience-icon {
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
    justify-content: center !important;
  }
  .audience-card .audience-info {
    text-align: center !important;
    align-items: center !important;
  }
}

@media (max-width: 1024px) {
  /* HERO section */
  .hero-subtitle {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* AUDIENCE section */
  /* (aucune règle spécifique pour audience à cette taille) */
  
  /* Réorganisation des boutons dans user_home */
  .card-header .d-flex {
    flex-direction: column;
  }
  
  .card-header .d-flex > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    width: 100%;
  }
  
  .card-header .btn-primary {
    width: 80%;
    margin: 0.25rem 0;
  }
  
  .card-header .btn-primary.ms-2 {
    margin-left: 0 !important;
  }
  
  /* Réorganisation des boutons de partage et de la date */
  .card-footer.bg-white.d-flex {
    flex-direction: column !important;
    position: relative !important;
    padding-bottom: 2.5rem !important;
  }
  
  /* Boutons principaux */
  .card-footer.bg-white.d-flex > div > a:first-child,
  .card-footer.bg-white.d-flex > div > .btn-group {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* S'assurer que le bouton Sauvegarder a la même taille */
  .card-footer.bg-white.d-flex > div > .btn-group > button {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Conteneur des boutons de partage */
  .card-footer.bg-white.d-flex > div {
    display: block !important;
    width: 100% !important;
    overflow: visible !important; /* Permettre aux éléments de déborder */
  }
  
  /* Style pour les boutons de partage */
  .card-footer.bg-white.d-flex > div > a.share-btn,
  .card-footer.bg-white.d-flex > div > button.share-btn {
    float: left !important;
    width: 13% !important; /* 7 boutons sur une ligne */
    margin-right: 0.5% !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem !important;
    text-align: center !important;
  }
  
  /* Date en bas à droite */
  .card-footer.bg-white.d-flex > small.text-muted {
    position: absolute !important;
    bottom: 0.5rem !important;
    right: 1rem !important;
  }
}

@media (max-width: 1024px) {
  /* Hamburger menu : même style Bootstrap, juste couleur bleue en scrolled */
  .navbar.scrolled .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230066FF' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
}