body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #FFFFFF;

    /* Style global de la barre de défilement pour Firefox */
    scrollbar-width: thin; /* Réduit la largeur pour Firefox */
    /*scrollbar-color: #007BFF #f9f9f9; /* Couleurs de la barre et de son fond */
}

/* ***************** PAGE ******************* */
main {
    margin-left: 250px; /* Conserver si la sidebar est présente */
    padding: 20px;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    min-height: 100vh;
    width: calc(100% - 250px);
    box-sizing: border-box;
}

/* Styles spécifiques pour la page index */
main.index-page {
    margin-left: 0; /* Annule le décalage pour la page index */
}

/* Page | Zone droite si taille réduite */
@media screen and (max-width: 768px) {
    main {
        margin-left: 0; /* Supprime la marge à gauche sur les écrans plus petits */
        width: 100%; /* Utilise la pleine largeur sur les petits écrans */
    }
}

/* Style spécifique aux navigateurs basés sur WebKit (Chrome, Safari, Edge) */
body,
main,
html {
    /* Ces éléments peuvent avoir une barre de défilement dans WebKit */
    overflow: auto; /* Assure que les barres de défilement peuvent être stylisées */
}

body::-webkit-scrollbar,
main::-webkit-scrollbar,
html::-webkit-scrollbar {
    width: 8px; /* Réduit la largeur de la barre de défilement */
    background-color: #f9f9f9; /* Couleur de fond de la barre de défilement */
}

body::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
    background-color: darkgrey; /* Couleur de la partie défilable */
    border-radius: 4px; /* Arrondit les coins pour un style moderne */
}

body::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
    background-color: dimgray; /* Change de couleur au survol pour un effet interactif */
}

body::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
    background-color: #f9f9f9; /* Couleur de fond du rail */
}


/* ************** STORES RESULTS LIST ************** */

/* Conteneur principal des résultats */
.content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff; /* Conserver fond blanc pour les résultats */
}

/* Titre principal de la page de résultats (h1) */
h1 {
    text-align: center; /* Centre le titre h1 */
    color: #333; /* Même couleur que le h2 pour consistance */
    margin-bottom: 30px; /* Ajuster l'espacement selon les besoins */
}

/* Titre de la page de résultats */
h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

/* Liste des magasins */
.store-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* Élément individuel d'un magasin */
.store-item {
    flex: 1 1 30px; /* Répartition équilibrée avec largeur minimale */
    background-color: #ffffff; /* Fond blanc pour un contraste plus propre */
    margin: 10px; /* Espacement entre les éléments */
    padding: 16px 20px; /* Espacement interne optimisé */
    border-radius: 10px; /* Arrondi pour un look plus moderne */
    text-align: center; /* Centre le contenu horizontalement */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre subtile pour une meilleure profondeur */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation douce pour hover */
}

/* Effet hover sur un magasin */
.store-item:hover {
    /*transform: translateY(-5px); /* Soulèvement subtil au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre plus marquée pour l'interaction */
}

/* Lien vers les détails du magasin */
.store-item a {
    text-decoration: none; /* Supprime le soulignement du lien */
    color: #0056b3; /* Bleu plus foncé pour une meilleure lisibilité */
    font-weight: bold; /* Met en valeur le texte du lien */
    font-size: 18px; /* Taille de police claire et lisible */
    transition: color 0.2s ease; /* Transition douce pour l'effet de hover */
}

/* Effet hover sur le lien */
.store-item a:hover {
    color: #003f7f; /* Couleur encore plus sombre au survol */
    text-decoration: underline; /* Souligne le lien pour accentuer l'interaction */
}

/* Informations du magasin (adresse, etc.) */
.store-item p {
    margin: 8px 0; /* Réduction de l'espacement vertical pour compacité */
    color: #666666; /* Couleur légèrement adoucie pour le texte secondaire */
    font-size: 14px; /* Taille de police réduite pour différencier du lien */
    line-height: 1.4; /* Espacement amélioré pour la lisibilité */
}


/* Boutons "Effacer" et "Créer un établissement" */
.clear-button, .create-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.clear-button:hover, .create-button:hover {
    background-color: #cc0000;
}

.create-button {
    background-color: #007BFF;
}

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

/* Avertissement de résultats non trouvés */
.no-results {
    text-align: center;
    color: #777;
    font-size: 18px;
    margin-top: 20px;
}


/* ************** RESPONSIVE ADJUSTMENTS ************** */

@media screen and (max-width: 768px) {
    .store-list {
        flex-direction: column; /* Empile les magasins verticalement */
        align-items: center; /* Centre les magasins sur l'axe horizontal */
    }
    
    .store-item {
        width: 90%; /* Prend 90% de la largeur disponible pour mieux s'adapter aux petits écrans */
    }
}


/* ************** CREATE A NEW ASSISTANT************** */

/* Create Assistant | Zone totale */
#create-assistant {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20px; /* Espacement avec haut de page */
    width: 100%; /* Largeur fixe de la zone */
    margin: 0 auto; /* Centre la zone horizontalement */
    box-sizing: border-box; /* Assure que la largeur inclut le padding et la bordure */
}

/* Create Assistant | Taille de la zone totale */
.assistant-form-container {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    width: 100%; /* La zone totale prend toute la largeur disponible dans le main */
    box-sizing:border-box;
}

/* Create an assistant | Titre */
h2 {
    text-align: center;
    margin-bottom: 0px;
    margin-top: 80px; /* Ajout de la marge au-dessus du titre */
}

.creation-form-baseline {
    text-align: justify; /* Justifie le texte à gauche et à droite */
    margin: 0 auto; /* Centre l'élément horizontalement */
    margin-top: 20px; /* Ajuste l'espace au-dessus */
    margin-bottom: 20px; /* Ajuste l'espace en-dessous */
    font-weight: normal; /* Poids de la police */
    font-size: 1.0em; /* Taille de la police */
    color: #333; /* Couleur du texte */
    width: 800px; /* Largeur fixe pour écrans larges */
    line-height: 1.6; /* Ajoute un espacement entre les lignes */
}

