/* Styles pour la barre de progression */
.progress-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items at the top */
    width: 80%;
    margin: 2vh auto 4vh auto;
    position: relative;
}

.progress-step {
    display: flex;
    flex-direction: column; /* Stack indicator and label vertically */
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 0 0 auto; /* Prevent steps from shrinking/growing */
    color: #adadad; /* Default color */
    transition: color 0.4s ease;
}

.step-indicator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e0e0e0; /* Default background */
    border: 2px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #adadad;
    margin-bottom: 5px; /* Space between indicator and label */
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.step-label {
    font-size: 1.2vh; /* Smaller label */
    font-weight: 500;
}

.progress-step.active .step-indicator {
    background-color: #7daed6; /* Active background */
    border-color: #7daed6;
    color: #ffffff;
}
.progress-step.active {
     color: #7daed6; /* Active text color */
}


.progress-step.completed .step-indicator {
    background-color: #525960; /* Completed background */
    border-color: #525960;
    color: #ffffff;
}
.progress-step.completed {
     color: #525960; /* Completed text color */
}


.progress-connector {
    flex-grow: 1;
    height: 2px;
    background-color: #e0e0e0; /* Default connector color */
    position: relative;
    top: 16px; /* Align with the center of indicators */
    margin: 0 -4.5vh; /* Overlap slightly with steps */
    transition: background-color 0.4s ease;
    z-index: 0;
}

.progress-connector.active {
     background-color: #7daed6; /* Active connector color */
}


/* Styles pour le formulaire multi-étapes */
.multi-step-form {
    background: white;
    padding: 3vh 8% 5vh 8%;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    margin: 0 2vh;
    overflow: hidden; /* Important pour cacher les étapes non actives */
}

.form-step {
    display: none; /* Cacher toutes les étapes par défaut */
    animation: fadeIn 0.5s ease-in-out;
}

.form-step.active {
    display: block; /* Afficher l'étape active */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.titleHead {
    font-size: 3vh;
    width: 35vh;
}

.step-title {
    font-size: 2.5vh;
    color: #525960;
    margin-bottom: 3vh;
    text-align: left;
}

.input-label {
    color: #555f68;
    font-weight: 600;
    font-size: 1.7vh;
    margin-bottom: 0.8vh;
    display: block;
}
.loginInput h4 + .inputForm {
    margin-top: 0; /* Remove extra top margin if label is present */
}
.loginInput {
    margin-bottom: 2.5vh; /* Add some space between inputs */
}

/* Ajustement pour textarea */
.textareaForm {
    padding: 1vh 1vh 1vh 1vh !important; /* Adjust padding */
    align-items: flex-start; /* Align icon top */
}
.textareaForm i {
    margin-top: 1.2vh; /* Align icon vertically */
     padding-left: 2vh !important;
}

.textareaForm textarea {
    width: 100%;
    background-color: #f2f2f2 !important;
    border-radius: 0 20px 20px 0;
    padding: 1.5vh 1vh;
    border: initial;
    min-height: 8vh; /* Minimum height */
    resize: vertical; /* Allow vertical resize */
    font-family: inherit;
    font-size: 1.5vh;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    border: none !important;
}
.textareaForm textarea:focus {
     box-shadow: 0 0 5px rgba(125, 174, 214, 0.5);
}


/* Styles pour l'upload de fichier */
.fileInputForm {
    position: relative;
    cursor: pointer;
    padding: 0 0 0 1vh !important;
    display: flex;
    align-items: center;
}
.fileInputForm input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Hide the actual input */
    cursor: pointer;
}
.file-input-label {
    flex-grow: 1;
    padding: 1.5vh 1vh; /* Match input padding */
    color: #525960;
    background-color: #f2f2f2;
    border-radius: 0 20px 20px 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 1vh; /* Space after icon */
}
.file-name {
    flex-grow: 1;
    padding: 1.5vh 1vh; /* Match input padding */
    color: #525960;
    background-color: #f2f2f2;
    border-radius: 0 20px 20px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 1vh; /* Space after icon */
    display: none; /* Hidden initially, shown by JS */
}
.fileInputForm i {
    padding-left: 2vh !important; /* Consistent icon padding */
}


