* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Assure que le padding et la bordure sont inclus dans la largeur totale */
}

body {
    font-family: Arial, sans-serif; /* Police de base */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    background-color: white; /* Couleur de fond pour le body */
    display: flex; /* Utiliser flexbox */
    flex-direction: column; /* Disposition en colonne */
    justify-content: center; /* Centrer verticalement */
    min-height: 100vh; /* Prendre toute la hauteur de la fenêtre */
    color: black; /* Couleur du texte */
}

header {
    background-color: #1a7e74; /* Couleur de fond de l'en-tête */
    padding: 1rem 0; /* Espacement intérieur */
    margin-bottom: 2rem; /* Espacement en bas */
    color: white; /* Couleur du texte de l'en-tête */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Ombre de l'en-tête */
}

footer {
    
    padding: 1rem 0; /* Espacement intérieur */
    margin-top: auto; /* Pousse le pied de page vers le bas */
    text-align: center; /* Centre le texte */
    
}

.container-combined {
    display: flex;
    flex-direction: row;
    width: 100%; /* Assurez-vous que la largeur est à 100% */
}

.container-plan {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
    padding: 2%;
    background-color: white; /* Couleur de fond */
    margin-bottom: 2%; /* Espacement en bas */
}

.container {
    display: flex;
    flex-direction: column;
    width: 90%; /* Largeur de la section principale */
    margin: 0 auto; /* Centrer horizontalement */
    padding: 20px; /* Espacement intérieur */
    background-color: white; /* Couleur de fond */
    align-items: center;
}

h1 {
    text-align: center; /* Centre le titre */
    margin-bottom: 2rem; /* Espacement en bas */
    color: white; /* Couleur du titre */
}

h2 {
    text-align: center; /* Centre le sous-titre */
    color: #1a7e74; /* Couleur du sous-titre */
    width: auto; /* Ajout de cette propriété pour limiter la largeur */
    flex-shrink: 0; /* Empêcher le h2 de rétrécir */
}

.form-group {
    margin-bottom: 15px; /* Espacement en bas des groupes de formulaire */
}

label {
    display: block; /* Affiche le label en bloc */
    margin-bottom: 5px; /* Espacement en bas du label */
    font-weight: bold; /* Met le texte en gras */
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
select {
    width: 100%; /* Largeur à 100% */
    padding: 10px; /* Espacement intérieur */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    transition: border-color 0.3s; /* Transition pour la couleur de la bordure */
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus {
    border-color: #4CAF50; /* Couleur de la bordure au focus */
}

select[multiple] {
    height: 120px; /* Hauteur pour les sélecteurs multiples */
}

.btn {
    background-color: #1a7e74; /* Couleur de fond des boutons */
    color: white; /* Couleur du texte des boutons */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 15px; /* Espacement intérieur */
    cursor: pointer; /* Curseur en main */
    transition: background-color 0.3s; /* Transition pour la couleur de fond */
    width: 100%; /* Largeur à 100% */
    height: 2.5em; /* Hauteur fixe */
    font-size: 1rem; /* Taille de police */
}

.btn:hover {
    background-color: #15645c; /* Couleur de fond au survol */
}

/* Styles pour le récapitulatif */

.recap-content {
    display: flex;
    gap: 2rem;
    margin: 0 auto;
    width: 100%;
}

.recap-infoRow {
    width: 60%; /* Réduire de 66.66% à 50% */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* Espacement entre les éléments */
}

.recap-infoRow span {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacement entre le titre et la valeur */
}

.recap-infoButton {
    width: 40%; /* Augmenter de 33.33% à 50% */
    display: flex;
    align-items: center;
    justify-content: center; /* Centrer les éléments */
    gap: 40px; /* Augmenter l'espacement de 15px à 25px */
}

.recap-info-list {
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.info-label {
    font-weight: bold;
    color: #1a7e74;
    margin-right: 0.5rem;
}

.info-value {
    color: #333;
    margin-right: 1rem;
}

.btn-modify {
    font-size: 1rem;
    background: #1a7e74;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: auto; /* Changer de 80% à auto */
    text-align: center; /* Centrer le texte */
    padding: 10px 20px; /* Ajuster le padding */
}

.btn-modify:hover {
    background: #15645c;
}

.recap-logo {
    height: 80px; /* Augmenter la hauteur de 50px à 55px */
    width: auto;
    object-fit: contain;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .recap-content {
        flex-direction: column;
    }

    .recap-infoRow,
    .recap-infoButton {
        width: 100%;
        text-align: center;
    }
    
    .btn-modify {
        width: auto;
        margin-top: 1rem;
    }
}

#recap {
    display: flex; /* Utiliser flex pour afficher le titre et le bouton sur une seule ligne */
    flex-direction: column; /* Disposition en colonne */
    justify-content: space-between; /* Espacement entre le titre et le bouton */
    align-items: center; /* Centrer verticalement */
    padding: 1rem; /* Espacement intérieur */
    background: #c8e7e4; /* Couleur de fond */
    width: 100%; /* Largeur maximale */
    margin-left: auto; /* Centrer horizontalement */
    margin-right: auto; /* Centrer horizontalement */
}

#recap h2 {
    margin: 0; /* Supprimer la marge par défaut */
}

#recap div {
    display: flex; /* Utiliser flex pour afficher les informations en colonne */
    flex-direction: row; /* Disposition en colonne */
}

#recap p {
    margin: 5px 0; /* Espacement entre les paragraphes */
}

#suggestions {
    margin-bottom: 2rem; /* Espacement en bas */
}

.button-group {
    display: flex; /* Utiliser flexbox pour centrer */
    justify-content: center; /* Centrer horizontalement */
    margin-top: 1rem; /* Espacement au-dessus du groupe de boutons */
}

#downloadPDF {
    font-size: 1rem; /* Garder la taille de la police d'origine */
    padding: 10px 15px; /* Garder le padding d'origine */
    background-color: #1a7e74; /* Couleur de fond d'origine */
    color: white; /* Couleur du texte d'origine */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main */
    transition: background-color 0.3s; /* Transition pour la couleur de fond */
    width: auto; /* Largeur automatique */
}

.btn-secondary {
    background-color: #6c757d; /* Couleur de fond des boutons secondaires */
    font-size: 1rem; /* Taille de police */
    margin-bottom: 1rem; /* Espacement en bas */
}

