.video-banner {
    height: 680px; /* Hauteur limitée */
}
.sticky-header-active #header .header-body {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #e5e5e5; /* Ajoute une légère bordure si nécessaire */
}

.nav-link .icons {
    font-size: 12px; /* Taille de l'icône */
    color: #526ea2;  /* Couleur de l'icône */
    margin-right: 3px; /* Espace entre l'icône et le texte */
}

@media (max-width: 768px) {  /* Centrer le texte de la vidéo du slide de l'accueil en versiopn mobile */
    .video .d-flex {
        text-align: center;
        justify-content: center;
    }

    .video h1 {
        width: 100%;
    }
}

/* centrer le logo sur la page mobile */
@media (max-width: 768px) {
    .header-row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header-column {
        width: 100%;
    }

    .header-logo {
        margin: 0 auto;
    }
}


.header-btn-collapse-nav .fas {
    color: #ffffff; /* Change la couleur des trois traits en blanc */
}

/* Changer la couleur du texte du lien actif en blanc sur fond bleu en mode mobile */
@media (max-width: 991px) {
    #mainNav .nav-link.active {
        color: #fff !important;
        background-color: #4E6BA0 !important; /* Assurez-vous que le fond bleu est bien appliqué */
    }

    #mainNav .nav-link.active.current-page-active {
        color: #fff !important;
        background-color: #4E6BA0 !important;
    }
}

@media (max-width: 768px) {
    .nav-icon.nav-divider {
        display: none !important; /* Cache la barre de séparation */
    }
}

/* Réduit la taille du logo en version mobile */
@media (max-width: 768px) {
    .header-logo img {
        width: 250px; /* Ajustez selon vos besoins */
        height: auto;
    }
}

/* Positionne le menu hamburger à droite du logo en version mobile */
@media (max-width: 768px) {
    .header-btn-collapse-nav {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .header-column {
        position: relative;
        width: 100%;
    }

    .header-row {
        justify-content: center;
    }
}

/*liens en noir dans le footer */
/* Styles pour les liens dans le pied de page */
.footer-link {
    color: #333; /* Remplacez #333 par la couleur désirée pour les liens */
    text-decoration: none; /* Supprime la décoration de texte par défaut */
}

.footer-link:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol */
}

/* Changer la couleur des textes dans les sections, sans affecter les titres */
.text-3-5,
.text-3-5 p,
.text-3-5 span,
.btn-secondary {
    color: #6c757d; /* Remplacez par la couleur souhaitée pour les textes */
}

/* Conserver la couleur des titres */
h1,
h2 {
    color: #333; /* Couleur des titres */
}

.video-container {
  width: 323px; 
  height: 323px; 
  border-radius: 50%;
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .video-container {
    margin: 0 auto; /* Centre le conteneur horizontalement uniquement sur mobile */
    margin-bottom: 25px; /* Ajustez cette valeur pour contrôler l'espace sous la vidéo */
  }
}

/* bannière vidéo bas de page accueil */

.custom-header-title {
    font-size: 3rem;
    color: #fff !important; /* Force la couleur blanche pour le titre H1 */
    font-weight: 700;
    line-height: 1.2;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre légère pour la lisibilité */
}

.custom-header-title strong {
    color: #fff !important; /* Assure que le texte en gras est également blanc */
}

.custom-header-text {
    font-size: 1.25rem;
    color: #ddd; /* Couleur grise claire pour le texte complémentaire */
    margin: 0 auto;
    max-width: 800px;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ombre légère pour la lisibilité */
}

.page-header {
    padding: 100px 0; /* Ajuste le padding pour centrer verticalement le contenu */
}

.overlay {
    background: rgba(0, 0, 0, 0.9); /* Renforce l'obscurcissement pour mieux faire ressortir le texte */
}

/* Ajustement de l'espace sous l'image ronde kenburns en page d'accueil*/
@media (max-width: 767px) { /* Cible les écrans de 767px de large et moins */
    .ken-burns-container {
        margin-bottom: 20px; /* Ajuste l'espace en dessous du conteneur en version mobile */
    }
}
/* slideshow rond */

.slideshow-container {
    width: 323px;
    height: 323px; /* Fixe la hauteur à 323px pour le cercle */
    overflow: hidden; /* Cache les parties des images qui dépassent */
    position: relative;
    border-radius: 50%;
    margin: auto;
}

.slideshow-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que les images remplissent le cercle sans être déformées */
    border-radius: 50%;
    position: absolute; /* Permet de superposer les images */
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Transition douce de l'opacité */
}

.slide.active {
    opacity: 1; /* Rend l'image active visible */
}

/* second diaporama rond de la page d'accueil */

#slideshow-container-2 {
    width: 323px;
    height: 323px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    margin: auto;
}

.slideshow-image-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.slide-2.active {
    opacity: 1;
}

/* ajoute de l'espace entre le 1er rond et son titre h2 */

@media (max-width: 767px) {
    #slideshow-container-2 {
        margin-bottom: 26px; /* Ajoute un espace sous l'image circulaire */
    }
}

@media (max-width: 767px) {
    .slideshow-container {
        margin-bottom: 26px; /* Ajoute un espace sous l'image circulaire n°2 */
    }
}

/* réduit l'espace entre deux div avec une classe spéciique attribuée */

@media (max-width: 767px) {
    .custom-section-1, .custom-section-2 {
        margin-bottom: 40px !important; /* Supprime toute marge inférieure */
        padding-bottom: 0 !important; /* Supprime tout padding inférieur */
    }
    
    .custom-section-2 {
        margin-top: 0 !important; /* Supprime toute marge supérieure */
        padding-top: 0 !important; /* Supprime tout padding supérieur */
    }
}

/* Bandeau bleu header sous le menu du Grand Sud Antibes */

.breadcrumb-white a {
    color: white !important;
}

.breadcrumb-white a:hover {
    color: #cccccc !important; /* Optionnel: couleur au survol */
}

.breadcrumb-white .active {
    color: white !important;
}

/* Angles arrondis aux 4 coins des vidéos */

.video-fluid {
    max-width: 100%;
    width: 100%; /* Pour que la vidéo prenne toute la largeur du conteneur */
    height: auto; /* Pour maintenir le ratio de la vidéo */
}

.rounded-video {
    border-radius: 15px; /* Ajuste cette valeur pour plus ou moins d'arrondi */
}

/* Angles arrondis aux 4 coins des images des slideshows de la page de présentation du grand sud antibes */
.border-radius-15 {
    border-radius: 15px !important;
}

/* Désactiver les animations sur la version mobile */

@media (max-width: 767px) {
    /* Désactiver les animations CSS pour tout sauf les carrousels */
    .animated:not(.owl-carousel *),
    [data-appear-animation]:not(.owl-carousel *),
    .appear-animation:not(.owl-carousel *),
    .fadeIn:not(.owl-carousel *),
    .slideInLeft:not(.owl-carousel *),
    .slideInRight:not(.owl-carousel *),
    .fadeInUpShorter:not(.owl-carousel *) {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* couleur modifiée des textes de la page de présentation du duplex */
.presentation-duplex p {
    color: #6c757d;
}