/* Styles pour le sélecteur de couleur */
.colorInputForm {
    position: relative;
    padding: 0 1vh 0 1vh !important;
    display: flex;
    align-items: center;
}
.colorInputForm input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-color: transparent; /* Remove default background */
    cursor: pointer;
    margin-left: 10px; /* Space after icon */
}
/* Style for the color picker preview for WebKit browsers */
.colorInputForm input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
     border-radius: 8px;
}
.colorInputForm input[type="color"]::-webkit-color-swatch {
    border: 1px solid #ccc;
    border-radius: 8px;
}
/* Style for the color picker preview for Firefox */
.colorInputForm input[type="color"]::-moz-color-swatch {
    border: 1px solid #ccc;
    border-radius: 8px;
}

.color-value {
    margin-left: 10px;
    font-weight: 500;
    color: #525960;
    background-color: #f2f2f2;
    padding: 1vh 1.5vh;
    border-radius: 15px;
}




/* Styles pour la navigation entre étapes */
.step-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 4vh;
    border-top: 1px solid #eee;
    padding-top: 2vh;
}
.step-button {
    background-color: #bae0ff;
    color: #505356;
    border: none;
    border-radius: 20px;
    padding: 1.2vh 2.5vh;
    font-size: 1.8vh;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}
.step-button:hover {
    background-color: #a2c1da;
}
.step-button:active {
    transform: scale(0.97);
}
.prev-step {
    background-color: #e9ecef;
    color: #505356;
}
.prev-step:hover {
    background-color: #d1d5da;
}

.submit-button {
     background-color: #525960;
     color: #ffffff;
}
.submit-button:hover {
    background-color: #3e444a;
}

.final-step {
    justify-content: space-between; /* Space out prev and submit */
}


/* Section Noctee+ */
.noctee-plus-info {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 2vh 3vh;
    margin-bottom: 3vh;
    font-size: 1.5vh;
    line-height: 1.5;
    color: #495057;
}
.noctee-plus-info strong {
    color: #343a40;
}
.noctee-plus-info em {
    color: #6c757d;
}


/* Styles spécifiques pour les écrans larges si besoin */
@media screen and (min-width: 768px) {
    .multi-step-form {
        margin: 0 10vh;
    }
    .progress-bar-container {
        width: 60%;
    }
     .step-label {
        font-size: 1.5vh;
    }
    .icon-selection-container {
        max-width: 80%;
    }

}


/* Style pour le texte en gras dans la description head */
.descHead .bold {
    font-weight: 600; /* Ou 700 selon votre police */
    color: #525960; /* Optionnel: couleur légèrement différente */
}

/* Style pour les icônes cachées par défaut */
.icon-choice.hidden-icon {
    display: none;
}
.inputForm i {
    margin: initial !important;
}

.inputForm.colorInputForm {
    height: 6vh;
}

/* Style pour le bouton "Voir plus d'icônes" */
.show-more-icons {
    background: none;
    border: none;
    color: #7daed6; /* Couleur du lien/bouton */
    cursor: pointer;
    display: block; /* Prend toute la largeur disponible */
    width: fit-content; /* S'adapte au contenu */
    margin: 10px auto 5px auto; /* Centre le bouton */
    padding: 5px 10px;
    font-size: 1.4vh;
    font-weight: 500;
    border-radius: 15px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}
.show-more-icons:hover {
    background-color: #eef6fc; /* Léger fond au survol */
}
.show-more-icons i {
     font-size: 2vh;
     transition: transform 0.3s ease;
}

/* Style pour l'icône du bouton quand les icônes sont visibles */
.show-more-icons.expanded i {
    transform: rotate(180deg);
}

/* Style pour mettre en évidence les champs invalides (optionnel) */
.inputForm.invalid {
  border: 1px solid #e53e3e; /* Bordure rouge */
  box-shadow: 0 0 5px rgba(229, 62, 62, 0.5); /* Ombre rouge légère */
  border-radius: 20px; /* Garder les coins arrondis */
}
/* Style pour mettre en évidence la section icône invalide */
.icon-selection-container.invalid {
     border: 1px solid #e53e3e !important;
}

/* Ajustement spécifique pour le code postal */
input[name="bar_zip_code"] {
    /* Optionnel: force un style numérique si le pattern ne suffit pas */
    -moz-appearance: textfield; /* Firefox */
}
input[name="bar_zip_code"]::-webkit-outer-spin-button,
input[name="bar_zip_code"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
    margin: 0;
}

/* Ajuster la barre de progression pour 3 étapes */

/* Cachez les connecteurs/étapes superflus si vous aviez .steps-5 avant */
.progress-bar-container.steps-3 .progress-step[data-step="4"],
.progress-bar-container.steps-3 .progress-step[data-step="5"],
.progress-bar-container.steps-3 .progress-step[data-step="3"] + .progress-connector,
.progress-bar-container.steps-3 .progress-step[data-step="4"] + .progress-connector {
   /* display: none; */ /* Ou ajustez le flex-basis des autres */
}


