#mission{
  cursor:pointer;
}
#mission-container{
  background:white;
}

.btn-primary{
  background: #603e1b!important;
  border-color: #603e1b!important;
}
.modal_subj{
    display:none;
}

.profile-container {
    position: relative;
    display: inline-block;
}
.mission-louis{
  width: 120px;
  position: relative;
  top: -60px;
}
.mission-louis-img{
    margin-top: -150px;
}
.mission-title{
  font-size: 20px;
  padding-top: 10px;
}
.flex-mission{
    display:flex;
}
.mission-image{
  margin-left: -30px;
  margin-right: -30px;
  margin-top: -30px;
  width: calc(100% + 60px);
  max-width: inherit;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 200px;
  object-fit: cover;
}
.mission-image2{
    height: 250px!important;
}

/* Image de profil */

/* Style du +1 */
.plus-one {
    position: absolute;
    background-color: red;
    z-index:99999;
    color: white;
    font-size: 14px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 1;
    transform: scale(1.2);
    transition: transform 3s ease-out;
}

.valeur_chevaleresque{
    font-weight:bold;
}
.defi{
    font-style:italic;
}



.btn-info{
  background: white!important;
  border-color: black!important;
  margin-right: 10px!important;
}


.breadcrumb ul {
    display: flex;
    padding: 0;
    list-style:none;

  }

  .breadcrumb .step {
    color:grey;
    margin-right: 5px;
  }

  .breadcrumb .step.active {
    color: black;
  }
  .breadcrumb{
      justify-content: space-evenly;
      width:100%.
  }
  .breadcrumb .step:not(:last-child)::after {
  content: " • ";
  color: grey;
  margin-left: 5px;
}
/* Style de la modale success */
.modal_success {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  visibility: hidden; /* Par défaut, la modale est cachée */
}

/* Contenu de la modale */
.modal_content {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  text-align: center;
}

/* Boutons de réponse */
#answers button {
  padding: 10px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#answers button:hover {
  background-color: #0056b3;
}

/* Style pour feedback */
#feedback {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* Message de succès */
#success_message {
  margin-top: 20px;
}

#success_message img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}


/* Style pour la question */
#question {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

/* Style pour les boutons de réponse */
#answers {
  display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

#answers button {
  padding: 10px;
  font-size: 16px;
  background-color: #603e1b;;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#answers button:hover {
  background-color: #0056b3;
}

/* Style pour le feedback */
#feedback {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* Feedback pour la bonne réponse */
#feedback.good {
  color: green;
}

/* Feedback pour la mauvaise réponse */
#feedback.bad {
  color: red;
}


/* Default size for .visuel */
.visuel {
    width: 25px; /* Base width for zoom-12 */
    position: absolute;
    z-index: -1;
    top: -50%;
    left: -25%;
    transition: width 0.3s ease; /* Smooth transition */
}

/* Size adjustments for different zoom levels using percentage increases */
.zoom-12 .visuel {
    width: 100%; /* 100% of the base value, 25px */
    display:none;
}

.zoom-13 .visuel {
    width: 145%; /* 145% of 25px (36.25px) */
    display:none;
}

.zoom-14 .visuel {
    width: 190%; /* 190% of 25px (47.5px) */
    display:none;
}

.zoom-15 .visuel {
    width: 235%; /* 235% of 25px (58.75px) */

}

.zoom-16 .visuel {
    width: 280%; /* 280% of 25px (70px) */
}

.zoom-17 .visuel {
    width: 325%; /* 325% of 25px (81.25px) */
}

.zoom-18 .visuel {
    width: 370%; /* 370% of 25px (92.5px) */
}

.zoom-19 .visuel {
    width: 415%; /* 415% of 25px (103.75px) */
}

.zoom-20 .visuel {
    width: 520%; /* 520% of 25px (130px) */
}