@media (max-width: 768px) { /* Tablettes et petits écrans */
    .creation-form-baseline {
        width: 90%; /* Utilise 90% de la largeur de l'écran */
        margin-left: auto; /* Centre horizontalement */
        margin-right: auto; /* Centre horizontalement */
    }
}

@media (max-width: 480px) { /* Mobiles */
    .creation-form-baseline {
        width: 95%; /* Utilise 95% de la largeur de l'écran */
        margin-left: auto; /* Centre horizontalement */
        margin-right: auto; /* Centre horizontalement */
        font-size: 0.9em; /* Réduit légèrement la taille du texte */
    }
}

.creation-form-baseline-setup {
    text-align: center; /* Justifie le texte à gauche et à droite */
    margin: 0 auto; /* Centre l'élément horizontalement */
    margin-top: 20px; /* Ajuste l'espace au-dessus */
    margin-bottom: 20px; /* Ajuste l'espace en-dessous */
    font-weight: normal; /* Poids de la police */
    font-size: 1.0em; /* Taille de la police */
    color: #333; /* Couleur du texte */
    width: 800px; /* Largeur fixe pour écrans larges */
    line-height: 1.6; /* Ajoute un espacement entre les lignes */
}

@media (max-width: 768px) { /* Tablettes et petits écrans */
    .creation-form-baseline-setup {
        width: 90%; /* Utilise 90% de la largeur de l'écran */
        margin-left: auto; /* Centre horizontalement */
        margin-right: auto; /* Centre horizontalement */
    }
}

@media (max-width: 480px) { /* Mobiles */
    .creation-form-baseline-setup {
        width: 95%; /* Utilise 95% de la largeur de l'écran */
        margin-left: auto; /* Centre horizontalement */
        margin-right: auto; /* Centre horizontalement */
        font-size: 0.9em; /* Réduit légèrement la taille du texte */
    }
}

/* Create Assistant | Colonne de gauche */
.assistant-form-zone {
    flex: 1;
    margin-right: 20px;
    position: relative;
}

.form-navigation {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center; /* Centrage horizontal */
    box-sizing: border-box;
}

/* Le bouton est caché par défaut */
.create-btn {
    background-color: #007bff; /* Bleu vif */
    color: #fff; /* Texte blanc */
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: normal;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 0 auto; /* Centrer le bouton */
}

/* Effet hover avec une couleur plus sombre */
.create-btn:hover {
    background-color: #0056b3; /* Bleu plus sombre au survol */
}

/* Classe visible pour gérer l'affichage */
.create-btn.visible {
    display: inline-block;
}

.assistant-form-zone:last-child {
    margin-right: 0;
}

.assistant-form {
    flex: 1;
}

/* Positionner le formulaire à gauche avec une marge de 20px */
#assistant-form {
    margin-left: 40px; /* Marge de 40px à gauche pour les écrans larges */
    float: left; /* Positionnement à gauche */
    width: calc(100% - 40px); /* Largeur ajustée en fonction de la marge */
}

/* Adaptation pour les écrans mobiles */
@media (max-width: 480px) { /* Mobiles */
    #assistant-form {
        margin-left: 10px; /* Réduit la marge gauche à 20px */
        width: calc(100% - 10px); /* Ajuste la largeur en fonction de la nouvelle marge */
    }
}

/* Style for the form groups */
.form-group {
    margin-bottom: 40px; /* Espacement vertical entre chaque champ */
}

.form-group.gender label {
    display: block;
    margin-top: 5px;
}


/* **************** BOUTON RADIO **************** */

/* Texte principal */
.radio-label {
    font-size: 14px; /* Taille de police pour le texte principal */
    color: #333; /* Couleur sombre pour contraste */
    line-height: 1.2; /* Ajustement de l’espacement pour un affichage équilibré */
}

/* Texte supplémentaire en italique gris */
.small-italic-gray {
    font-size: 12px; /* Taille légèrement plus petite */
    font-style: italic; /* Texte en italique */
    color: gray; /* Couleur grise */
    display: block; /* Force un retour à la ligne */
    margin-top: 5px; /* Optionnel : ajoute un petit espace au-dessus */
    white-space: pre-line; /* Respecte les sauts de ligne dans le texte */
}


/* Create Assistant | Bouton radio */
.gender label {
    display: inline-block; /* Garde les labels sur la même ligne */
    margin-right: 15px; /* Espace entre les labels */
}

/* Styles pour les écrans plus petits */
@media screen and (max-width: 768px) {
    .gender label {
        display: block; /* Chaque label sur sa propre ligne */
        margin-right: 0; /* Réinitialise la marge droite pour éviter tout espace inutile sur les côtés */
    }
}

/* Bouton ajouter+ */
.input-group {
    display: flex;
    align-items: center;
    margin-left: 30px;
}

.name-input {
    flex-grow: 1; /* Allow the input to take up as much space as possible */
    margin-right: 0px; /* Space between the input and the button */
}


/* **************** CHAMP ACTIVITE **************** */
/* Create Assistant | Nom Assistant */
.activity-input {
    flex-grow: 1; /* Permet au champ de texte de s'étendre pour occuper l'espace disponible */
    padding: 12px 16px; /* Augmentation du padding pour un meilleur confort visuel */
    border: 1px solid #ced4da; /* Couleur de bordure moderne et discrète */
    border-radius: 6px; /* Arrondi légèrement accru pour un aspect contemporain */
    /*margin-left: 9px; /* Marges pour maintenir un espacement harmonieux */
    margin-right: 10px; /* Espace suffisant entre le champ et les éléments adjacents */
    width: calc(100% - 60px); /* Largeur ajustée pour s'adapter à l'espace disponible */
    font-size: 16px; /* Taille de police plus grande pour une meilleure lisibilité */
    color: #495057; /* Couleur du texte améliorée pour un bon contraste */
    background-color: #ffffff; /* Fond blanc pour une lisibilité maximale */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Ombre interne subtile pour une meilleure profondeur */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Animations douces pour les interactions */
}