.btn-secondary:hover {
    background-color: #5a6268; /* Couleur de fond au survol */
}

/* Styles pour le planning */
#planning-container {
    margin: 0 auto; /* Espacement en haut et bas, centré */
    background: white; /* Couleur de fond */
    width: 90%; /* Largeur à 90% */
    display: flex; /* Affiche en flex */
    flex-direction: column; /* Disposition en colonne */
    gap: 2rem; /* Espacement entre les éléments */
}

.timeline {
    display: none; /* Cacher l'ancien affichage */
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
    padding: 20px;
    width: 95%;
    margin: 0 auto; /* Centre la timeline */
    overflow-x: visible;
    margin-bottom: 20px;
}

.timeline-day {
    min-width: 0; /* Supprime la largeur minimale */
    max-width: none; /* Supprime la largeur maximale */
    flex: none; /* Supprime les propriétés flex */
    width: 100%; /* Utilise toute la largeur disponible */
    margin-bottom: 20px;
    padding: 2%;
    background-color: white;
    justify-self: center; /* Centre dans sa colonne */
}

.timeline-content {
    display: flex; /* Utiliser flexbox pour aligner le titre et l'icône */
    align-items: center; /* Centrer verticalement */
    justify-content: space-between; /* Espacement entre le titre et l'icône */
    cursor: pointer; /* Indiquer que c'est cliquable */
    padding: 1rem; /* Espacement intérieur */
    background: #1a7e74; /* Couleur de fond */
    color: white; /* Couleur du texte */
    border-radius: 8px; /* Coins arrondis en haut */
    text-align: center; /* Centre le texte */
}

.timeline-content i {
    margin-left: 10px; /* Espacement à gauche de l'icône */
    transition: transform 0.3s; /* Transition pour l'animation */
}

.timeline-content:hover i {
    transform: rotate(180deg); /* Rotation de l'icône au survol */
}

.activities-detail {
    margin-top: 10px; /* Espacement au-dessus des activités */
    padding: 10px; /* Espacement intérieur */
    background-color: white; /* Couleur de fond pour les activités */
    border-radius: 5px; /* Coins arrondis */
    display: block !important; /* Toujours afficher le contenu */
    padding: 15px;
    border-radius: 0 0 8px 8px;
}

.activities-detail.show {
    display: block;
}

/* Style de la scrollbar horizontale */
.timeline::-webkit-scrollbar {
    height: 8px; /* Hauteur de la scrollbar */
}

.timeline::-webkit-scrollbar-track {
    background: #f8f9fa; /* Couleur de fond de la piste */
    border-radius: 4px; /* Coins arrondis */
}

.timeline::-webkit-scrollbar-thumb {
    background: #1a7e74; /* Couleur de la barre */
    border-radius: 4px; /* Coins arrondis */
}

.timeline::-webkit-scrollbar-thumb:hover {
    background: #15645c; /* Couleur de la barre au survol */
}

.activity-item {
    background: #c8e7e4; /* Couleur de fond */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px; /* Réduire l'espacement entre les éléments */
    border-left: 4px solid #1a7e74;
    border-right: 4px solid #1a7e74;
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
    align-items: center;
    position: relative;
    width: 100%;
    margin-bottom: 5%;
}

/* Nouveau conteneur flex pour l'image et les infos */
.activity-content-wrapper {
    display: flex;
    align-items: flex-start;
    width: 90%;
    gap: 5%;
}

/* Ajustement de l'image */
.activity-item .activity-image {
    flex: 0 0 40%; /* Réduit à 40% */
    height: 200px;
    margin: 0;
}

/* Ajustement des informations */
.activity-item .activity-info {
    flex: 0 0 60%; /* Augmenté à 60% */
    display: flex;
    flex-direction: column; /* Change en colonne pour empiler les éléments */
    gap: 10px;
    margin-right: 5%; /* Ajoute une marge à droite */
}

/* Style pour le conteneur des horaires/durée/prix */
.activity-item .time-price-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.activity-item .time-price-container > * {
    width: 30%;
    text-align: center;
}

/* Nouveau style pour la description */
.activity-item .activity-description {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

.activity-item .activity-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 5px 0; /* Réduire les marges verticales */
    margin-right: 5%; /* Ajoute une marge à droite */
}

.activity-time {
    font-size: 1.2rem; /* Taille de police pour l'heure */
    font-weight: bold; /* Met le texte en gras */
    color: black; /* Couleur du texte */
}

.activity-details h4 {
    color: #15645c; /* Couleur du titre de l'activité */
    margin: 0; /* Pas de marge */
    font-size: 1.1rem; /* Taille de police */
}

.activity-details p {
    color: black; /* Couleur du texte */
    margin: 0.5rem 0; /* Marges en haut et bas */
    line-height: 1.4; /* Hauteur de ligne */
}

.activity-info {
    display: flex; /* Affiche en flex */
    gap: 0.8rem; /* Espacement entre les éléments */
    margin-top: auto; /* Pousse vers le bas */
    align-items: center; /* Centrer verticalement */
    flex-wrap: wrap; /* Permettre le retour à la ligne si nécessaire */
    justify-content: center; /* Centrer horizontalement */
    margin-right: 5%; /* Ajoute une marge à droite */
}

.activity-item .activity-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 5px 0; /* Réduire les marges verticales */
    margin-right: 5%; /* Ajoute une marge à droite */
}

.activity-info span {
    background: #f8f9fa;
    padding: 4px 12px; /* Réduire le padding vertical */
    border-radius: 20px;
    font-size: 1rem;
}

.timeline-day.active .timeline-content {
    background: #1a7e74; /* Couleur de fond active */
}

.activities-detail.dragover {
    background-color: rgba(26, 126, 116, 0.1); /* Couleur de fond lors du drag over */
    border-radius: 0 0 8px 8px; /* Coins arrondis en bas */
}

/* Styles des étapes - version corrigée */
.steps-indicator {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.step {
    position: relative;
    z-index: 2;
    width: auto;
    min-width: 120px;
    padding: 0.5rem 1rem;
    margin: 0; /* Supprimer la marge qui causait l'espacement */
    text-align: center;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 20px;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: default;
    transition: all 0.3s ease;
}

.step.done {
    background: #c8e7e4;
    border-color: #1a7e74;
    color: #1a7e74;
    cursor: pointer;
}

.step.done:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: #1a7e74;
    color: white;
}