#loading-logo {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#loading-logo .footer-img{
  position: fixed;
  width: 50%;
  max-width: 300px;
  top: calc(80% - 100px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* Assurez-vous qu'il soit au-dessus des autres éléments */
  animation: moveLogo 1.5s infinite;
}
#loading-logo .footer-loading{
    color:white;
    background:black;
    position:fixed;
    bottom:0;
    padding:10px;
    font-size:17px;
    text-align:center;
    width:100%;
}

/* Effet de mouvement du logo */
@keyframes moveLogo {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Default background for desktop */
@media (min-width: 768px) {
  #loading-logo {
    background-image: url('/img/start_desktop.png');
    background-color: whitesmoke;
  }
}

/* Background for mobile */
@media (max-width: 767px) {
  #loading-logo {
    background-image: url('/img/start_mobile.png');
    background-color: whitesmoke;
  }
  #loading-logo .footer-img{
            top: calc(100% - 150px);
  }
}
/* Style pour centrer le logo */

/* Position absolute for profile dropdown */
#profile-options {
    position: absolute;
    top: 60px;  /* Adjust as needed to align under the icon */
    right: 0;
    width: 280px;

    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;  /* Ensure it appears above other elements */
}

/* Styling for profile dropdown */
.profile-menu {
    padding: 10px;
}

/* Ensures dropdown stays visible on hover (optional) */
.profile_img{
    margin-top: 17px; margin-right: 10px; cursor: pointer;
}
.profile_img.noTop{
    margin-top: 0px!important;
}


#profile-options.show {
    display: block !important;
}

#logout-btn{
    cursor:pointer;
}
#register-btn:hover{
      color:black;
}
.logged_show{
    display:block;
    color:black;
}


body{
    background-color:#f0e4d7;
}

.limited-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limite à 3 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Ajuste selon ton besoin */
}


#download-app-message button {
    background-color: white;
    color: #613e1b;
    border: none;
    padding: 8px 16px;
    margin-top: 0px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}




#loading-background {
  visibility: hidden; /* Masquer la carte au départ */
}




.descriptiontot{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
#map-controls {
  position: absolute;
  top: -60px;
  left: 20px;
  z-index: 1000;
}

#recenter-map-button {
    background-color: white; /* Bleu Bootstrap */
    color: green;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-content: center;
    align-items: center;
}



#distance_target{
  float: right;
  border: solid 2px #bbbbbb;
  padding: 7px;
  border-radius: 5px;
  margin-top:10px;
}
#distance_target div{
  font-size: 85%;
  text-align: center;
  height: 17px;
}
#distance_target div.dist{
  font-size: 100%;
  height: 17px;
}

.liste-flottante {
  list-style: none;      /* Supprime les puces */
  padding: 0;
  margin: 0;
}

.liste-flottante li {
  float: left;           /* Aligne chaque <li> à gauche */
  margin-right: 10px;    /* Espacement entre les éléments */
  background: #f0f0f0;   /* Juste pour voir le bloc */
  padding: 5px 10px;
  border: 1px solid #ccc;
}


#SetModeFollow,#charge-marker-button{
  float: right;
  margin-top: 10px;
  margin-left: 10px;
  height: 51px;
}
#charge-marker-button{
    background: orange!important;
    border: 1px solid orange!important;
    max-width: 100px;
    line-height: 1;
}

.btn-primary{
  display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background-color: #198754;
  border: 1px solid #198754;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}



.market_target{
    border: 2px solid #5200ff!important;
}
.market_target .halo{
    border: 3px solid #5200ff!important;
}

.target_modal #distance_target {
    margin-top: -15px;
}



.progress-bar {
    width: 100%;
    height: 8px;
    background-color: whitesmoke;
    border-radius: 4px;
    overflow: hidden;
    margin: 5px 0;
}

.progress {
    width: 0%;
    height: 100%;
    background-color: orange;
    transition: width 0.5s;
}

.activeMarker{
    border: 2px solid orange!important;
    z-index:999;
    width: 50px!important; /* Taille du halo */
    height: 50px!important;
}
.activeMarker .halo{
    border: 3px solid orange!important;
}