/* Focus et interaction utilisateur */
.activity-input:focus {
    border-color: #007bff; /* Couleur de bordure bleu vif au focus */
    outline: none; /* Supprime le contour par défaut */
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.35); /* Ombre bleue pour indiquer le focus */
}

/* Interaction hover */
.activity-input:hover {
    border-color: #80bdff; /* Bordure légèrement éclaircie au survol */
}

/* Validation visuelle avec un signe de validation (check) */
.activity-input.valid {
    border-color: #28a745; /* Couleur verte pour indiquer une validation réussie */
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.35); /* Ombre verte subtile pour validation */
}

/* Erreur visuelle */
.activity-input.error {
    border-color: #dc3545; /* Couleur rouge pour signaler une erreur */
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.35); /* Ombre rouge subtile pour une erreur */
}

/* Adaptabilité pour les petits écrans */
@media (max-width: 768px) {
    .activity-input {
        margin-left: 10px; /* Réduction des marges pour une meilleure compacité */
        margin-right: 5px;
        font-size: 14px; /* Taille légèrement réduite pour les petits écrans */
        padding: 10px 14px; /* Ajustement du padding pour réduire l'encombrement */
    }
}

/* Bouton ajouter+ */
.input-activity-group {
    display: flex;
    align-items: center;
    /*margin-left: 10px; */
}


/* **************** CHAMP PRODUIT **************** */
/* Create Assistant | Nom Assistant */
.product-input {
    flex-grow: 1; /* Permet au champ de texte de s'étendre pour occuper l'espace disponible */
    padding: 12px 16px; /* Augmentation du padding pour un meilleur confort visuel */
    border: 1px solid #ced4da; /* Couleur de bordure moderne et discrète */
    border-radius: 6px; /* Arrondi légèrement accru pour un aspect contemporain */
    /*margin-left: 9px;  Marges pour maintenir un espacement harmonieux */
    margin-right: 10px; /* Espace suffisant entre le champ et les éléments adjacents */
    width: calc(100% - 60px); /* Largeur ajustée pour s'adapter à l'espace disponible */
    font-size: 16px; /* Taille de police plus grande pour une meilleure lisibilité */
    color: #495057; /* Couleur du texte améliorée pour un bon contraste */
    background-color: #ffffff; /* Fond blanc pour une lisibilité maximale */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Ombre interne subtile pour une meilleure profondeur */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Animations douces pour les interactions */
}

/* Focus et interaction utilisateur */
.product-input:focus {
    border-color: #007bff; /* Couleur de bordure bleu vif au focus */
    outline: none; /* Supprime le contour par défaut */
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.35); /* Ombre bleue pour indiquer le focus */
}

/* Interaction hover */
.product-input:hover {
    border-color: #80bdff; /* Bordure légèrement éclaircie au survol */
}

/* Validation visuelle avec un signe de validation (check) */
.product-input.valid {
    border-color: #28a745; /* Couleur verte pour indiquer une validation réussie */
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.35); /* Ombre verte subtile pour validation */
}

/* Erreur visuelle */
.product-input.error {
    border-color: #dc3545; /* Couleur rouge pour signaler une erreur */
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.35); /* Ombre rouge subtile pour une erreur */
}

/* Adaptabilité pour les petits écrans */
@media (max-width: 768px) {
    .product-input {
        margin-left: 10px; /* Réduction des marges pour une meilleure compacité */
        margin-right: 5px;
        font-size: 14px; /* Taille légèrement réduite pour les petits écrans */
        padding: 10px 14px; /* Ajustement du padding pour réduire l'encombrement */
    }
}

/* Bouton ajouter+ */
.input-product-group {
    display: flex;
    align-items: center;
    /* margin-left: 10px; */
}


/* ************ CHAMP UPLOAD *********** */

/* Create Assistant | Upload */
.upload-container {
    display: flex; /* Active Flexbox */
    align-items: center; /* Centre verticalement les éléments */
    justify-content: flex-start; /* Alignement à gauche */
}

.upload-box {
    /*flex-grow: 1; /* Permet au champ de texte de remplir l'espace disponible */
    padding: 10px;
    border: 0px solid #ccc;
    margin-right: 10px; /* Ajoutez une marge à droite pour espacer du signe "check" */
    width: calc(100% - 0px); /* Réduit la largeur pour laisser de l'espace pour le signe "check" */
}

/* Create Assistant | Téléchargement visuel */
.upload-section {
    text-align: center; /* Centrer le bouton dans son conteneur */
}


/* ************ CHAMP TEXTE KNOWLEDGE ************** */
/* Create Assistant | Badge activités */
.activities-list {
    margin-top: 10px;
}