/* Styles pour les sous-titres dans l'étape 2 */
.sub-step-title {
   font-size: 1.8vh;
   font-weight: 600;
   color: #7daed6; /* Ou une autre couleur pour les distinguer */
   margin-top: 3vh;
   margin-bottom: 1vh;
   padding-bottom: 5px;
   border-bottom: 1px solid #eee;
}
.sub-step-title small {
   font-weight: 400;
   color: #6c757d;
   font-size: 0.9em;
}

/* Ajustement marge pour les loginInput suivant un sub-step-title */
.sub-step-title + .loginInput {
   margin-top: 1.5vh;
}

/* Espacement dans les sections de sélection */
.loginInput.sub-section {
   padding-left: 15px; /* Indentation légère */
   border-left: 3px solid #eef6fc; /* Marqueur visuel */
   margin-bottom: 2.5vh;
}
.loginInput.sub-section > .input-label {
    /* Style spécifique si besoin */
}


/* Styles minimum requis dans assets/css/nouveau_bar.css */

/* Pour les boutons d'attributs */
.attribute-choice {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    padding: 8px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.1s ease;
    font-size: 1.5vh; /* Ajustez si nécessaire */
    color: #525960;
}
.attribute-choice i {
    font-size: 2.2vh; /* Ajustez si nécessaire */
}
.attribute-choice:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.attribute-choice.selected {
    background-color: #bae0ff;
    border-color: #7daed6;
    color: #333;
    font-weight: 500;
}
.attribute-choice:active {
    transform: scale(0.95);
}

/* Pour les sections et labels d'intérêts */
.selection-container { /* Conteneur général pour attributs et intérêts */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1vh;
    margin-bottom: 1vh;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 15px;
    border: 1px solid #eee;
}
.interest-section {
    width: 100%; /* Pour que les sections prennent toute la largeur */
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}
.interest-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.interest-section h5 {
    font-size: 1.6vh;
    font-weight: 600;
    color: #555f68;
    margin-bottom: 8px;
    margin-top: 0;
}

.interest-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 0 0 0;
    background-color: #f8f9fa;
}

.interest-choice {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 20px; /* Même style que les attributs */
    padding: 8px 12px; /* Même padding */
    cursor: pointer;
    display: inline-flex; /* Important */
    align-items: center;
    /* gap: 6px; */ /* Pas d'icône ici par défaut */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.1s ease;
    font-size: 1.5vh; /* Même taille de police */
    color: #525960;
    line-height: 1.2; /* Ajuster si besoin */
    text-align: center;
}
.interest-choice:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.interest-choice.selected {
    background-color: #e7f3fd; /* Couleur sélectionnée légèrement différente ? */
    border-color: #a2c1da; /* Ou utiliser la même que pour attributs (#bae0ff / #7daed6) */
    color: #333;
    font-weight: 500;
}
.interest-choice:active {
    transform: scale(0.95); /* Même effet d'enfoncement */
}


/* Styles pour les messages de succès/erreur du formulaire */
.form-message {
    font-size: 1.5vh; /* Ajustez la taille */
    font-weight: 500;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    display: none; /* Caché par défaut */
    margin-top: 15px; /* Espace au-dessus */
    transition: opacity 0.3s ease;
}

.form-message.error {
    color: #D8000C; /* Rouge pour erreur */
    background-color: #FFD2D2;
    border: 1px solid #D8000C;
    display: block; /* Afficher en cas d'erreur */
    opacity: 1;
}

.form-message.success {
    color: #270; /* Vert pour succès */
    background-color: #DFF2BF;
    border: 1px solid #270;
    display: block; /* Afficher en cas de succès */
    opacity: 1;
}


/* Styles pour les suggestions d'adresse */
.address-suggestions-list {
    position: absolute;
    top: 100%; /* Juste en dessous de l'input */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 15px 15px; /* Arrondi en bas */
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000; /* Au-dessus des autres éléments */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: none; /* Caché par défaut */
  }
  
  .address-suggestions-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .address-suggestions-list li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5vh; /* Adapter si besoin */
    border-bottom: 1px solid #eee;
  }
  .address-suggestions-list li:last-child {
    border-bottom: none;
  }
  
  .address-suggestions-list li:hover {
    background-color: #f5f5f5;
  }
  
  .address-suggestions-list li strong { /* Pour mettre en évidence la partie correspondante */
    font-weight: 600;
  }