.step.active {
    background: #1a7e74;
    border-color: #1a7e74;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-step {
    display: none; /* Masque les étapes par défaut */
    opacity: 0;
    visibility: hidden;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.form-step.active {
    display: block;
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.3s ease;
}

/* Styles pour la section des activités */
#all-activities {
    margin-top: 20px;
}

#all-activities h2 {
    color: #1a7e74;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.activities-grid {
    display: grid; /* Utiliser une grille CSS */
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes de largeur égale */
    gap: 15px; /* Réduire légèrement l'espacement */
    width: 100%;
    padding: 15px;
}

.activity-card {
    display: flex; /* Utiliser flexbox pour aligner les éléments */
    flex-direction: column; /* Disposition en colonne */
    justify-content: space-between; /* Aligner les éléments en haut et pousser le bas */
    height: 300px; /* Hauteur fixe pour toutes les cartes */
    margin-bottom: 20px; /* Espacement entre les cartes */
    padding: 15px; /* Espacement intérieur */
    background: #c8e7e4; /* Couleur de fond */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre pour les cartes */
    height: auto; /* Hauteur automatique */
    width: 100%;
    font-size: 0.9rem; /* Réduire légèrement la taille du texte */
}

.activity-card h4 {
    margin: 0; /* Supprimer la marge par défaut */
    font-size: 1.2rem; /* Taille de police pour le titre */
    color: #333; /* Couleur du texte */
}

.activity-card img {
    max-width: 100%; /* S'assurer que l'image ne déborde pas */
    height: 150px; /* Réduire la hauteur de l'image */
    object-fit: cover; /* Couvrir le conteneur sans déformer l'image */
    border-radius: 5px; /* Coins arrondis pour l'image */
    margin-top: 10px; /* Espacement au-dessus de l'image */
}

.activity-card p {
    margin: 10px 0; /* Espacement vertical pour la description */
    flex-grow: 1; /* Permet à la description de prendre l'espace disponible */
    font-size: 0.9rem; /* Réduire la taille du texte descriptif */
    line-height: 1.4;
}

.activity-card span {
    display: block; /* Afficher chaque info sur une nouvelle ligne */
    color: #6c757d; /* Couleur grise pour les informations */
}

.activity-actions {
    margin-top: auto; /* Pousse le bouton vers le bas */
    display: flex; /* Utiliser flexbox pour aligner les éléments */
    justify-content: center; /* Aligner le bouton au centre */
    margin-top: 20px; /* Espacement au-dessus du bouton */
}

/* Masquer uniquement les sections non désirées */
#added-activities {
    display: none;
}

/* Supprimer le style du btn-back */
.btn-back {
    display: none;
}

/* Remplacer les styles du loader par ceux-ci uniquement */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    width: 50px; /* Réduire la taille */
    height: 50px; /* Réduire la taille */
    border: 3px solid #f3f3f3; /* Réduire l'épaisseur de la bordure */
    border-top: 3px solid #1a7e74;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader-text {
    position: absolute;
    color: white;
    font-size: 18px;
    margin-top: 80px; /* Ajuster la position du texte */
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Nouveau style pour le loader */
.submit-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-dots {
    display: none;
    margin: 10px auto; /* Centrer horizontalement et ajouter de la marge verticale */
    text-align: center;
    color: #1a7e74;
}

.loading-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1a7e74;
    margin: 0 3px;
    animation: dots 1s infinite ease-in-out;
}

@keyframes dots {
    0%, 100% { transform: scale(0.3); opacity: 0.3; }
    50% { transform: scale(1); opacity: 1; }
}

/* Message d'erreur */
.error-message {
    text-align: center; /* Centre le texte */
    padding: 2rem; /* Espacement intérieur */
    color: #721c24; /* Couleur du texte d'erreur */
    background-color: #f8d7da; /* Couleur de fond d'erreur */
    border: 1px solid #f5c6cb; /* Bordure d'erreur */
    border-radius: 4px; /* Coins arrondis */
    margin: 1rem 0; /* Marges en haut et bas */
}

.error-message button {
    margin-top: 1rem; /* Espacement en haut du bouton */
    padding: 0.5rem 1rem; /* Espacement intérieur */
    background-color: #dc3545; /* Couleur de fond du bouton d'erreur */
    color: white; /* Couleur du texte du bouton d'erreur */
    border: none; /* Pas de bordure */
    border-radius: 4px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main */
}

.error-message button:hover {
    background-color: #c82333; /* Couleur de fond au survol du bouton d'erreur */
}

@keyframes fadeIn {
    from { 
        opacity: 0; /* Début de l'animation d'apparition */
    }
    to { 
        opacity: 1; /* Fin de l'animation d'apparition */
    }
}

.activity-content {
    padding: 1.5rem; /* Espacement intérieur */
}

.time-input {
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    color: #15645c; /* Couleur du texte */
    font-size: 1.2rem; /* Taille de police */
    font-weight: bold; /* Met le texte en gras */
    cursor: pointer; /* Curseur en main */
    padding: 2px; /* Espacement intérieur */
    border-radius: 4px; /* Coins arrondis */
    font-family: inherit; /* Hérite de la police parente */
}

.time-input:hover {
    background-color: #f0f0f0; /* Couleur de fond au survol */
}

.time-input:focus {
    outline: 2px solid #1a7e74; /* Contour au focus */
    background-color: white; /* Couleur de fond au focus */
}

.btn-more {
    background-color: #1a7e74; /* Couleur de fond du bouton "En savoir plus" */
    color: white; /* Couleur du texte du bouton */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 15px; /* Espacement intérieur */
    cursor: pointer; /* Curseur en main */
    text-decoration: none; /* Pas de soulignement */
    display: inline-block; /* Affiche en bloc */
}

.btn-more:hover {
    background-color: #15645c; /* Couleur de fond au survol du bouton "En savoir plus" */
}

.activity-content {
    display: flex; /* Affiche en flex */
    flex-direction: column; /* Disposition en colonne */
    height: 100%; /* Hauteur à 100% */
}

.activity-content p {
    flex-grow: 1; /* Prend l'espace disponible */
}

.loading-message {
    position: fixed; /* Position fixe pour le message de chargement */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Centre parfaitement */
    background: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
    color: white; /* Couleur du texte */
    padding: 20px; /* Espacement intérieur */
    border-radius: 8px; /* Coins arrondis */
    z-index: 1000; /* Au-dessus des autres éléments */
}