.activity-badge {
    display: inline-block;
    background-color: #ccc;
    color: #333;
    padding: 8px 12px;
    border-radius: 20px;
    margin: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.activity-badge .remove-activity {
    margin-right: 8px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

/* Create Assistant | Badge produits & services */
.products-list {
    margin-top: 10px;
}

.product-badge {
    display: inline-block;
    background-color: #ccc;
    color: #333;
    padding: 8px 12px;
    border-radius: 20px;
    margin: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.product-badge .remove-product {
    margin-right: 8px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

/* Create Assistant | Adresse & contacts */
.address-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.address-row {
    display: flex;
    gap: 10px;
}

.address-input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #333;
}

.small-input {
    flex: 0 1 20%; /* Taille fixe pour les petits champs */
    min-width: 80px;
}

.large-input {
    flex: 1 1 auto; /* Les grands champs prennent tout l'espace disponible */
    min-width: 0; /* Empêche les grands champs de dépasser */
    margin-left: auto; /* Aligner à droite */
}

.full-width-input {
    width: 100%; /* Champs qui occupent toute la largeur disponible */
    box-sizing: border-box; /* Assure que padding et border sont inclus dans la largeur */
}

@media (max-width: 600px) {
    .address-row {
        flex-direction: column;
    }

    .small-input, .large-input, .full-width-input {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Create Assistant | Barre Noire "Your new Assistant" */
.preview-header {
    display: flex; /* Utilise Flexbox pour aligner le contenu */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    text-align: center; /* Centre le texte dans chaque élément interne */
    background-color: #000; /* Fond noir pour un contraste fort */
    color: #ffffff; /* Texte blanc pour une meilleure lisibilité */
    padding: 8px 12px; /* Espacement interne pour un meilleur confort visuel */
    margin-bottom: 20px; /* Espace en dessous pour séparer des éléments suivants */
    border-radius: 4px; /* Ajout d'arrondis pour une apparence moderne */
    font-size: 14px; /* Taille légèrement augmentée pour une meilleure lisibilité */
    font-weight: bold; /* Accentue l’importance de l’en-tête */
    line-height: 1.2; /* Ajuste l’espacement vertical pour une meilleure densité */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Ombre légère pour un effet de profondeur */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transitions douces pour une interaction agréable */
}

.preview-header:hover {
    background-color: #333; /* Fond légèrement éclairci au survol */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Ombre accentuée pour indiquer l'interaction */
}

/* Version réactive pour petits écrans */
@media (max-width: 768px) {
    .preview-header {
        font-size: 12px; /* Réduction de la taille du texte pour les petits écrans */
        padding: 6px 10px; /* Espacement interne réduit pour une meilleure compacité */
        margin-bottom: 15px; /* Espacement ajusté en bas */
        text-align: center; /* Assure que le texte reste centré */
    }
}

/* Create Assistant | Check */
#name-check, #gender-check, #avatar-picture-check, #knowledge-name-check {
    display: none; /* Cache l'icône par défaut */
    color: dodgerblue;
    font-size: 0.9rem; /* Ajustez la taille selon vos besoins */
    white-space: nowrap; /* Empêche l'icône de passer à la ligne */
    float: right; /* Alignement à droite */
}

/* Create Assistant | Assistant Preview - Folder */
.closed-folder-icon-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100px; /* Hauteur du conteneur, ajustez selon vos besoins */
}

/* Create Assistant | Boutons navigation */
.form-navigation {
    position: absolute; /* Positionnement absolu par rapport à .form-container */
    left: 25px; /* Bouton "Prev." Aligné à gauche */
    right: 0; /* Bouton "Next" Aligné à droite */
    bottom: 0; /* Aligné en bas */
    display: flex;
    justify-content: space-between; /* Sépare les boutons */
    padding: 10px; /* Espacement intérieur pour les boutons */
    margin-bottom: 10px; /* Marge en bas pour les éloigner du bord */
}

.prev-btn, .next-btn {
    padding: 10px 20px;
    border: 1px solid #ccc;
    /* Ajoutez ici des styles supplémentaires si nécessaire */
}

/* Create Assistant | Responsive */
@media (max-width: 800px) {
    .assistant-form-container {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: center; /* Centre les éléments enfants horizontalement */
        width: 100%; /* Utilise la pleine largeur */
    }

    .assistant-form-zone {
        width: 90%; /* Réduit la largeur pour centrer avec un peu d'espace sur les côtés */
        margin-right: 0; /* Élimine la marge à droite */
        margin-bottom: 20px; /* Ajoute un espace entre les colonnes */
    }

    .assistant-form-zone:last-child {
        margin-bottom: 0; /* Évite l'espacement supplémentaire pour le dernier élément */
    }

    .form-navigation {
        position: relative; /* S'adapte au flux normal */
        left: auto; /* Annule le positionnement spécifique */
        right: auto; /* Annule le positionnement spécifique */
        width: 90%; /* Assure que la navigation est alignée avec les éléments ci-dessus */
        margin-top: 20px; /* Ajoute de l'espace au-dessus des boutons de navigation */
    }
}

/* **************** KNOWLEDGE *************** */
/* Style for the main setting form */
#set-knowledge-base {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20px;
}

/* ***************** SIDEBAR **************** */
/* Styles de la sidebar pour les utilisateurs non connectés */
.sidebar {
    background-color: #f9f9f9;
    color: #333333;
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1);
    z-index: 802;
}

/* Titre fixé en haut à gauche */
.sidebar-title {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 20px;
    width: auto;
    display: flex;
    align-items: center;
}

.sidebar-title a {
    text-decoration: none;
    color: #000;
    display: block;
    padding: 5px 0;
}

.sidebar-title a:hover {
    text-decoration: none;
}

/* Conteneur principal pour le contenu de la sidebar */
.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: 60px;
    box-sizing: border-box;
    flex-grow: 1;
}

/* Introduction avec logo et description */
.sidebar-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
}

.sidebar-logo {
    width: 24px;
    height: 24px;
}

.sidebar-description {
    font-size: 14px;
    color: #666666;
}

/* Bouton Créer */
.sidebar-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 60%;
    padding: 10px;
    background-color: #f7f7f7;
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 30px;
    margin-left: 0;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.sidebar-create-btn img.create-icon {
    width: 20px; /* Ajuste la taille de l'icône */
    height: auto;
    vertical-align: middle;
    filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(2311%) hue-rotate(203deg) brightness(99%) contrast(101%);
}

/* Effet de survol */
.sidebar-create-btn:hover {
    background-color: #e0e0e0;
    color: #333333;
    text-decoration: none;
}

/* Section d'information en bas */
.sidebar-info {
    text-align: center;
    width: 100%;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: auto;
}

/* Historique de l'utilisateur connecté */
.sidebar-history {
    width: 100%;
    /*height: 45%; /* Définit la hauteur à 70% de la sidebar */
    height: 78vh;
    padding: 10px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    overflow-y: auto; /* Active le défilement vertical */
}

/* Styles pour la barre de défilement */
.sidebar-history::-webkit-scrollbar {
    width: 6px; /* Largeur de la barre de défilement */
}

.sidebar-history::-webkit-scrollbar-track {
    background: transparent; /* Couleur de fond de la piste de défilement */
}

.sidebar-history::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Couleur de la poignée de défilement en gris foncé semi-transparent */
    border-radius: 10px; /* Arrondit la poignée de défilement */
    border: 2px solid transparent; /* Espace autour de la poignée de défilement pour lui donner une forme plus nette */
}

.sidebar-history::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Couleur au survol de la poignée de défilement */
}

.history-date {
    margin-bottom: 20px;
}

