body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400; /* Normal pour le corps du texte */
  line-height: 1.6; /* Espacement confortable */
  
  min-height:800px;
  -ms-user-select: none; 
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
}

.alert {
  word-wrap: break-word;
  word-break: break-word;
}

audio::-webkit-media-controls-panel {
  background-color: #f1f1f1;
  border-radius: 8px;
}


/* **************************SUMMER NOTE RESPONSIVE*************************************** */
/* Rendre l'éditeur Summernote responsive */
.note-editor {
  max-width: 100%; /* Assure que l'éditeur ne dépasse pas la largeur du conteneur parent */
  overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */
 }
 
 .note-editable {
  word-wrap: break-word; /* Permet de gérer les longues lignes de texte */
  white-space: normal; /* Évite le débordement sur les petits écrans */

  margin: 0 !important;
  padding: 8px !important; /* tu peux ajuster à 4px, 0, etc. */
 }
 
 /* **************************AFFICHAGE DU CONTENU SUMMERNOTE RESPONSIVE*************************************** */
 /* Style pour rendre le contenu de Summernote responsive */
 .summernote-content {
  max-width: 100%; /* Limite la largeur du contenu à celle du conteneur parent */
  overflow-wrap: break-word; /* Permet de gérer le retour à la ligne pour les longs mots */
  word-wrap: break-word; /* Compatibilité avec les anciens navigateurs */
  white-space: normal; /* Assure que le contenu s'adapte à la largeur du conteneur */
  margin: 0;
  padding: 0;
 }
 
 .summernote-content img {
  max-width: 100%;  /* Empêche l'image de dépasser la largeur du conteneur */
  height: auto;      /* Garde les proportions de l'image */
  display: block;    /* Supprime les espaces sous l'image */
  margin: 0 auto;    /* Centre l'image horizontalement */
}

/* Assurer que les images dans les liens ne débordent pas */
.summernote-content a img {
  max-width: 100% !important;
  height: auto !important;
}
.summernote-content p {
  margin: 0 0 0.5rem 0; /* ajustable selon ta mise en page */
}

.summernote-content h1,
.summernote-content h2,
.summernote-content h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
/* Ajoute un conteneur autour des images */
.summernote-content .image-wrapper {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}

/* Empêcher le débordement des images sur mobile */
@media (max-width: 768px) {
  .summernote-content img {
      width: 100% !important;
      height: auto !important;
  }
}

.summernote-content p {
  margin: 0 0 0.5rem 0; /* ajustable selon ta mise en page */
}

.summernote-content h1,
.summernote-content h2,
.summernote-content h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
 /* Style pour rendre les vidéos YouTube responsives */
 .video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* Ratio d'aspect 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
 }
 
 .video-responsive iframe,
 .video-responsive object,
 .video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
/* **************************FIN DE CUSTOMIZATION DES TOOLTYPE *************************************** */
 .line-clamp {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
 

#cardSlider #cardSlider #popularSlider {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Permet le défilement fluide sur iOS */
  /* Permet le défilement fluide sur iOS */;
  scroll-behavior: smooth;
 }
 #cardSlider::-webkit-scrollbar {
  display: none;
 }
 #popularSlider::-webkit-scrollbar {
  display: none;
 }
 #cardSlider::-webkit-scrollbar {
  display: none;
 }
 
 .badge-level {
  padding: 2px; /* Ajustement du padding pour les badges */
  border-radius: 0.25rem; /* Bords arrondis */
  font-size: 0.7rem !important; /* Forcer l'application de la taille */
  background-color: rgba(14, 67, 200, 0.9);
 }
 
 .badge-category {
 padding: 0.35em 0.4em; /* Ajustement du padding pour les badges */
 /* Bords arrondis */
 font-size: 0.75rem !important; /* Forcer l'application de la taille */
 }
 
 .badge-category-mobile {
 padding: 0.35em 0.6em; /* Ajustement du padding pour les badges */
 font-size: 0.65rem !important; /* Forcer l'application de la taille */
 }
 
 
 .blurred-badge {
 background-color: rgba(189, 194, 198, 0.2); /* Couleur secondaire avec opacité */
 -webkit-backdrop-filter: blur(4px); /* Support pour Safari */
 backdrop-filter: blur(4px); /* Applique un flou de 4px */
 color: rgb(67, 71, 66); /* Couleur du texte */
 padding: 0.35em 0.6em; /* Ajustement du padding pour les badges */
 border-radius: 0.25rem; /* Bords arrondis */
 font-size: 0.75rem !important; /* Forcer l'application de la taille */
 }
 

 


  /* --- AMÉLIORATION FAVORIS / VOTES / SOCIAL --- */
  .favorite-vote-share {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .favorite-vote-share .btn {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* espace entre icône et texte */
    font-size: 1rem;
    padding: 10px 16px;
    transition: all 0.3s ease;
  }
  
  .favorite-vote-share .btn i {
    font-size: 1.8rem;
  }
  
  .favorite-vote-share .btn span {
    font-weight: 500;
    white-space: nowrap;
  }
  
  .favorite-vote-share .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .favorite-vote-share .share-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
  }
  
  .share-buttons a,
  .share-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
    border-radius: 10px;
  }
  
  /* MOBILE */
  @media (max-width: 576px) {
    .favorite-vote-share {
      flex-direction: column;
      align-items: stretch;
    }
    .favorite-vote-share .btn {
      width: 100%;
      max-width: 100%;
      font-size: 1rem;
      padding: 12px;
    }
    .share-buttons {
      justify-content: center;
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .favorite-btn.pulsing i {
    animation: pulse 0.5s ease;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  
  .vote-btn.bouncing i {
    animation: bounce 0.4s ease;
  }