.activity-header {
    height: 80px;
}

.interests-checkboxes {
    display: grid; /* Affiche en grille */
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes */
    gap: 10px; /* Espacement entre les cases */
}

.interests-checkboxes label {
    font-weight: normal; /* Supprimer le gras */
    font-size: 1rem; /* Taille de police normale */
    color: #333; /* Couleur du texte */
}

.btn-small {
    padding: 1%; /* Espacement intérieur */
    font-size: 1rem; /* Taille de police */
}

.button-group .btn {
    font-size: 1rem; /* Réduire la taille du texte des boutons */
    height: 4em; /* Hauteur fixe */
}

.container-index {
    width: 70%; /* Augmenter la largeur du conteneur du formulaire */
    padding: 2%;
}

.recap-info {
    display: flex; /* Affiche les éléments en ligne */
    flex-direction: row; /* Disposition en ligne */
    width: 100%; /* Largeur à 100% */
}

.recap-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.separator {
    margin: 0 10px; /* Espacement autour du séparateur */
}

.separator {
    color: #1a7e74;
    margin: 0 5px;
}

.activity-image {
    overflow: hidden; /* Masquer le débordement */
}

.activity-image img {
    width: 100%; /* Largeur à 100% pour remplir le conteneur */
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    height: 200px; /* Hauteur maximale pour l'image */
    object-fit: cover; /* Couvrir le conteneur sans déformer l'image */
}

/* Ajoutez ce style pour le bouton d'ajout */
.btn-add {
    background-color: #1a7e74; /* Couleur de fond des boutons */
    color: white; /* Couleur du texte des boutons */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 15px; /* Espacement intérieur */
    cursor: pointer; /* Curseur en main */
    transition: background-color 0.3s; /* Transition pour la couleur de fond */
    width: 100%; /* Largeur à 100% */
    height: 2.5em; /* Hauteur fixe */
    font-size: 1rem; /* Taille de police */
}

.btn-add:hover {
    background-color: #15645c; /* Couleur de fond au survol */
}

.btn-remove {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.btn-remove i {
    font-size: 16px;
    color: #1a7e74;
}

.btn-remove:hover::after {
    content: "Supprimer l'activité";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a7e74;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 0.9rem;
    z-index: 10;
}

.main-container {
    display: flex;
    justify-content: space-between;
    width: 80%; /* Augmenter la largeur de la zone principale */
    padding: 20px;
    margin-left: 20%;
}

.side-content {
    width: 30%; /* Réduction de la largeur pour laisser plus de place */
    padding: 20px;
    background: white;
}

.side-content-item {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.side-content-item.pub {
    border-left: 4px solid #ffc107;
}

.side-content-item.conseil {
    border-left: 4px solid #28a745;
}

.login-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-container {
    width: 70%; /* Utiliser toute la largeur disponible */
    margin: 20px auto; /* Espacement en haut et en bas */
    padding: 20px; /* Espacement intérieur */
    background: #ffffff; /* Fond blanc pour le conteneur admin */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre pour le conteneur */
}

.admin-container h2 {
    margin-bottom: 20px; /* Espacement en bas du titre */
    font-size: 1.5rem; /* Taille de police pour le titre */
    color: #333; /* Couleur du texte */
}

.admin-content {
    margin-top: 20px; /* Espacement au-dessus du contenu admin */
    padding: 20px; /* Espacement intérieur */
    background: #f8f9fa; /* Fond gris clair pour le conteneur admin */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre pour le conteneur */
}

.content-wrapper {
    display: flex; /* Utiliser flexbox pour aligner les éléments */
    justify-content: space-between; /* Espacement entre le formulaire et la liste */
    align-items: flex-start; /* Aligner les éléments en haut */
}

.content-form {
    width: 45%; /* Ajuster la largeur du formulaire */
    margin-right: 20px; /* Espacement à droite */
}

.content-list {
    width: 45%; /* Ajuster la largeur de la liste de contenu */
    margin-top: 20px; /* Espacement au-dessus de la liste de contenu */
}

.content-form .form-group {
    margin-bottom: 15px; /* Espacement entre les groupes de formulaire */
}

.content-form label {
    display: block; /* Afficher les labels en bloc */
    margin-bottom: 5px; /* Espacement en bas des labels */
    font-weight: bold; /* Mettre les labels en gras */
    color: #555; /* Couleur du texte des labels */
}

.content-form input[type="text"],
.content-form textarea,
.content-form select {
    width: 100%; /* Largeur à 100% pour les champs */
    padding: 10px; /* Espacement intérieur */
    border: 1px solid #ced4da; /* Bordure grise */
    border-radius: 4px; /* Coins arrondis */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre intérieure */
}

.content-list {
    margin-top: 20px; /* Espacement au-dessus de la liste de contenu */
}

.content-item {
    margin-bottom: 15px; /* Espacement entre les éléments de contenu */
    padding: 15px; /* Espacement intérieur */
    background: #ffffff; /* Fond blanc pour les éléments de contenu */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre pour les éléments de contenu */
}

.content-item h4 {
    margin: 0 0 10px; /* Espacement en bas du titre de contenu */
    font-size: 1.2rem; /* Taille de police pour le titre de contenu */
    color: #333; /* Couleur du texte */
}

.content-item img {
    max-width: 100%; /* S'assurer que l'image ne déborde pas */
    border-radius: 5px; /* Coins arrondis pour l'image */
    margin-top: 10px; /* Espacement au-dessus de l'image */
}

.btn-small {
    padding: 5px 10px; /* Espacement intérieur */
    font-size: 0.9rem; /* Taille de police réduite */
    border: none; /* Pas de bordure */
    border-radius: 4px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main */
    transition: background-color 0.3s; /* Transition pour la couleur de fond */
}

.btn-active {
    background-color: #dc3545; /* Couleur pour le bouton actif */
    color: white; /* Couleur du texte */
}

.btn-inactive {
    background-color: #28a745; /* Couleur pour le bouton inactif */
    color: white; /* Couleur du texte */
}

.admin-controls {
    margin-top: 20px; /* Espacement au-dessus des contrôles admin */
}

.admin-controls .btn {
    background-color: #1a7e74; /* Couleur de fond pour le bouton */
    color: white; /* Couleur du texte */
    padding: 10px 15px; /* Espacement intérieur */
    border-radius: 5px; /* Coins arrondis */
    text-decoration: none; /* Pas de soulignement */
    transition: background-color 0.3s; /* Transition pour la couleur de fond */
}

.admin-controls .btn:hover {
    background-color: #15645c; /* Couleur de fond au survol */
}

.day {
    display: flex; /* Utiliser flexbox pour aligner le texte et l'icône */
    align-items: center; /* Centrer verticalement */
    justify-content: space-between; /* Espacement entre le texte et l'icône */
    cursor: pointer; /* Indiquer que c'est cliquable */
}

.day i {
    margin-left: 10px; /* Espacement à gauche de l'icône */
    transition: transform 0.3s; /* Transition pour l'animation */
}

.day:hover i {
    transform: rotate(180deg); /* Rotation de l'icône au survol */
}

.top-destinations {
    margin: 20px auto; /* Centrer la section */
    padding: 20px;
    background: white;
    max-width: 800px; /* Limiter la largeur */
}

.top-destinations h2 {
    color: #1a7e74;
    margin-bottom: 15px;
    text-align: center;
}

.top-destinations ul {
    list-style-type: none;
    padding: 0;
}

.top-destinations li {
    margin: 10px 0;
    padding: 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Styles pour la liste des suggestions d'autocomplétion */
.suggestions-list {
    border-radius: 4px; /* Coins arrondis */
    max-height: 200px; /* Hauteur maximale */
    overflow-y: auto; /* Barre de défilement si nécessaire */
    position: absolute; /* Positionnement absolu pour superposer sur le champ de texte */
    background-color: white; /* Fond blanc */
    z-index: 1000; /* Assurer que la liste est au-dessus des autres éléments */
    width: 26%; /* Largeur à 100% pour correspondre à la largeur du conteneur parent */
    margin-top: 2px; /* Espacement au-dessus de la liste */
}

.suggestion-item {
    padding: 10px; /* Espacement interne */
    cursor: pointer; /* Curseur en forme de main pour indiquer que c'est cliquable */
}

.suggestion-item:hover {
    background-color: #f0f0f0; /* Changement de couleur au survol */
}

.destination-images {
    margin: 20px auto; /* Centrer la section */
    padding: 20px;
    background: #f8f9fa;
}

.image-grid {
    display: grid; /* Utiliser une grille pour les images */
    grid-template-columns: repeat(4, 1fr); /* Trois colonnes */
    gap: 20px; /* Espacement entre les images */
}

.image-item {
    text-align: center; /* Centrer le texte sous l'image */
}

.image-item img {
    width: 100%; /* Largeur à 100% pour remplir le conteneur */
    height: 150px; /* Ajuster la hauteur maximale pour l'image */
    object-fit: cover; /* Couvrir le conteneur sans déformer l'image */
    border-radius: 5px; /* Coins arrondis pour l'image */
}

.form-container {
    width: 80%; /* Augmenter la largeur de la section du formulaire */
    margin: 0 auto; /* Centrer horizontalement */
    padding: 1%;
}

/* Ajoutez ces styles pour la carte de publicité */
.publicity-card {
    display: flex;
    flex-direction: column;
    background: #c8e7e4; /* Fond jaune pâle */
    border-left: 4px solid #1a7e74; /* Bordure gauche jaune */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre légère */
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.publicity-card h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #856404;
}

.publicity-card p {
    font-size: 1rem;
    color: #7a7a7a;
    margin-bottom: 12px;
}

.publicity-card img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 12px;
    object-fit: cover;
}

.publicity-card a {
    align-self: flex-start;
    background-color: #ffc107;
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.publicity-card a:hover {
    background-color: #e0a800;
}

/* Accessibilité */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: #1a7e74;
    color: white;
    text-decoration: none;
}

.skip-link:focus {
    left: 50%;
    transform: translateX(-50%);
}

/* Amélioration du focus */
:focus {
    outline: 3px solid #1a7e74;
    outline-offset: 2px;
}

/* Amélioration du contraste */
.btn, 
.btn-back,
.btn-add {
    color: white;
    background-color: #1a7e74;
    /* Maintenir un ratio de contraste d'au moins 4.5:1 */
}

/* Support réduction des animations */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

#numberOfPersons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de largeur égale */
    gap: 10px; /* Espacement entre les éléments */
    margin-bottom: 20px;
}

#numberOfPersons label {
    display: flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 0;
}