.history-date p {
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    font-style: italic;
    text-align: left;
    font-weight: bold;
    font-size: 0.9em;
    margin: 10px 0;
    color: dimgrey; /* Définit la couleur du texte en dimgrey */
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-left: 10px;
    font-size: 0.8em;
}

.history-item .history-question {
    max-width: 180px;
    white-space: normal;
    overflow: hidden;
    color: dimgrey; /* Définit la couleur du texte en dim */
    text-decoration: none;
}

.history-item .history-question:hover {
    text-decoration: underline;
}

.history-item .delete-history {
    cursor: pointer;
    color: #007bff;
    background-color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
}

/* Informations utilisateur en bas */
.sidebar-user-info {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 40px;
    left: 0;
    width: calc(100% - 20px);
    padding: 10px;
}

.sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.sidebar-user-name {
    color: dimgrey;
    font-weight: normal;
}

/* Boutons d'information pour les utilisateurs non connectés */
.sidebar-info h2 {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
}

.sidebar-info p {
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
    text-align: justify;
}

.sidebar-learn-more-btn, .sidebar-register-btn {
    display: inline-block;
    width: 60%;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-learn-more-btn {
    display: inline-block;
    width: 60%;
    padding: 10px;
    background-color: #f0f0f0;
    color: #333333;
    font-size: 12px;
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    text-decoration: none; /* Supprime le soulignement pour le lien */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-learn-more-btn:hover {
    background-color: #d8d8d8;
}

/* Bouton "Créer mon compte" */
.sidebar-register-btn {
    display: inline-block;
    width: 60%;
    padding: 10px;
    background-color: #007bff;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 40px; /* Ajoute une marge en bas pour le détacher du bord */
    transition: background-color 0.3s ease;
}

.sidebar-register-btn:hover {
    background-color: #0056b3;
}

/* Masque la sidebar sur les écrans de tablette et mobile */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* Cache la sidebar sur les petits écrans */
    }
}


/* ***************** HEADER ***************** */
/* Home page | Zone Header */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    position: relative;
}

/* Conteneur logo et texte */
.logo-text-container {
    display: flex;
    align-items: center;
}

/* Home page | Bandeau Header */
header {
    position: fixed;
    top: 2px;
    width: 100%;
    height: 55px; /* Assurez-vous que le header ait une hauteur suffisante */
    z-index: 801;
    background-color: transparent; /* Fond transparent par défaut */
    transition: background-color 0.3s; /* Ajoute une transition douce */
}

/* Classe ajoutée pour header blanc */
header.scrolled {
    background-color: #ffffff; /* Fond blanc lorsque scrollé */
}

/* Logo initialement caché */
.logo-container {
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s; /* Transition douce pour l'apparition/disparition */
    margin: 0 auto;
    position: absolute; /* Position absolue pour centrer le logo */
    top: 10px; /* Ajoute une marge supérieure de 5px pour décaler le logo vers le bas */
}

/* Logo visible lors du scroll avec décalage de 250px */
header.scrolled .logo-container {
    opacity: 1; /* Visible lorsque scrollé */
    left: calc(125px + 50%); /* Décale le logo de 250px vers la droite, puis le centre dans la zone restante */
    transform: translateX(-50%); /* Centre le logo dans la partie restante */
}

/* Pour mobile, annuler le décalage */
@media (max-width: 768px) {
    header.scrolled .logo-container {
        left: 50%; /* Revenir à la position centrée par défaut */
        transform: translateX(-50%); /* Ajustement pour centrer le logo sur mobile */
    }
}

.header-logo {
    height: 40px; /* Ajustez la taille du logo */
}

/* Texte du header à côté du logo */
.header-text {
    margin-left: 10px; /* Espace entre le logo et le texte */
    font-size: 20px; /* Taille de la typographie */
    color: #000; /* Couleur du texte en blanc */
    font-weight: bold; /* Gras */
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s; /* Transition douce pour l'apparition/disparition */
}

.header-text a {
    color: #000; /* Couleur du texte du lien en blanc */
    text-decoration: none; /* Supprimer le soulignement */
}

/* Afficher le texte lorsque le header est scrollé */
header.scrolled .header-text {
    opacity: 1; /* Afficher le texte lorsque scrollé */
}

.auth-buttons {
    margin-left: auto; /* Push the buttons to the right */
    display: flex;
    align-items: center;
    margin-top: 7px;
}

/* Header | Bouton "Login" */
.log-in-btn {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: normal;
    margin-right: 15px; /* Augmenté pour plus de séparation avec le bouton Créer un compte */
    font-size: 12px; /* Taille de la typographie réduite */
}

/* Header | Bouton "Creer un compte" */
.create-account-btn {
    padding: 8px 16px;
    background-color: #d3d3d3;
    color: black;
    text-decoration: none;
    border-radius: 5px;
    font-weight: normal;
    font-size: 12px; /* Taille de la typographie réduite */
    margin-right: 10px; /* Ajouté pour avoir un peu d'espace à droite du bouton aussi */
}

.log-in-btn:hover, .create-account-btn:hover {
    background-color: #0056b3;
    color: white;
}

/* Header | Bouton "Hamburger" */
.hamburger {
    display: none; /* Important : il sera affiché via la media query sur les petits écrans */
    cursor: pointer;
    color: #ffffff; /* Changement pour une couleur nettement visible */
    font-size: 30px; /* Augmentation de la taille pour le rendre plus visible */
    padding: 5px;
    background-color: transparent; /* Couleur de fond pour contraste #ffffff */
    z-index: 100; /* S'assure qu'il est au-dessus des autres éléments */
    transition: color 0.3s; /* Ajoute une transition douce pour la couleur */
}

header.scrolled .hamburger {
    color: #000000; /* Changement de couleur lorsque scrollé */
}

/* Header | Bouton "Hamburger" Liste déroulante */
.hamburger-menu-container {
    display: none; /* Initiallement caché, sera affiché par JS */
    position: absolute; /* Position absolue pour le placement spécifique */
    top: 60px; /* Positionné juste en dessous du header */
    right: 0;
    background-color: #f0f0f0; /* Couleur de fond légère pour le menu */
    border: 1px solid #ddd; /* Bordure légère pour le délimiter */
    z-index: 999; /* S'assure qu'il apparaît sous le bouton hamburger mais au-dessus d'autres éléments */
}

