.chiffres_cles {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.chiffre_cle_icon {
    font-size: 40pt;
}

.chiffre_cle_chiffre {
    font-family: 'Juana';
    font-size: 25pt;
    font-style: italic;
    font-weight: 900;
     text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--rouge), 0 2px 0 var(--rouge);
  transition: box-shadow .3s;
  color: inherit;
  overflow: hidden;
}

.chiffre_cle_chiffre:hover {
      box-shadow: inset 0 -30px 0 var(--rouge), 0 2px 0 var(--rouge);
}

#video_section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 2% 10%;
}

.manifeste {
    border-radius: 30px;
}

.home_main div h2 {
    color: var(--creme);
}

body.dark-mode {
    background-color: #232323;
}

body {
            transition: background-color 0.3s ease-in-out;
        }
        
        #video_section {
            display: flex;
            margin: 5%;
        }
        
        .video-title {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: auto;
        }

        .video-thumbnail {
            width: 100%;
            cursor: pointer;
            display: block;
            border-radius: 30px;
        }

        .video-player {
            display: none;
            width: 100%;
            border-radius: 30px;
            z-index: 3001;
            position: relative;
        }

        .playing-mode body {
            background-color: #232323;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 1200px;
            margin: auto;
            overflow: hidden;
            background-color: #faf7f4;
            padding: 20px;
            border-radius: 30px;
        }

        .slider {
            display: flex;
            width: 50%;
            position: relative;
            background-color: #dbe0f0;
            border-radius: 30px 0 0 30px;
        }

        .slider img {
            width: 100%;
            border-radius: 30px 0 0 30px;
            height: 350px;
            object-fit: cover;
        }

        .text-content {
            width: 50%;
            padding: 40px;
            background-color: #dbe0f0;
            border-radius: 0 30px 30px 0;
            height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

 /* Conteneur du texte pour que la description ne pousse pas la pagination */
.text-container {
    flex-grow: 1; /* Permet au contenu de prendre tout l’espace disponible */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre la description verticalement */
}

/* Titre toujours en haut */
.text-content h2 {
    font-size: 24px;
    color: #142469;
    margin-top: 0;
}

/* Description centrée */
.text-content p {
    font-size: 16px;
    color: #232323;
    text-align: left;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center; /* Centré horizontalement */
    gap: 10px;
    margin-top: auto; /* Fixe la pagination en bas */
}
.fade-out {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}


        .pagination span {
            font-size: 14px;
            color: #232323;
        }

        .pagination button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 20px;
            color: #142469;
        }

        .pagination button:hover {
            color: #ed4018;
        }
        
.dernieres-offres-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    text-decoration: none;
}

.dernieres-offres-container a {
    text-decoration: none;
}

.dernieres-offres h2,.video-title h2 {
    color: var(--bleu);
}

.dernieres-offres h3 {
    text-transform: uppercase;
}


/* Responsive */
@media (max-width: 768px) {
    
.home_main {
    padding: 10%;    
    }
    
.dernieres-offres-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    text-decoration: none;
    }

.chiffres_cles {
    flex-direction: column;
    margin: 0 30%;
    }

.chiffre_cle_icon {
    font-size: 20pt;
    }

#video_section {
    flex-direction: column;
    margin: 5%;
    }
.slider-container {
    flex-direction: column;
}
.slider {
    width: 100%;
    border-radius: 30px 30px 0 0;
}

.slider img {
    height: 150px;
    border-radius: 30px 30px 0 0;
}

.text-content {
    width: 100%;
    border-radius: 0 0 30px 30px;
    height: 500px;
}
}

#overlay_video {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    background-color: #000000;
    opacity: 90%;
    width: 100vw;
    height: 100vh;
    z-index: 3000;
}

.search-form {
    display: flex;
    /*flex-wrap: wrap;*/
    flex-direction : row;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
    z-index: 50;
}


.ville-field {
    flex: 1 1 30%;
}

.autocomplete-group {
    position: relative;
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
}

#ville-list, #titre-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    max-height: 150px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
    z-index: 100;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-form button {
    flex: 0 0 auto;
    align-self: center; /* ou center, selon l’effet souhaité */
}


#ville-list li, #titre-list li {
    padding: 8px;
    cursor: pointer;
    color: var(--bleu);
}

#ville-list li:hover, #titre-list li:hover {
    background: #f0f0f0;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .search-form {
        flex-direction: column;
    }
    .search-field, .ville-field {
        flex: 1 1 100%;
    }
    .search-form {
        flex-direction: column;
    }

    .autocomplete-group, .search-form button {
        flex: 1 1 100%;
    }

    .search-form button {
        margin-top: 10px;
    }

}

.avantages-section {
  padding: 40px 20px;
  background-color: #f9f9f9;
}

.avantages-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
    margin-top: 100px;
  align-items: flex-start;
}

.avantages-grand-titre {
  position: sticky;
  top: 100px;
  z-index: 100;
  align-self: flex-start;
  padding-bottom: 10px;
}

.avantages-titre {
  flex: 1 1 250px;
}

.avantages-titre h2 {
  font-size: 28px;
  margin: 0;
  color: #142469;
}

.avantages-liste {
  flex: 2 1 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.avantage {
  background: #fff;
  border-left: 4px solid #142469;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  border-radius: 6px;
}

.avantage-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 18px;
  color: #142469;
  margin-bottom: 6px;
}

.avantage-icone {
  font-size: 20px;
}

.avantage p {
  margin: 0;
  font-size: 15px;
  color: #333;
}

@media (max-width: 768px) {
  .avantages-container {
    flex-direction: column;
  }
  
  .home_main h1 {
    margin-top: 50%;
  }
  .home_main {
       height: auto;
  }
  .header-logo img {
      margin-left: 20px;
  }
}