#numberOfPersons input[type="radio"] {
    margin-right: 8px;
}

#budgetOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

#budgetOptions label {
    display: flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#budgetOptions label:hover {
    background-color: #e9ecef;
}

#budgetOptions input[type="radio"] {
    margin-right: 8px;
}

#budgetOptions input[type="radio"]:checked + label {
    background-color: #1a7e74;
    color: white;
}

#durationOptions {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
    gap: 10px;
    margin-bottom: 20px;
}

#durationOptions label {
    display: flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#durationOptions label:hover {
    background-color: #e9ecef;
}

#durationOptions input[type="radio"] {
    margin-right: 8px;
}

#durationOptions input[type="radio"]:checked + label {
    background-color: #1a7e74;
    color: white;
}

/* Modifier le style du steps-navigation pour ne plus avoir de gap pour le bouton */
.steps-navigation {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 20px;
}

/* Media Queries pour le Responsive Design */

/* Tablettes et petits écrans (jusqu'à 992px) */
@media screen and (max-width: 992px) {
    .main-container {
        width: 95%;
        margin: 0 auto;
        flex-direction: column;
    }

    .container-index {
        width: 100%;
    }

    .side-content {
        width: 100%;
        margin-top: 20px;
    }

    .form-container {
        width: 100%;
    }

    .activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .interests-checkboxes,
    #durationOptions,
    #numberOfPersons,
    #budgetOptions {
        grid-template-columns: repeat(2, 1fr);
    }

    .recap-content {
        width: 90%;
    }

    .content-wrapper {
        flex-direction: column;
    }

    .content-form,
    .content-list {
        width: 100%;
        margin-right: 0;
    }
}

@media screen and (max-width: 1200px) {
    .timeline {
        grid-template-columns: repeat(2, 1fr);
        width: 98%;
    }
}