.hamburger-menu-item {
    display: block;
    padding: 12px 20px; /* Plus de padding pour un toucher facile */
    color: #333; /* Couleur du texte pour contraste avec le fond */
    text-decoration: none;
}

.hamburger-menu-item:hover {
    background-color: #0056b3; /* Bleu au survol */
    color: white; /* Texte blanc pour contraste */
}

@media (max-width: 768px) {
    .header-container {
        justify-content: center; /* Centre tous les éléments du header horizontalement */
    }

    .logo-container {
        order: 1; /* Assure que le logo est toujours le premier élément */
    }

    .hamburger {
        display: block; /* Assure l'affichage du bouton hamburger sur petits écrans */
        order: 2; /* Assure que le bouton hamburger est le dernier élément */
        margin-left: auto; /* Pousse le bouton hamburger tout à droite */
    }
    
    .log-in-btn, .create-account-btn, .user-btn, .pricing-btn, .schedule-btn, .analytics-btn, .subscribe-btn, .campaigns-btn, .library-btn, .history-btn {
        display: none; /* Cache les boutons "Login" et "Create my account" sur petits écrans */
    }

    .header-text {
        order: 1; /* Cache le texte à côté du logo sur les petits écrans */
    }
}

.header-right-container {
    display: flex; /* Utilisation de Flexbox pour aligner les éléments sur une ligne */
    justify-content: flex-end; /* Aligne les boutons à droite */
    align-items: center; /* Aligne verticalement les éléments */
    padding-right: 10px; /* Espacement à droite */
}

/* === Boutons header regroupés (hauteur uniforme desktop 100%) === */
.pricing-btn,
.user-btn,
.schedule-btn,
.analytics-btn,
.subscribe-btn,
.campaigns-btn,
.library-btn,
.history-btn {
  /* Variables (base responsive) */
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-font-size: clamp(0.6rem, 0.8vw, 0.8rem);

  /* Base commune + alignement identique pour tous (avec ou sans icône) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 0.5vw, 0.6rem);

  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-font-size);
  line-height: 1; /* important pour uniformiser la hauteur */
  border-radius: clamp(0.1rem, 0.4vw, 0.4rem);
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: none; /* neutre pour <a>, utile si <button> */
}

/* Spécificités (marges/cursor) */
.user-btn { margin-left: clamp(0.3rem, 1vw, 0.6rem); cursor: pointer; }
.schedule-btn, .analytics-btn, .subscribe-btn, .campaigns-btn, .library-btn, .history-btn { margin-left: clamp(0.3rem, 1vw, 0.6rem); cursor: pointer; }

/* Hover unifié */
.pricing-btn:hover,
.user-btn:hover,
.schedule-btn:hover,
.analytics-btn:hover,
.subscribe-btn:hover,
.campaigns-btn:hover,
.library-btn:hover,
.history-btn:hover {
  background-color: #0056b3;
}

/* Pseudo-icônes : base (mobile/tablette ok) */
.schedule-btn::before,
.analytics-btn::before,
.subscribe-btn::before,
.library-btn::before,
.campaigns-btn::before {
  content: '';
  display: inline-block;
  width: clamp(0.6rem, 1.5vw, 1rem);
  height: clamp(0.6rem, 1.5vw, 1rem);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: clamp(0.2rem, 0.2vw, 0.6rem);
}

/* Sources des icônes */
.schedule-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_abonnement.png'); }
.analytics-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_analytics.png'); }
.subscribe-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_programmation.png'); }
.campaigns-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_campaigns.png'); }
.library-btn::before { background-image: url('https://paisible.ai/images/icons/paisible_icon_library.png'); }

/* Images d'icône intégrées (si utilisées) */
.schedule-btn img,
.analytics-btn img,
.subscribe-btn img,
.library-btn img,
.campaigns-btn img {
  width: clamp(0.6rem, 1.5vw, 1rem);
  height: clamp(0.6rem, 1.5vw, 1rem);
}

/* === Desktop (zoom 100%) : réduction + hauteur garantie identique === */
@media (min-width: 1025px) {
  .pricing-btn,
  .user-btn,
  .schedule-btn,
  .analytics-btn,
  .subscribe-btn,
  .campaigns-btn,
  .library-btn,
  .history-btn {
    --btn-pad-y: 0px;
    --btn-pad-x: 8px;
    --btn-font-size: 0.60rem;
    border-radius: 6px;

    /* clé pour uniformiser la hauteur, avec ou sans icône */
    min-height: 30px;
  }

  /* Icônes (pseudo et <img>) réduites et alignées */
  .schedule-btn::before,
  .analytics-btn::before,
  .subscribe-btn::before,
  .campaigns-btn::before,
  .library-btn::before,
  .schedule-btn img,
  .analytics-btn img,
  .subscribe-btn img,
  .library-btn img,
  .campaigns-btn img {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
}

/* Cacher sur mobile */
@media (max-width: 768px) {
  .pricing-btn,
  .user-btn,
  .schedule-btn,
  .analytics-btn,
  .subscribe-btn,
  .campaigns-btn,
  .library-btn,
  .history-btn {
    display: none;
  }
}

/* Header | Liste déroulante "Loggué" */
.user-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    right: 5px; /* Aligne la liste déroulante à droite */
    top: 100%; /* Positionne la liste déroulante juste en dessous du bouton utilisateur */
}

.user-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.user-btn {
    cursor: pointer;
}

.button-container {
    margin: 10px 0; /* Ajoute un espace entre les boutons */
}

.button-home, .button-set-new-assistant {
    display: block; /* Permet aux liens de s'afficher sur toute la largeur, les uns sous les autres */
    text-align: center; /* Centre le texte dans le bouton */
    margin: 5px 0; /* Ajoute de l'espace autour de chaque bouton pour qu'ils ne soient pas collés */
}


