/* Media query pour les écrans mobiles */
  @media (max-width: 770px) {
    .parallax-section {
      background-image: none !important;
      min-height: 45vh !important;
      height: auto !important;

      /* Supprime l'image de fond */
    }

    #heroCarousel>.carousel-arrow {
      display: none !important;
      /* Cache les images et les chevrons */
    }

    #heroCarousel{
      min-height: 45vh !important;
      height: auto !important;
      /* Hauteur adaptative du carousel */
    }

    #heroCarousel .flex.items-center {
      align-items: flex-start;
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .hero-overlay {
      position: relative;
      padding-top: 20px;
      padding-bottom: 20px;
    }

    #parallaxhome {
      align-items: flex-start;
      padding-top: 20px;
      padding-bottom: 20px;
    }

    #heroCarousel h1 {
      font-size: 2rem;
      /* Ajuste la taille du texte pour mobile */
      margin-bottom: 1rem;
      /* Espacement sous le titre */
    }

    #heroCarousel p {
      font-size: 1rem;
      /* Ajuste la taille du sous-titre */
      margin-bottom: 1.5rem;
      /* Espacement sous le paragraphe */
    }

    .hero-overlay {
      position: relative;
      padding-top: 15px;
      padding-bottom: 15px;
    }
  }

  /* Ajustement pour les très petits écrans (ex. 375px) */
  @media (max-width: 375px) {
    #heroCarousel {
      min-height: 60vh !important;
      padding-top: 15px;
      padding-bottom: 15px;
    }

    #heroCarousel h1 {
      font-size: 2rem;
      /* Ajuste la taille du texte pour mobile */
      margin-bottom: 1rem;
      /* Espacement sous le titre */
    }

    #heroCarousel p {
      font-size: 1rem;
      /* Ajuste la taille du sous-titre */
      margin-bottom: 1.5rem;
      /* Espacement sous le paragraphe */
    }

    .parallax-section {
      background-image: none !important;
      min-height: 60vh !important;
      height: auto !important;

      /* Supprime l'image de fond */
    }

  }

  /* Events */
  .event-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
  }

  .event-item.hidden {
    display: none;
  }

  .fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .category-badge {
    transition: all 0.3s ease;
  }

  .category-badge:hover {
    opacity: 0.9;
  }

  .event-layout {
    display: block;
  }

  .event-main > * + * {
    margin-top: 1rem;
  }

  .event-aside > * + * {
    margin-top: 0.75rem;
  }

  @media (min-width: 1024px) {
    .event-layout {
      display: flex;
      align-items: flex-start;
      gap: 2rem;
    }

    .event-main {
      flex: 1 1 0%;
      min-width: 0;
    }

    .event-aside {
      flex: 3 1 0%;
      min-width: 0;
      position: relative;
      padding-left: 2rem;
    }

    .event-aside::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      border-left: 1px dotted #d1d5db;
    }

    .event-meta-row-start {
      flex-wrap: wrap;
      min-width: 0;
    }

    .event-meta-row-start a,
    .event-meta-row-start span {
      min-width: 0;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .event-item {
      padding: 1rem;
    }

    .event-item .flex {
      flex-direction: column;
      align-items: flex-start;
    }

    .event-item .flex.event-meta-row {
      flex-direction: row;
      align-items: center;
    }

    .event-item .flex.event-meta-row i {
      padding-top: 0;
    }

    .event-item .flex.event-meta-row.event-meta-row-start {
      align-items: flex-start;
    }

    .event-item .w-16 {
      width: 100%;
      margin-bottom: 1rem;
    }
  }