/* Tablettes portrait et grands mobiles (jusqu'à 768px) */
@media screen and (max-width: 768px) {
    .activities-grid {
        grid-template-columns: 1fr;
    }

    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-content {
        flex-direction: column;
        text-align: center;
    }

    .timeline-content i {
        margin-top: 10px;
        margin-left: 0;
    }

    .activity-item {
        flex-direction: column;
    }

    .activity-actions {
        flex-direction: column;
        gap: 10px;
    }

    .activity-info {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .recap-info {
        flex-direction: column;
        gap: 10px;
    }

    .separator {
        display: none;
    }

    .btn-group {
        flex-direction: column;
        gap: 10px;
    }

    .steps-indicator {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .step {
        margin: 5px 0;
    }

    .timeline {
        flex-direction: column;
        overflow-x: visible;
    }

    .timeline-day {
        min-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .timeline {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/* Petits mobiles (jusqu'à 576px) */
@media screen and (max-width: 576px) {
    .image-grid {
        grid-template-columns: 1fr;
    }

    .interests-checkboxes,
    #durationOptions,
    #numberOfPersons,
    #budgetOptions {
        grid-template-columns: 1fr;
    }

    .activity-card {
        height: auto;
    }

    .activity-header {
        height: auto;
    }

    .activity-image {
        height: 200px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    .form-step {
        padding: 10px;
    }

    .btn, .btn-small {
        width: 100%;
        margin: 5px 0;
    }

    .container-plan {
        width: 100%;
        margin: 0;
        padding: 10px;
    }

    .top-destinations {
        padding: 10px;
    }

    .top-destinations li {
        font-size: 0.9rem;
    }

    .publicity-card {
        padding: 10px;
    }

    .admin-container {
        width: 100%;
        padding: 10px;
    }
}

.steps-indicator {
    flex-direction: row !important;
    overflow-x: auto;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 10px;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .steps-indicator::-webkit-scrollbar {
    display: none;
  }

  .steps-indicator::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30px;
    pointer-events: none;
    background: linear-gradient(to left, white, rgba(255,255,255,0));
    z-index: 2;
  }

  .steps-indicator::before {
    content: '\2192'; /* flèche droite */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #999;
    animation: pulse-arrow 1.5s infinite ease-in-out;
    z-index: 3;
  }

  @keyframes pulse-arrow {
    0%, 100% {
      opacity: 0.3;
      transform: translateY(-50%) translateX(0);
    }
    50% {
      opacity: 1;
      transform: translateY(-50%) translateX(-5px);
    }
  }

  .step {
    flex: 0 0 auto;
    white-space: nowrap;
  }

/* Ajustements pour très petits écrans (jusqu'à 360px) */
@media screen and (max-width: 360px) {
    body {
        font-size: 14px;
    }

    .activity-item {
        padding: 10px;
    }

    .time-input {
        width: 100%;
        margin-bottom: 10px;
    }

    .btn-remove,
    .btn-add {
        font-size: 0.9rem;
        padding: 8px;
    }

    .activity-info span {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* Ajustements pour l'impression */
@media print {
    .btn,
    .btn-add,
    .btn-remove,
    .btn-back,
    .admin-controls,
    .side-content {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .activity-card,
    .timeline-day,
    .activities-detail {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .main-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .activity-image {
        max-width: 300px;
        height: auto;
    }
}

/* Style pour le logo dans le h2 - désactivé */
h2 img {
    display: none; /* Cacher complètement l'image du logo */
}

/* Masquer toutes les images dans le récapitulatif */
#recap img,
.recap-wrapper img,
.recap-content img,
.recap-infoButton img {
    display: none !important;
}

.header-container {
    display: flex;
    flex-direction: row; /* Changer de row-reverse à row */
    align-items: center; /* Centrer verticalement */
    justify-content: space-between; /* Espacement entre les éléments */
    margin-bottom: 1%;
    margin-top: 1%;
    padding: 0 20px;
    position: relative; /* Pour le positionnement des éléments enfants */
    width: 100%; /* S'assurer que le conteneur prend toute la largeur */
    height:100px;
}

/* Ajouter un nouveau style pour le conteneur du steps-indicator */
.steps-navigation {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre le bouton et l'indicateur */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    position: absolute; /* Positionnement absolu */
    left: 50%; /* Centre horizontalement */
    transform: translateX(-50%); /* Ajustement pour un centrage parfait */
    width: auto; /* Permet au conteneur de s'adapter à son contenu */
}

.budget-counter {
    background: white;
    padding: 15px;
    margin-bottom: 20px;
    width: 50%;
    margin: 0 auto;
}

.budget-info {
    text-align: center;
    font-size: 1.1rem;
    color: #333;
}

.budget-progress {
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #28a745;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.nav-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    background-color: white;
    padding-top: 2%;
    padding-bottom: 0.5%;
}

.nav-btn {
    padding: 12px 25px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    background-color: #f8f9fa;
    color: #1a7e74;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto;
    min-width: 150px;
}

.nav-btn.active {
    background-color: #1a7e74;
    color: white;
}

.content-container {
    width: 100%;
    margin: 0 auto;
    background-color: white;
}

.section {
    display: none;
    width: 100%;
}

.section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Navigation du timeline */
.timeline-navigation,
.scroll-btn {
    display: none;
}

.day-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    min-width: 300px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h3 {
    color: #1a7e74;
    margin-bottom: 20px;
    text-align: center;
}

.days-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.day-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.day-option:hover {
    background: #1a7e74;
    color: white;
}

.btn-cancel {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #6c757d;
    color: white;
    cursor: pointer;
}

.btn-cancel:hover {
    background: #5a6268;
}

/* Style spécifique pour les images dans activity-item > activity-info */
.activity-item .activity-image {
    overflow: hidden;
    height:  150px; /* Moitié de la hauteur originale de 150px */
    width: 40%; /* Moitié de la largeur */
    margin: 0 auto;
}

.activity-item .activity-image img {
    width: 70%;
    height:  200px; /* Moitié de la hauteur originale de 150px */
    object-fit: cover;
    border-radius: 5px;
}

.activity-card .activity-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

/* Style spécifique pour l'input time dans activity-info */
.activity-item .time-input {
    font-size: 1rem; /* Réduire la taille de police */
    width: auto; /* Réduire la largeur */
    padding: 2px 5px; /* Réduire le padding */
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #1a7e74;
    width: 30%;
}

.activity-item .time-input:hover {
    border-color: #1a7e74;
}

/* Styles personnalisés pour Flatpickr */
.flatpickr-calendar {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.flatpickr-day.selected {
    background: #1a7e74 !important;
    border-color: #1a7e74 !important;
}

.flatpickr-day:hover {
    background: #c8e7e4 !important;
    border-color: #1a7e74 !important;
}

.flatpickr-current-month {
    color: #1a7e74 !important;
}

.flatpickr-monthDropdown-months {
    background: #fff !important;
}

.slider-container {
    width: 100%;
    padding: 20px 10px;
    margin-top: 20px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #e9ecef;
    outline: none;
    margin-bottom: 15px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #1a7e74;
    cursor: pointer;
    transition: background .3s ease-in-out;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #1a7e74;
    cursor: pointer;
    transition: background .3s ease-in-out;
    border: none;
}

.slider::-webkit-slider-thumb:hover {
    background: #15645c;
}

.slider::-moz-range-thumb:hover {
    background: #15645c;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    color: #666;
    font-size: 0.9rem;
}

#personCount {
    font-weight: bold;
    color: #1a7e74;
    margin-left: 5px;
}

.activity-item-image {
    height: 75px !important; /* Force la hauteur à 75px */
    width: 60% !important; /* Force la largeur à 50% */
    margin: 0 auto;
}

.activity-item-image img {
    height: 75px !important; /* Force la hauteur à 75px */
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.activity-item h4 {
    color: #1a7e74;
    margin: 0;
    font-size: 1.1rem;
}

/* Styles pour le sélecteur d'heure */
.time-picker-group {
    margin-bottom: 30px;
}

.time-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.time-input-container input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 2px solid #1a7e74;
    border-radius: 8px;
    font-size: 1.1rem;
    color: #1a7e74;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.time-input-container i {
    position: absolute;
    right: 15px;
    color: #1a7e74;
    font-size: 1.2rem;
    pointer-events: none;
}

.time-input-container input:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 5px rgba(26, 126, 116, 0.1);
}

/* Style du sélecteur Clocklet */
.clocklet {
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    border: none;
}

.clocklet-hand {
    background: #1a7e74 !important;
}

.clocklet-hand-origin {
    background: #1a7e74 !important;
}

.clocklet-tick.clocklet-active {
    background: #1a7e74 !important;
    color: white !important;
}

.clocklet-ampm > .clocklet-active {
    background: #1a7e74 !important;
    color: white !important;
}

/* Style amélioré du sélecteur Clocklet */
.clocklet {
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    border: none;
    padding: 15px;
}

/* Style des aiguilles */
.clocklet-hand {
    background: #1a7e74 !important;
    transition: transform 0.2s ease;
}

.clocklet-hand-origin {
    background: #1a7e74 !important;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Style des nombres et points */
.clocklet-tick {
    color: #666;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.clocklet-tick:hover {
    background: rgba(26, 126, 116, 0.1) !important;
    color: #1a7e74 !important;
}

.clocklet-tick.clocklet-active {
    background: #1a7e74 !important;
    color: white !important;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Style du conteneur des heures/minutes */
.clocklet-dial {
    background: #f8f9fa;
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Animation au survol du conteneur d'input */
.time-input-container:hover input {
    border-color: #15645c;
    box-shadow: 0 2px 8px rgba(26, 126, 116, 0.15);
}

/* Custom Time Picker Styles */
.time-picker {
    max-width: 200px;
    margin: 0 auto;
}

.time-display {
    background: white;
    border: 2px solid #1a7e74;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.time-display:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(26, 126, 116, 0.15);
}

.time-value {
    font-size: 1.2rem;
    color: #1a7e74;
    font-weight: 500;
}

.time-selector {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
    display: none;
    position: absolute;
    width: 200px;
    z-index: 1000;
}

.time-selector.active {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}

.time-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.time-separator {
    font-size: 1.5rem;
    color: #1a7e74;
    margin: 0 15px;
    font-weight: bold;
}

.time-arrow {
    background: none;
    border: none;
    color: #1a7e74;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s ease;
}

.time-arrow:hover {
    transform: scale(1.2);
}

.time-column .current-value {
    font-size: 1.5rem;
    color: #1a7e74;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
}

/* Animation pour le sélecteur */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(-10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nouveaux styles pour le récapitulatif */
.recap-wrapper {
    display: flex;
    padding: 1rem;
    background: #c8e7e4;
    width: 100%;
}

.recap-main {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.recap-main h2 {
    width: 33.33%; /* Un tiers de l'espace */
    color: #1a7e74;
    margin: 0;
    text-align: left;
}

/* Ajustement responsive */
@media screen and (max-width: 992px) {
    .recap-main {
        flex-direction: column;
        gap: 1rem;
    }

    .recap-main h2,
    .recap-content,
    .btn-modify {
        width: 100%;
        text-align: center;
    }

    .btn-modify {
        max-width: 300px;
        margin: 0 auto;
    }
}

.activity-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-change-day, .btn-remove {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.btn-change-day i, .btn-remove i {
    font-size: 16px;
    color: #1a7e74;
    padding: 4px;
}

/* Supprimer l'inversion de couleur au survol */
.btn-change-day:hover i, .btn-remove:hover i {
    color: #1a7e74;
}

/* Style commun pour les infobulles */
.btn-change-day:hover::after, .btn-remove:hover::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #1a7e74;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 0.9rem;
    z-index: 10;
    top: -30px;
}

.btn-change-day:hover::after {
    content: "Changer le jour de l'activité";
}

.btn-remove:hover::after {
    content: "Supprimer l'activité";
}

.btn-change-day:hover::after {
    content: "Changer le jour de l'activité";
}

.btn-remove:hover::after {
    content: "Supprimer l'activité";
}

.planning-header {
    display: flex;
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    width: 100%;
    margin-bottom: 20px;
    padding: 0 20px;
    gap: 40px; /* Espacement fixe entre les éléments */
}

.planning-header h2 {
    margin: 0;
    flex: 0 0 auto;
}

.planning-header .budget-counter {
    margin: 0;
    flex: 0 0 auto;
    max-width: 30%; /* Largeur fixe pour le compteur */
}

/* Styles pour le filtre par centre d'intérêt */
.filter-section {
    text-align: center;
    margin: 20px 0;
    padding: 0 20px;
}

.interest-filter {
    padding: 8px 15px;
    border: 2px solid #1a7e74;
    border-radius: 8px;
    background: white;
    color: #1a7e74;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 30%; /* Changer de min-width à width avec pourcentage */
    max-width: none; /* Supprimer la max-width fixe */
}

.interest-filter:hover {
    border-color: #15645c;
    box-shadow: 0 2px 5px rgba(26, 126, 116, 0.1);
}

.interest-filter:focus {
    outline: none;
    border-color: #15645c;
    box-shadow: 0 0 0 2px rgba(26, 126, 116, 0.2);
}

@media screen and (max-width: 768px) {
    .filter-section {
        text-align: center;
    }
    
    .interest-filter {
        width: 80%;
    }
}

/* Nouveau style pour le planning */
.planning-layout {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.days-list-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: white;
    border-radius: 8px;
    padding: 15px;
    max-height: 80vh;
    overflow-y: auto;
}

.day-item {
    padding: 15px;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.day-item:hover {
    background: #e9ecef;
}

.day-item.active {
    background: #c8e7e4;
    border-left-color: #1a7e74;
}

.day-item .date {
    font-weight: bold;
    color: #1a7e74;
    margin-bottom: 5px;
}

.activities-view {
    flex-grow: 1;
    background: white;
    border-radius: 8px;
    padding: 20px;
    min-height: 80vh;
}

.activities-view.empty {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-style: italic;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .planning-layout {
        flex-direction: column;
    }

    .days-list-sidebar {
        width: 100%;
        max-height: none;
    }

    .activities-view {
        min-height: auto;
    }
}

.btn-save-time {
    background: none;
    border: none;
    cursor: pointer;
    color: #1a7e74;
    padding: 4px;
    margin-right: 5px;
}

.btn-save-time:hover {
    color: #15645c;
}

.btn-save-time i {
    font-size: 16px;
}

/* Modifier le style du bouton de génération */
.submit-wrapper button[type="submit"] {
    max-width: 300px;
    margin: 0 auto;
    font-size: 1.1rem; /* Réduire la taille de la police */
    padding: 15px 30px;
    display: block;
}

/* Modifier le style du message d'attente */
.message {
    text-align: center;
    color: #666;
    margin-top: 15px;
    font-size: 0.9rem;
    display: none; /* Caché par défaut */
}

/* Styles pour le bouton de site web des activités */
.website-btn {
    display: inline-block;
    background: white;
    color: #1a7e74;
    text-decoration: none;
    padding: 8px 15px;
    border: 2px solid #1a7e74;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(26, 126, 116, 0.1);
}

.website-btn:hover {
    background: #1a7e74;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(26, 126, 116, 0.2);
    text-decoration: none;
}

.website-btn i {
    margin-right: 5px;
    font-size: 11px;
}

.activity-info {
    position: relative;
}

.activity-description {
    margin-bottom: 8px;
}

/* Styles pour les options de budget */
.budget-type-selection {
    text-align: center;
}

.budget-option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    justify-content: center;
}

.budget-option:hover {
    background-color: #e9ecef;
    border-color: #1a7e74;
}

.budget-option input[type="radio"] {
    margin-right: 10px;
    width: auto;
}

.budget-option input[type="radio"]:checked + span {
    font-weight: bold;
    color: #1a7e74;
}

.budget-option:has(input[type="radio"]:checked) {
    background-color: #c8e7e4;
    border-color: #1a7e74;
}

/* Styles pour la section des personnes personnalisées */
.custom-persons-section {
    text-align: center;
}

.custom-persons-section label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    cursor: pointer;
}

.custom-persons-section input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
}

#customPersonsInput {
    max-width: 300px;
    margin: 0 auto;
}

#customPersonsInput label {
    text-align: left;
    display: block;
    margin-bottom: 5px;
}

#budgetCalculation {
    font-style: italic;
    text-align: center;
}

/* Media queries pour la responsivité */
@media screen and (max-width: 768px) {
    .budget-type-selection > div {
        flex-direction: column;
        gap: 10px;
    }
    
    .budget-option {
        min-width: auto;
        width: 100%;
    }
}

/* ========== STYLES POUR LE CLASSEMENT DES DESTINATIONS POPULAIRES ========== */

.top-destinations {
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    max-width: 1200px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.top-destinations h2 {
    color: #1a7e74;
    margin-bottom: 30px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.destination-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.destination-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(26, 126, 116, 0.2);
}

.rank-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #808080);
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #8B4513);
}

.rank-badge.rank-4,
.rank-badge.rank-5 {
    background: linear-gradient(135deg, #1a7e74, #15645c);
}

.rank-number {
    font-size: 1.5rem;
}

.destination-content {
    margin-top: 20px;
    margin-bottom: 15px;
}

.destination-title {
    color: #1a7e74;
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.destination-title i {
    color: #e74c3c;
}

.destination-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.interests-tag,
.popularity-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #666;
}

.interests-tag i {
    color: #e74c3c;
}

.popularity-badge i {
    color: #1a7e74;
}

.btn-details {
    width: 100%;
    padding: 12px;
    background: #1a7e74;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.btn-details:hover {
    background: #15645c;
    transform: scale(1.02);
}

.destination-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.destination-modal.show {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal-content-box {
    position: relative;
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f8f9fa;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
}

.modal-close-btn:hover {
    background: #e9ecef;
    transform: rotate(90deg);
}

.modal-close-btn i {
    color: #666;
    font-size: 1.2rem;
}

.modal-header {
    background: linear-gradient(135deg, #1a7e74, #15645c);
    padding: 40px 30px;
    text-align: center;
    color: white;
    border-radius: 20px 20px 0 0;
}

.modal-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.modal-icon i {
    font-size: 2rem;
    color: #FFD700;
}

.modal-header h2 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    color: white;
}

.modal-subtitle {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.modal-body {
    padding: 30px;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.detail-row:hover {
    background: #e9ecef;
}

.detail-icon {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.detail-icon i {
    font-size: 1.3rem;
    color: #1a7e74;
}

.detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.detail-label {
    font-size: 0.85rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.detail-value {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
}

.info-box {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    border-left: 4px solid #2196F3;
}

.info-box i {
    font-size: 1.5rem;
    color: #2196F3;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box p {
    margin: 0;
    color: #1565C0;
    line-height: 1.6;
    font-size: 0.95rem;
}

@media screen and (max-width: 768px) {
    .destinations-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content-box {
        width: 95%;
    }
    
    .modal-header {
        padding: 30px 20px;
    }
    
    .modal-body {
        padding: 20px;
    }
}

/* ========== FIN DES STYLES POUR LE CLASSEMENT ========== */