/* ************** BOUTON DU HEADER*********** */
.user-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.user-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.user-btn {
    cursor: pointer;
}

.button-container {
    margin: 10px 0; /* Ajoute un espace entre les boutons */
}

.button-home, .button-set-new-assistant {
    display: block; /* Permet aux liens de s'afficher sur toute la largeur, les uns sous les autres */
    text-align: center; /* Centre le texte dans le bouton */
    margin: 5px 0; /* Ajoute de l'espace autour de chaque bouton pour qu'ils ne soient pas collés */
}


/* ****************** HISTORIQUE POSTS ******************* */

/* Assistant | Zone des éléments de l'assistant  */
#history-details {
    width: 100%;
}

/* Historique posts | Zone Avatar & Nom */
#history-header {
    text-align: center;
    margin-top: auto; /* Centrer verticalement */
}


/* Assistant | Affichage de la barre de défilement */
#history-content {
  text-align: center;
  max-height: calc(100vh - 250px); /* Ajustement pour inclure la hauteur de l'entête, la marge, et .bottom-section */
  overflow-y: auto; /* Active le défilement vertical lorsque nécessaire */
  margin-bottom: 100px; /* Assure une marge suffisante au-dessus de .bottom-section */
  padding-bottom: 30px; /* Augmentation pour garantir la visibilité de la dernière ligne */
}

/* Pour les navigateurs basés sur WebKit (Chrome, Safari, etc.) */
#history-content::-webkit-scrollbar {
    width: 8px; /* Largeur de la barre de défilement */
    background-color: #f9f9f9; /* Couleur de fond de la barre de défilement */
}

#history-content:-webkit-scrollbar-thumb {
    background-color: #007BFF; /* Couleur de la partie défilable de la barre */
    border-radius: 4px; /* Arrondit les coins de la partie défilable */
}

/* Pour Firefox */
#history-content {
    scrollbar-width: thin; /* Rend la barre de défilement plus fine */
    scrollbar-color: #007BFF #f9f9f9; /* Couleur de la barre de défilement et couleur de fond */
}


/*************************** LOGIN ********************* */

.login-btn {
    width:250px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: normal;
    margin-right: 10px; /* Séparation avec le bouton Creation de compte */
}

/*login button page*/
.login-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

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

/* Forgot Password */
#forgotPasswordLink {
    display: block;
    text-align: center;
    color: gray; /* Couleur grise pour le texte */
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    margin: 10px 0; /* Ajoute un peu d'espace au-dessus et en dessous du lien */
}

#forgotPasswordLink:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol pour indiquer qu'il est cliquable */
}

/* Style for Forgot Password Modal */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%; /* Centre la modal sur tous les écrans par défaut */
    transform: translate(-50%, -50%); /* Centrage précis */
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 80%;
    max-width: 400px;
    z-index: 10;
    transition: opacity 0.3s ease-out;
}

/* Adaptation pour les écrans larges */
@media (min-width: 768px) { /* Ajustez la valeur 768px selon votre point de rupture pour les écrans larges */
    .modal {
        left: calc(50% + 125px); /* Ajuste la position pour tenir compte de la sidebar uniquement sur les écrans larges */
        transform: translateX(-50%); /* Centrage précis sur l'axe X uniquement */
    }
}

/* Optional: Style for the modal if you want it to animate in from the top */
.modal.show-modal {
    display: none; /* Show the modal */
    animation: slideDown 0.3s ease-out forwards;
}

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

/* Positionnement et style de la croix de fermeture */
.close {
    position: absolute;
    right: 0; /* Alignée au bord droit */
    top: 0; /* Alignée au bord supérieur */
    padding: 10px; /* Espacement pour faciliter le clic */
    cursor: pointer;
    font-size: 24px; /* Taille de la croix */
}

/* Style supplémentaire pour modal-content pour garantir le positionnement relatif */
.modal-content {
    position: relative;
    padding: 20px; /* Déplacez le padding ici depuis .modal */
}

/* Style pour le message de confirmation ou d'erreur */
.message {
    color: #d9534f; /* rouge pour les erreurs, changez la couleur si nécessaire */
    margin-bottom: 10px; /* espace entre le message et le bouton */
}

/* Style for the Send button in Forgot Password Modal */
.send-btn {
    padding: 8px 16px;
    background-color: #007bff; /* Blue background color */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-weight: normal; /* Normal font weight */
    text-decoration: none; /* No underline */
    cursor: pointer; /* Change cursor to pointer on hover */
    display: inline-block; /* Allows the application of padding and margins */
    margin-top: 10px; /* Space above the button */
    margin-bottom: 10px; /* Ajoutez cette ligne pour l'espace sous le bouton */
    transition: background-color 0.2s; /* Smooth background color transition on hover */
    float: right; /* Positionne le bouton à droite */
}