.activeMarker .halo {
  width: 70px; /* Taille du halo */
  height: 70px;
  margin-top: -37px;
  margin-left: -37px;
  animation: haloAnimation 1s infinite; /* Animation infinie */
}

.zoom-medium .custom-marker{
    border-radius: 50%;
    position: relative;
    display: inline-block;
    width: 10px!important; /* Taille de l'élément de l'icône */
    height: 10px!important; /* Taille de l'élément de l'icône */
    margin-left: -5px!important;
    margin-top: -5px!important;
    border: 1px solid #603d1b;;
}
.zoom-medium .custom-marker.activeMarker .halo,.zoom-medium .superactiveMarker .halo,.zoom-medium .market_target .halo{
  width: 12px; /* Taille du halo */
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  animation: haloAnimation 1s infinite; /* Animation infinie */
}

.superactiveMarker{
    border: 2px solid green!important;
}
.superactiveMarker .halo{
    display:none!important;
}


.custom-marker {
    border-radius: 50%;
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid;
    background-image: url('/img/add.svg') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

/* ===========================
   🟢 États principaux
=========================== */
.custom-marker       { background: #603d1b; border-color: #603d1b; }
.activeMarker        { background: orange; border-color: orange; }
.market_target       { background: #5200ff; border-color: #5200ff; }
.superactiveMarker   { background: green; border-color: green; background-image: url('/img/check.svg') !important; }

/* ===========================
   🔍 Mode "zoom-medium"
=========================== */
.zoom-medium .custom-marker,
.zoom-medium .activeMarker,
.zoom-medium .market_target,
.zoom-medium .superactiveMarker {
    background-image: none !important;
    border-color: white;
}

/* ===========================
   🎨 Nouvelles catégories
=========================== */
.css_port     { background: #274060; border-color: #274060; }  /* Bleu sombre (port maritime ancien) */
.css_pierre   { background: #5e5c5c; border-color: #5e5c5c; }  /* Gris pierre (château) */
.css_campagne { background: #556b2f; border-color: #556b2f; }  /* Vert olive foncé (prairies médiévales) */
.css_vignoble { background: #4b3832; border-color: #4b3832; }  /* Bourgogne profond (vin) */
.css_ville    { background: #7b3e19; border-color: #7b3e19; }  /* Brun terre cuite (maisons anciennes) */
.css_bois     { background: #3e2f1c; border-color: #3e2f1c; }  /* Brun bois sombre (forêt, poutres) */

.activeMarker .halo {
  display:none;
}

.mode_follow .custom-marker{display:none;}
.mode_follow .market_target{display:block;}



.activeMarker .halo,.superactiveMarker .halo,.market_target .halo{
  display:block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px; /* Taille du halo */
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%; /* Faire un halo circulaire */
  border: 3px solid #f3ce7c; /* Couleur et opacité du halo */
  animation: haloAnimation 3s infinite; /* Animation infinie */
  z-index: -1; /* Le halo doit être derrière le marker */
}

.back-arrow {
    display: inline-block;
    color: white;
    float:left;
    cursor: pointer;
    height: 24px;
    transition: color 0.2s ease-in-out;
}

.back-arrow:hover {
    color: #146c43;
}



header {
    top: 0;
    left: 0;
    width: 100%;
    background-color: #603e1b;
    color: white;
    position:fixed;
    padding: 17px 20px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.header-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.search-container {
    position: relative;
}

.search-icon {
    cursor: pointer;
    font-size: 24px;
    height: 24px;
}

.search-bar {
    display: none;
    position: absolute;
    top: 30px; /* Ajuster la position sous l'icône */
    left: 0;
    z-index: 999;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.search-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    header {
        padding: 15px 30px;
    }

    .search-icon {
        font-size: 28px;
    }
}



/* Animation du halo */
@keyframes haloAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.7);
    opacity: 0.5; /* Le halo devient plus transparent quand il grandit */
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}



/* Map size */
@keyframes vibration {
    0% { transform: translateX(0); }
    25% { transform: translateX(5px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}



.marker-vibrate {
    animation: vibration 0.5s linear infinite;
}


.modal {
    display: none; /* Cachée par défaut */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Fond semi-transparent */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largeur de la modale */
    max-width: 600px; /* Limite la largeur */
    border-radius: 8px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#SetModeFollow {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    background-color: #198754;
    border: 1px solid #198754;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

#SetModeFollow:hover {
    background-color: #157347;
    border-color: #146c43;
}

#SetModeFollow:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

#SetModeFollow:active {
    background-color: #146c43;
    border-color: #13653f;
    box-shadow: none;
}

#bottom-modal {
        animation: slideInUp 0.3s ease-out;
    }

    @keyframes slideInUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    button#close-modal:hover {
        color: #ff0000;
    }

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

h2 {
    margin-top: 0;
}

.search-input {
    position: absolute;
    top: 20px;  /* Ajustez selon vos besoins */
    right: 20px;  /* Ajustez selon vos besoins */
    padding: 10px;
    border-radius: 25px;
    border: 2px solid #ccc;
    font-size: 16px;
    width: 250px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #4CAF50;  /* Changer la couleur de la bordure au focus */
    box-shadow: 0 4px 6px rgba(0, 128, 0, 0.2);
    outline: none;  /* Supprimer le contour par défaut */
}


.search-input::placeholder {
    color: #aaa;  /* Couleur du texte de l'espace réservé */
    font-style: italic;
}
      /* Styles for the map and search bar */
      #map {
          height: 500px;
          width: 100%;
      }



#footer{
    position: fixed;
    bottom: 0px;
    background: #f3ce7c;
    padding-left: 20px;
    border-top:5px solid #603d1b;
}
.card.disabled {
    filter: grayscale(100%);
}
.dessous{
  z-index: 9999;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 58px;
    font-size: 25px;
    color: #2d2222;
}

#map {
  height: 100%;
  width: 100%;
}

.cards-container {
    width: 100%; /* Full-width container */
    overflow: hidden; /* Hide overflow */
    position: relative; /* For slider positioning if needed */
    margin: 20px auto;
    height: 100px;
}

.cards-wrapper {
    display: flex; /* Align cards horizontally */
    transition: transform 0.3s ease; /* Smooth sliding effect */
    gap: 10px; /* Optional spacing between cards */
}
/* Body style */
.image-container {
    position: relative;
    width: 484px; /* Ou spécifie une taille fixe comme 500px */
    height: 485px; /* Ou spécifie une taille fixe comme 700px */
}

.image-container img.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 484px; /* Ou spécifie une taille fixe comme 500px */
    height: 485px; /* Ou spécifie une taille fixe comme 700px */
    object-fit: cover;
    border-radius: 10px;
}
.image-container img.charpentier-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 464px;
    margin: 10px;

    object-fit: contain;
}

.charpentier-image {
    z-index: 1; /* Cette image sera au-dessus */
}

.cards-container {
    width: 100%;
    height: 300px; /* Ajuster la hauteur selon vos besoins */
    position: relative;
    margin: 20px auto;
    overflow: hidden;
}

.cards-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.card {
    position: absolute; /* Pour superposer les cartes */
    width: 150px; /* Largeur des cartes */
    height: 200px; /* Hauteur des cartes */
    transform-origin: center; /* L'origine de la transformation est au centre de la carte */
    transition: transform 0.3s ease; /* Animation de transformation */
}

.card.enabled {
    transform: translateX(0) translateY(0); /* Position initiale */
}

.card.disabled {
    transform: translateX(10px) translateY(10px) rotate(5deg); /* Décalage pour superposer les cartes */
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card h3.dessous {
    text-align: center;
    margin-top: 10px;
}

body {
  margin: 0;
  height: 100vh;
  font-family: 'Arial', sans-serif;
}

.mobile-container {
    width:100%;
    height:100%;

}