/* Ajustements généraux pour écrans jusqu'à 1024px */
        @media screen and (max-width: 1024px) {
            header#banner {
                background-color: #053D5B !important;
            }
            #banner {
                visibility: visible !important;
                display: block !important;
            }
            .popupOverlayXyz456 { }
            #navbar {
                position: relative !important;
            }
            #main-container {
                margin-top: auto !important;
            }
        }

        /* ------------------ Styles du slider ------------------ */
        .slider-section {
            width: 100%;
            padding: 40px 0;
            background-color: #E0E0E0;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .slider-section h2 {
            margin: 0 0 10px;
            text-align: center;
        }
        .slider-wrapper {
            position: relative;
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
        }
        .slider-container {
            overflow: hidden;
            border-radius: 40px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        .slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slide {
            min-width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }
        .slide-image {
            width: 100%;
            height: 300px;
        }
        .slide-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .slide-content {
            background-color: #FFFFFF;
            color: #000;
            padding: 20px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .slide-content h2 {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: left;
        }
        .slide-content p {
            font-size: 18px;
            line-height: 1.5;
            text-align: justify;
            margin-bottom: 20px;
        }
        .button-brown {
            display: inline-block;
            background-color: #B5866D;
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            text-decoration: none;
            margin-left: 10px;
            transition: background-color 0.3s;
        }
        .button-brown:hover {
            background-color: #a16e5c;
        }
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            color: white;
            border: 1px solid white;
            cursor: pointer;
            padding: 10px;
            border-radius: 50%;
            font-size: 18px;
            width: 40px;
            height: 40px;
            transition: background-color 0.3s ease, border-color 0.3s ease;
            z-index: 2;
        }
        .nav-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .prev-btn {
            left: -50px;
        }
        .next-btn {
            right: -50px;
        }
        @media (max-width: 768px) {
            .nav-btn {
                display: none;
            }
            .slide-content h2 {
                font-size: 28px;
            }
            .slide-content p {
                font-size: 16px;
            }
            .button-brown {
                padding: 8px 16px;
            }
        }
        @media (max-width: 480px) {
            .slide-content h2 {
                font-size: 24px;
            }
            .slide-content p {
                font-size: 14px;
            }
        }
        .slide-indicators {
            display: none;
        }
        .slide-indicators-top {
            margin-bottom: 10px;
        }
        .slide-indicators-bottom {
            margin-top: 10px;
        }
        @media (max-width: 768px) {
            .slide-indicators {
                display: block;
                text-align: center;
            }
            .indicator {
                display: inline-block;
                width: 12px;
                height: 12px;
                background-color: black;
                margin: 0 5px;
                border: 1px solid white;
                cursor: pointer;
            }
            .indicator.active {
                background-color: white;
            }
        }
        @media (min-width: 769px) {
            .slide-indicators-top,
            .slide-indicators-bottom {
                display: none !important;
            }
        }
        /* ------------------ Section Campus ------------------ */
        .campus-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            max-width: 1200px;
            padding: 20px 0;
        }
        .campus-text {
            width: 100%;
            max-width: 600px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .campus-image {
            width: 100%;
            max-width: 600px;
            padding: 20px;
            display: flex;
            align-items: stretch;
        }
        .campus-image img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* Mode Tablette (768px - 1024px) : l'image s'affiche en bannière sur toute la largeur avec une hauteur max de 300px */
        @media screen and (max-width: 1024px) and (min-width: 768px) {
            .campus-container {
                flex-direction: column;
                align-items: center;
            }
            .campus-image {
                order: -1 !important;
                padding: 0 !important;
                width: 100vw !important; /* Force la largeur du viewport */
                margin-left: calc(50% - 50vw) !important; /* Permet à l'image de s'étendre sur toute la page */
            }
            .campus-image img {
                width: 100% !important;
                max-height: 300px !important;
                object-fit: cover !important;
            }
            .campus-text {
                max-width: 100% !important;
                padding: 20px !important;
            }
        }

        /* Mode Mobile (moins de 768px) : l'image est masquée */
        @media screen and (max-width: 767px) {
            .campus-image {
                display: none;
            }
            .campus-text {
                max-width: 100%;
                padding: 10px;
            }
            .campus-container {
                flex-direction: column;
                align-items: center;
            }
        }
    /* Conteneur de la bannière en position relative */
    #banner {
      position: relative !important;
    }
    /* Titre centré sur l'image de la bannière */
    #bannerTitle {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      text-align: center !important;
      width: 100% !important;
      z-index: 10 !important;
      color: white !important;
    }
    /* Image de bannière responsive */
    #bannerImage {
      display: block !important;
      width: 100% !important;
      height: 800px !important;
      object-fit: cover !important;
      object-position: center -100px !important;
    }
    /* Conteneur des boutons en affichage normal */
    #bannerButtons {
      background-color: transparent;
      padding: 0;
      text-align: center;
    }
    /* Ajustements pour mobile */
    @media (max-width: 768px) {
      /* Décalage du header pour éviter qu'il soit recouvert par la navbar */
      #banner {
        z-index: 10 !important;
        margin-top: 80px !important;
        height: auto !important;
      }
      /* Masquer uniquement l'overlay en mobile */
      .overlay-banner {
        display: none !important;
      }
      /* Affichage en flux normal du conteneur des boutons */
      #bannerButtons {
        position: relative !important;
        z-index: 1000 !important; /* Augmenter le z-index pour placer les boutons au-dessus */
        background-color: var(--main-color) !important;
        padding: 10px !important;
        text-align: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
            margin-top: unset !important;

      }

      #banner h1{
      font-size: 1.5em !important;
      }

      /* Style des boutons en mobile */
      #bannerButtons button {
        background-color: var(--main-color) !important;
        border: 1px solid white !important;
        border-radius: 20px !important;
        margin: 5px !important;
      }
      /* Forcer .top-bar et .header-row à rester au-dessus */
      .top-bar,
      .header-row {
        position: relative !important;
        z-index: 10000 !important;
      }
    }
  @media only screen and (max-width: 767px) {
  /* Corriger le débordement horizontal et le problème d'affichage du slider */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Corriger la structure du conteneur de slider */
  .slider-section, .slider-wrapper, .slider-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* S'assurer que le conteneur des slides soit correctement configuré */
  .slides {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform 0.5s ease !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Configurer correctement chaque slide individuel */
  .slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Assurer que les images des slides soient visibles et bien dimensionnées */
  .slide img, .slide-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }

  /* Corriger les indicateurs du slider */
  .slide-indicators {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
  }
}


  @media only screen and (max-width: 767px) {
  /* Correction des problèmes de justification du texte */
  p {
    text-align: left !important; /* Remplacer la justification par un alignement à gauche */
    /* OU si vous préférez garder la justification mais corriger les trous : */
    /* text-align: justify !important;
    hyphens: auto !important;
    word-break: break-word !important; */
  }

  /* Spécifiquement pour le titre du Campus */
  p:contains("Découvre ce qui fait du Campus Bon Secours") {
    font-size: 32px !important; /* Réduire légèrement la taille pour améliorer l'affichage */
    line-height: 1.3 !important; /* Améliorer l'espacement des lignes */
    letter-spacing: -0.01em !important; /* Légèrement resserrer les lettres */
    text-align: left !important; /* Alignement à gauche au lieu de justifié */
  }
}