.send-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Style for input fields within modals */
.modal input[type="text"], .modal input[type="email"] {
    width: 100%; /* Full width */
    padding: 10px; /* Adequate padding */
    margin-top: 8px; /* Margin on top for spacing */
    margin-bottom: 16px; /* Margin on the bottom for spacing */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Focus style for better user experience */
.modal input[type="text"]:focus, .modal input[type="email"]:focus {
    border-color: #007bff; /* Highlight the border when focused */
    outline: none; /* Remove default focus outline */
}

/* Bouton dans la popin Forgot password pour rediriger vers boîte email */
.email-box-btn {
    display: block;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.email-box-btn:hover {
    background-color: #0056b3;
}


/********************* MENU DEROULANT ********************* */

/* Séparateur dans le menu déroulant du bouton user */
.dropdown-separator {
    margin: 8px 0; /* Ajustez la marge comme nécessaire */
    border-bottom: 1px solid #ccc; /* Couleur et épaisseur de la ligne */
    height: 0; /* Gardez la hauteur à 0 */
}


/* ***************** GDPR CONSENT BANNER **************** */
.gdpr-consent-banner {
    display: none;
    position: fixed; /* Changed from fixed to absolute to position relative to main */
    bottom: 20px; /* Adjusted spacing from the bottom */
    left: 50%; /* Center the banner relative to its parent */
    transform: translateX(-50%) translateX(125px); /* Adjust centering considering the sidebar */
    background-color: #f2f2f2; /* Light grey background */
    color: black;
    padding: 10px 20px; /* Reduced vertical padding */
    border-radius: 10px;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
    box-sizing: border-box;
    z-index: 1000;
    text-align: center; /* Center text and buttons */
    width: calc(100% - 250px - 40px); /* Adjust width considering sidebar and padding */
    max-width: 650px; /* Optional max width for better text display on larger screens */
    font-size: 12px; /* Reduced font size */
}

/* Adaptation du style des paragraphes dans la bannière GDPR pour supprimer l'espace entre les lignes */
.gdpr-consent-banner p {
    margin: 0; /* Supprime les marges par défaut des paragraphes */
    padding: 0; /* Assure qu'il n'y a pas de padding ajouté */
    line-height: 1.2; /* Ajuste l'espacement entre les lignes de texte, si nécessaire */
}

.gdpr-buttons {
    display: flex; /* Use flexbox for button alignment */
    justify-content: center; /* Center buttons */
    gap: 10px; /* Space between buttons */
    margin-top: 10px; /* Space between text and buttons */
}

.gdpr-button {
    padding: 12px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex: 1; /* Make buttons take up equal width */
}

.gdpr-button.accept {
    background-color: #007bff; /* Blue color */
    color: white;
}

.gdpr-button.reject {
    background-color: #ccc; /* Grey */
    color: white;
}

@media screen and (max-width: 768px) {
    .gdpr-consent-banner {
        left: 50%; /* Center on smaller screens ignoring sidebar */
        transform: translateX(-50%); /* Adjust translation for mobile */
        width: 90%; /* Adjust width for smaller screens */
    }
}

/* Style pour le lien Privacy Policy */
#privacyPolicyLink {
    display: block;
    text-align: center;
    color: gray; /* Couleur grise pour le texte */
    /*text-decoration: none; /* Supprime le soulignement par défaut des liens */
    margin: 5px 0 2px 0; /* Ajoute plus d'espace au-dessus et un peu d'espace en dessous du lien */
    font-size: 0.8em; /* Diminue la taille de la typographie */
}

#privacyPolicyLink:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol pour indiquer qu'il est cliquable */
}


/* ***************** FOOTER ***************** */
/* Footer styling */
footer {
    background-color: #000000; /* Background color */
    color: #ffffff; /* Text color */
    text-align: left; /* Left align text */
    padding: 10px 0; /* Padding above and below the text */
    position: relative; /* Not fixed to allow content to push it down */
    width: calc(100% - 282px); /* Full width minus 250px for the left margin */
    margin-left: 282px; /* Shift the footer 250px to the right */
    clear: both; /* Clear any floating elements */
    margin-top: 50px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.social-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.social-media h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.social-icons a img {
    width: 40px;
    height: 40px;
}

.about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.about h3 {
    font-size: 18px;
    margin-bottom: 0px;
}

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

.about ul li {
    margin-bottom: 10px;
}

.about ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.about ul li a:hover {
    color: #007bff;
}

.footer-line {
    width: 50%;
    height: 0.5px;
    background-color: #ccc;
    margin: 20px auto;
}

.footer-copyright {
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    padding-bottom: 0px;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
    footer {
        width: 100%; /* Full width */
        margin-left: 0; /* No left shift */
    }
    
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about, .social-media {
        align-items: center;
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }
}

.footer .footer-content{
  justify-content: space-between !important;
  gap: 80px !important;
  max-width: 1200px;
}

.footer .social-media{
  flex: 1 1 55% !important;
  max-width: 760px; /* évite que le texte “Assistant IA web…” prenne tout */
}

.footer .footer-tagline{
  max-width: 720px;
  margin: 14px 0 18px;
}

.footer .footer-email{
  display: inline-block;
  margin-top: 18px;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}

.footer .footer-email:hover{
  opacity: 1;
  text-decoration: underline;
}

.footer .about{
  flex: 0 0 420px !important;  /* colonne plus large */
  min-width: 360px !important;
}

.footer .about ul li a{
  white-space: nowrap; /* force sur une ligne (desktop) */
}

/* Mobile / tablette : on repasse en colonne */
@media (max-width: 980px){
  .footer .footer-content{
    flex-direction: column;
    gap: 24px !important;
  }
  .footer .about{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .footer .about ul li a{
    white-space: normal;
  }
}



/* ********** Avatar Grid Selection pour l'étape 4 ********** */
.avatar-selection-section {
    margin-top: 20px;
    text-align: center;
    position: relative;
    z-index: 1500; /* Pour s'assurer qu'elle ne soit pas masquée par d'autres éléments */
    font-family: 'Montserrat', sans-serif;
}

.avatar-selection-section h4 {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #333;
}

/* Définition de la grille avec 5 colonnes sur desktop et 3 sur mobile */
.avatar-grid {
    display: grid;
    gap: 10px;
    justify-items: center;
    align-items: center;
}

@media screen and (min-width: 769px) {
    .avatar-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .avatar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Dimensions réduites pour les avatars */
.avatar-grid img.avatar-option {
    width: 80px;  /* Taille réduite pour une présentation uniforme */
    height: 80px; /* Idem pour la hauteur */
    object-fit: cover;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.avatar-grid img.avatar-option:hover {
    border-color: #007BFF;
}


/* ******* LOADING CIRCLE CREATION ASSISTANT ********* */
/* New Assistant | Animation chargement */
@keyframes loadingAnimation {
    0% { transform: rotate(0deg); border-top-color: rgba(0, 123, 255, 0.2); }
    50% { transform: rotate(180deg); border-top-color: rgba(0, 123, 255, 0.8); }
    100% { transform: rotate(360deg); border-top-color: rgba(0, 123, 255, 0.2); }
}

.loading-circle {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 123, 255, 0.2);
    border-radius: 50%;
    border-top-color: rgba(0, 123, 255, 0.8);
    animation: loadingAnimation 1s infinite linear;
    margin: 20px auto;
    text-align: center;
}