/*
 * profile-bubble-text-styles.css
 * =================================================
 * 
 * Ce fichier regroupe TOUS les styles liés à l'image de profil pixelisée
 * et sa bulle de dialogue qui apparaît au survol/clic.
 * 
 * Le fichier est organisé en sections pour faciliter les modifications :
 * 1. Structure de base (conteneurs et image)
 * 2. Bulle de dialogue et son contenu
 * 3. Adaptations spécifiques pour desktop
 * 4. Adaptations spécifiques pour mobile
 * 
 * GUIDE DE MODIFICATION :
 * Pour ajuster la position de la bulle sur DESKTOP : voir section 3, classe .pixel-profile-bubble
 * Pour ajuster la position de la bulle sur MOBILE : voir section 4, classe .pixel-profile-bubble
 * Pour modifier le style du texte dans la bulle : voir section 2, classe .pixel-profile-bubble-text
 * 
 * CLARIFICATION DES CLASSES :
 * - .pixel-profile-container : Conteneur principal pour l'image pixelisée et sa bulle de dialogue
 * - .profile-container : Classe différente utilisée pour les sections de profil standard (non-pixel)
 *   dans d'autres parties du site. Cette classe a ses propres règles pour les bulles de dialogue
 *   standard (voir la section sur .profile-container:hover .speech-bubble dans pixel-container-styles.css)
 */

/* ============================================
   1. STRUCTURE DE BASE
   ============================================ */

/**
 * Conteneur principal du profil pixelisé (.pixel-profile-container)
 * ------------------------------------------------------------------
 * Ce conteneur est l'élément parent qui contient à la fois l'image pixelisée
 * et la bulle de dialogue qui apparaît au survol.
 * 
 * RÔLE : Positionne l'image de profil en bas à droite de l'écran et sert
 * d'ancrage pour la bulle de dialogue.
 * 
 * NOTE : Il est fixé à l'écran (position: fixed) pour rester visible
 * lors du défilement de la page.
 * 
 * MODIFICATION : Pour changer la position globale de l'élément,
 * ajuster les valeurs "bottom" et "right".
 */
.pixel-profile-container {
    /* Positionnement fixe en bas à droite de l'écran */
    position: fixed;
    bottom: 0px;
    /* ⚠️ AJUSTER ICI pour modifier la distance depuis le bas */
    right: 0px;
    /* ⚠️ AJUSTER ICI pour modifier la distance depuis la droite */

    /* Dimensions */
    width: 180px;
    /* Largeur du conteneur (ajustée en responsive) */

    /* Propriétés d'interaction */
    z-index: 999;
    /* Niveau d'empilement élevé pour rester au-dessus des autres éléments */
    cursor: pointer;
    /* Indique que l'élément est cliquable */
    pointer-events: auto;
    /* Active les événements de souris */

    /* Optimisations */
    transform: translateZ(0);
    /* Aide à lisser les animations en utilisant l'accélération GPU */

    /* Suppression des marges et espacements par défaut */
    margin: 0;
    padding: 0;
}

/**
 * Image du profil pixelisé (.pixel-profile-img)
 * ---------------------------------------------
 * L'image visible du personnage pixel art.
 * 
 * RÔLE : Affiche l'image pixelisée qui, au survol, fait apparaître la bulle.
 * 
 * MODIFICATION : Pour changer la taille de l'image, ajuster la valeur "width"
 * (la hauteur s'adaptera automatiquement grâce à "height: auto").
 */
.pixel-profile-img {
    /* Dimensions */
    width: 140px;
    /* ⚠️ AJUSTER ICI pour modifier la taille de l'image */
    height: auto;
    /* Maintient les proportions de l'image */

    /* Comportement de l'image */
    object-fit: contain;
    /* Garantit que l'image est entièrement visible sans être coupée */
    vertical-align: bottom;
    /* Alignement au bas du conteneur */
    transition: transform 0.3s ease;
    /* Animation douce pour l'effet de survol */

    /* Présentation */
    display: block;
    /* Élimine l'espace sous l'image */
    border: none;
    /* Supprime la bordure par défaut */
    margin: 0;
    /* Supprime les marges */
    padding: 0;
    /* Supprime les espacements internes */
}

/**
 * Effet de survol sur l'image
 * --------------------------
 * Léger agrandissement de l'image lorsque l'utilisateur passe la souris dessus
 */
.pixel-profile-img:hover {
    transform: scale(1.05);
    /* Effet d'agrandissement au survol */
}

/* ============================================
   2. BULLES DE DIALOGUE (principale et réponses)
   ============================================ */

/**
 * Bulle de dialogue du profil pixelisé (.pixel-profile-bubble)
 * ------------------------------------------------------------
 * La bulle qui apparaît au survol/clic sur l'image pixelisée.
 * 
 * RÔLE : Affiche une bulle graphique contenant un texte court.
 * 
 * ÉTAT INITIAL : Masquée (display: none) et contrôlée via JavaScript.
 * 
 * MODIFICATION IMPORTANTE :
 * - Pour ajuster la position VERTICALE : modifier la valeur "top"
 * - Pour ajuster la position HORIZONTALE : modifier la valeur "left"
 * Ces positions sont relatives au conteneur parent (.pixel-profile-container)
 */
.pixel-profile-bubble {
    /* État initial (masqué) */
    display: none;
    /* Masqué jusqu'à ce que JavaScript l'affiche */
    opacity: 0;
    /* Transparent */
    visibility: hidden;
    /* Invisible mais conserve son espace */

    /* Positionnement relatif au conteneur parent */
    position: absolute;
    left: -150px;
    /* ⚠️ AJUSTER ICI pour décaler horizontalement (négatif = vers la gauche) */
    top: -350px;
    /* ⚠️ AJUSTER ICI pour position verticale (négatif = vers le haut) */

    /* Dimensions */
    width: 200px;
    /* Largeur de la bulle */
    height: auto;
    /* Hauteur automatique selon le contenu */

    /* Animation et visibilité */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Animation douce */
    z-index: 2147483646;
    /* Valeur extrêmement élevée pour être au-dessus de tout */

    /* Comportement */
    pointer-events: none;
    /* Empêche la bulle d'interférer avec les clics/survols */
}

/**
 * Image d'arrière-plan de la bulle
 * --------------------------------
 * L'élément <img> à l'intérieur de la bulle.
 * 
 * RÔLE : Affiche l'image d'arrière-plan de la bulle (généralement bulle.png).
 */
.pixel-profile-bubble img {
    width: 100%;
    /* Occupe toute la largeur disponible */
    height: auto;
    /* Maintient les proportions */
}

/**
 * Texte dans la bulle pixelisée (.pixel-profile-bubble-text)
 * ----------------------------------------------------------
 * Le texte qui apparaît à l'intérieur de la bulle de dialogue.
 * 
 * RÔLE : Affiche un court message textuel au style pixelisé.
 * 
 * MODIFICATION :
 * - Pour ajuster la taille du texte : modifier la valeur "font-size"
 * - Pour ajuster l'espacement autour du texte : modifier la valeur "padding"
 * - Pour ajuster la position dans la bulle : modifier les valeurs du conteneur
 * - Utilisation d'un positionnement plus précis avec le nouveau conteneur dédié
 */
.pixel-profile-bubble-text-container {
    /* Conteneur principal qui positionne la zone de texte dans la bulle */
    position: absolute;
    top: 0;
    /* Commence du haut de la bulle */
    left: 0;
    /* Commence de la gauche de la bulle */
    width: 100%;
    /* Utilise toute la largeur de la bulle */
    height: 100%;
    /* Utilise toute la hauteur de la bulle */
    display: flex;
    /* Active flexbox pour centrage parfait */
    justify-content: center;
    /* Centre horizontalement */
    align-items: flex-start;
    /* Aligne les éléments vers le haut */
    flex-direction: column;
    /* Empilement vertical des éléments */
    pointer-events: none;
    /* Permet aux clics de traverser vers les éléments en dessous */

    /* Assure que le contenu reste dans les limites */
    overflow: hidden;
    /* Masque le contenu dépassant les limites du conteneur */
    box-sizing: border-box;
    /* Inclut padding et border dans les dimensions */
    padding: 5px;
    /* Réduit l'espace de marge intérieure autour du texte */
}

.pixel-profile-bubble-text {
    /* Zone de texte proprement dite */
    position: relative;
    /* Position relative par rapport au conteneur */
    width: 90%;
    /* Utilise 90% de la largeur disponible pour maximiser l'espace */
    max-width: 220px;
    /* Limite max augmentée pour éviter les troncatures */
    max-height: 75%;
    /* Limite max pour éviter les débordements en hauteur mais plus grande */
    transform: translateY(15%);
    /* Déplacement vers le bas pour améliorer le centrage vertical */

    /* Mise en forme du texte */
    display: block;
    /* Block pour mieux contrôler le débordement */
    text-align: center;
    /* Centrage du texte lui-même */
    line-height: 1.4;
    /* Espacement entre les lignes réduit */
    margin-top: -10px;
    /* Marge négative pour remonter le texte dans la bulle */

    /* Apparence du texte */
    font-family: 'Press Start 2P', cursive;
    /* Police pixelisée */
    font-size: 10px;
    /* ⚠️ AJUSTER ICI pour modifier la taille du texte */
    color: #000;
    /* Texte noir pour un meilleur contraste */

    /* Espacement et adaptativité */
    padding: 5px;
    /* ⚠️ AJUSTER ICI pour modifier l'espacement autour du texte */
    overflow-wrap: break-word;
    /* Permet le découpage des mots trop longs */
    word-break: break-word;
    /* Force les mots à se découper plutôt que déborder */
    overflow: hidden;
    /* Masque tout contenu qui déborderait */

    /* Priorité d'affichage */
    z-index: 9999;
    /* Élevé pour s'assurer que le texte est visible par-dessus l'image */
}

/**
 * Bouton d'invitation au dialogue (.chat-invite-button)
 * ----------------------------------------------------
 * Bouton pixelisé qui invite l'utilisateur à ouvrir le dialogue avec Laure
 * Placé sous le texte principal dans la bulle de Laure
 */
.chat-invite-button {
    /* Positionnement et dimensions */
    position: relative;
    width: auto;
    /* Largeur automatique */
    max-width: 160px;
    /* Largeur maximale */
    margin-top: 5px;
    /* Espace entre le texte et le bouton */
    transform: translateY(15%);
    /* Ajustement vers le bas */

    /* Apparence du bouton */
    background-color: rgba(0, 0, 0, 0.7);
    /* Fond sombre semi-transparent */
    border: 2px solid #fff;
    /* Bordure blanche */
    border-radius: 4px;
    /* Coins légèrement arrondis */
    padding: 6px 12px;
    /* Espacement interne */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Ombre légère */

    /* Texte du bouton */
    font-family: 'Press Start 2P', cursive;
    /* Police pixelisée */
    font-size: 8px;
    /* Taille du texte */
    color: #fff;
    /* Texte blanc */
    text-align: center;
    /* Centrage horizontal */

    /* Animation et interactivité */
    transition: all 0.2s ease;
    /* Animation douce */
    cursor: pointer;
    /* Curseur de type pointer */
    pointer-events: auto;
    /* Activer l'interaction avec ce bouton */
    z-index: 10000;
    /* Priorité d'affichage élevée */
}

/* Icône de flèche dans le bouton */
.chat-icon {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

/* Effet de survol sur le bouton */
.chat-invite-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
    /* Fond plus sombre en survol */
    transform: translateY(15%) scale(1.05);
    /* Léger agrandissement */
}

/* Animation de la flèche au survol */
.chat-invite-button:hover .chat-icon {
    transform: translateX(2px);
    /* Décalage vers la droite */
}

/**
 * Bulle de réponse visiteur - chatbot (.pixel-profile-response-bubble)
 * -----------------------------------------------------------
 * La bulle qui affiche les options de réponse du mini-chatbot
 * Elle est positionnée au-dessus de la bulle principale.
 * Son image de fond est inversée horizontalement.
 */
.pixel-profile-response-bubble {
    /* État initial (masqué) */
    display: none;
    /* Masqué jusqu'à ce que JavaScript l'affiche */
    opacity: 0;
    /* Transparent */
    visibility: hidden;
    /* Invisible mais conserve son espace */

    /* Positionnement relatif au conteneur parent */
    position: absolute;
    left: -0px;
    /* ⚠️ AJUSTER ICI pour décaler horizontalement (négatif = vers la gauche) */
    top: -450px;
    /* ⚠️ AJUSTER ICI pour position verticale (négatif = vers le haut) */

    /* Dimensions */
    width: 200px;
    /* Largeur de la bulle */
    height: auto;
    /* Hauteur automatique selon le contenu */

    /* Animation et visibilité */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Animation douce */
    z-index: 2147483646;
    /* Une valeur élevée mais pas la plus haute (réservée à la réponse de Laure) */

    /* Comportement */
    pointer-events: auto;
    /* Permet l'interaction avec les options cliquables */
}

/**
 * Bulle de réponse de Laure (.pixel-profile-answer-bubble)
 * -----------------------------------------------------------
 * La bulle qui apparaît après que le visiteur a choisi une option
 * Elle est positionnée au-dessus de la bulle de réponse du visiteur.
 */
.pixel-profile-answer-bubble {
    /* État initial (masqué) */
    display: none;
    /* Masqué jusqu'à ce que JavaScript l'affiche */
    opacity: 0;
    /* Transparent */
    visibility: hidden;
    /* Invisible mais conserve son espace */

    /* Positionnement relatif au conteneur parent */
    position: absolute;
    left: -150px;
    /* ⚠️ AJUSTER ICI pour décaler horizontalement (négatif = vers la gauche) */
    top: -520px;
    /* ⚠️ AJUSTER ICI pour position verticale (encore plus haut) */

    /* Dimensions */
    width: 250px;
    /* Largeur de la bulle (légèrement plus large) */
    height: auto;
    /* Hauteur automatique selon le contenu */

    /* Animation et visibilité */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Animation douce */
    z-index: 2147483647;
    /* Valeur maximale pour être au-dessus de toutes les autres bulles */

    /* Comportement */
    pointer-events: auto;
    /* Permet l'interaction avec les options cliquables */
}

/**
 * Image de la bulle de réponse (inversée)
 */
.pixel-profile-response-bubble img {
    width: 100%;
    /* Occupe toute la largeur disponible */
    height: auto;
    /* Maintient les proportions */
    transform: scaleX(-1);
    /* Retourne l'image horizontalement */
}

/**
 * Conteneur des options du chatbot (.chatbot-options-container)
 * ------------------------------------------------------------
 * Conteneur principal qui positionne la zone des options dans la bulle
 * Permet un centrage précis et adaptable à toutes les tailles d'écran
 */
.chatbot-options-container {
    position: absolute;
    top: 0;
    /* Commence du haut de la bulle */
    left: 0;
    /* Commence de la gauche de la bulle */
    width: 100%;
    /* Utilise toute la largeur de la bulle */
    height: 100%;
    /* Utilise toute la hauteur de la bulle */
    display: flex;
    /* Active flexbox pour centrage parfait */
    justify-content: center;
    /* Centre horizontalement */
    align-items: center;
    /* Centre verticalement */
    pointer-events: none;
    /* Laisse passer les clics vers les éléments en dessous */
}

/**
 * Options du chatbot (.chatbot-options)
 * -------------------------------------
 * Contient les différentes options de réponse du chatbot
 */
.chatbot-options {
    position: relative;
    /* Position relative par rapport au conteneur */
    width: 85%;
    /* Largeur du contenu */
    max-width: 240px;
    /* Limite maximale pour éviter les débordements */
    pointer-events: auto;
    /* Réactive les clics pour les options */
    display: flex;
    flex-direction: column;
    /* Options empilées verticalement */
    gap: 8px;
    /* Espacement entre les options */
    transform: translateY(-5%);
    /* Léger ajustement vers le haut */
}

/**
 * Option individuelle du chatbot (.chatbot-option)
 * ------------------------------------------------
 * Chaque option cliquable dans la bulle de réponse
 */
.chatbot-option {
    font-family: 'Press Start 2P', cursive;
    /* Police pixelisée */
    font-size: 9px;
    /* Taille du texte légèrement plus petite que le message principal */
    color: #000;
    /* Texte noir */
    background-color: rgba(255, 255, 255, 0.6);
    /* Fond légèrement transparent */
    border: 1px solid #333;
    /* Bordure fine */
    border-radius: 4px;
    /* Coins arrondis */
    padding: 6px 8px;
    /* Espacement interne */
    text-align: center;
    /* Centrage du texte */
    cursor: pointer;
    /* Curseur indiquant que c'est cliquable */
    transition: background-color 0.2s;
    /* Animation au survol */
}

/**
 * Effet de survol sur les options
 */
.chatbot-option:hover {
    background-color: rgba(200, 255, 200, 0.8);
    /* Vert clair en survol */
}

/* ============================================
   3. STYLES DESKTOP (écrans > 768px)
   ⚠️ SECTION DESKTOP UNIQUEMENT
   Toutes les modifications dans cette section 
   affectent uniquement l'affichage desktop
   ============================================ */
@media only screen and (min-width: 769px) {

    /**
     * ⚠️ SECTION CRITIQUE : Position de la bulle sur desktop
     * ----------------------------------------------------
     * Ces valeurs déterminent où apparaît la bulle par rapport à l'image
     * sur les grands écrans.
     * 
     * MODIFICATION IMPORTANTE :
     * - Pour ajuster la hauteur de la bulle : modifier la valeur "top"
     *   (valeur négative plus grande = position plus haute)
     * - Pour ajuster la position horizontale : modifier la valeur "left"
     *   (valeur négative plus grande = plus à gauche)
     */
    .pixel-profile-bubble {
        top: -490px;
        /* ⚠️ AJUSTER ICI pour position verticale sur desktop (DESKTOP UNIQUEMENT) */
        left: -120px;
        /* ⚠️ AJUSTER ICI pour position horizontale sur desktop (DESKTOP UNIQUEMENT) */
        width: 300px;
        /* ⚠️ AJUSTER ICI pour largeur de la bulle sur desktop (DESKTOP UNIQUEMENT) */
        height: auto;
        /* Hauteur automatique pour s'adapter au contenu */
    }

    /**
     * Position de la bulle de réponse visiteur sur desktop
     * Maintenant placée au-dessus de la bulle principale
     */
    .pixel-profile-response-bubble {
        top: -390px;
        /* ⚠️ AJUSTER ICI pour position verticale bulle réponse desktop */
        left: -190px;
        /* ⚠️ AJUSTER ICI pour position horizontale bulle réponse desktop */
        width: 300px;
        /* ⚠️ AJUSTER ICI pour largeur bulle réponse desktop */
    }

    /**
     * Position de la bulle de réponse de Laure sur desktop
     * Maintenant placée au-dessus de la bulle de réponse visiteur
     */
    .pixel-profile-answer-bubble {
        top: -490px;
        /* ⚠️ AJUSTER ICI pour position verticale bulle réponse Laure desktop */
        left: -160px;
        /* ⚠️ AJUSTER ICI pour position horizontale bulle réponse Laure desktop */
        width: 320px;
        /* ⚠️ AJUSTER ICI pour largeur bulle réponse Laure desktop */
    }

    /**
     * Ajustements de l'image pour desktop
     * ----------------------------------
     * MODIFICATION : Pour changer la taille de l'image sur desktop uniquement,
     * ajuster la valeur "width" ci-dessous.
     */
    .pixel-profile-img {
        position: fixed;
        /* Fixe l'image par rapport à la fenêtre */
        width: 180px;
        /* ⚠️ AJUSTER ICI pour modifier la taille sur desktop (DESKTOP UNIQUEMENT) */
        bottom: 0;
        /* Aligné avec le bas de l'écran */
        right: 0;
        /* Aligné avec la droite de l'écran */
    }

    /**
     * Ajustements du conteneur pour desktop
     * -----------------------------------
     * MODIFICATION : Pour ajuster la position du conteneur sur desktop,
     * modifier les valeurs "right" et "bottom".
     */
    .pixel-profile-container {
        width: 180px;
        /* Largeur adaptée à l'image */
        right: 0;
        /* ⚠️ AJUSTER ICI pour décaler depuis la droite (DESKTOP UNIQUEMENT) */
        bottom: 0;
        /* ⚠️ AJUSTER ICI pour décaler depuis le bas (DESKTOP UNIQUEMENT) */
        padding: 0;
        margin: 0;
    }

    /**
     * Ajustements du texte pour desktop
     * -------------------------------
     * Texte adapté pour s'assurer qu'il reste dans la bulle
     */
    .pixel-profile-bubble-text {
        font-size: 10px;
        /* Taille de police réduite pour éviter les débordements */
        padding: 0px;
        /* Espacement très réduit pour maximiser l'espace disponible */
        max-width: 220px;
        /* Limite maximale augmentée pour utiliser plus d'espace horizontal */
        transform: translateY(-20%);
        /* Déplacement vers le haut pour réduire l'espace en haut */
        margin-top: -25px;
        /* Marge négative plus importante pour réduire l'espace vide en haut ⚠️JOUER ENTRE MARGIN-TOP ET MAX-HEIGHT POUR POSITION VERTICAL DU TEXTE DESKTOP*/
        margin-left: 35px;

        /* Assure que le texte reste dans les limites de la bulle */
        max-height: 105px;
        /* Hauteur maximale augmentée pour éviter le débordement vertical */
        text-overflow: ellipsis;
        /* Ajoute "..." si le texte est tronqué */

        /* Auto-adaptation de la taille du texte si nécessaire */
        transform-origin: center center;
        /* Point d'origine pour la mise à l'échelle */
        display: block;
        /* Changement pour un meilleur contrôle du débordement */
        line-height: 1.3;
        /* Réduit légèrement l'espacement entre les lignes */
    }
}

/* ============================================
   4. STYLES MOBILE (écrans <= 768px)
   ⚠️ SECTION MOBILE UNIQUEMENT
   Toutes les modifications dans cette section 
   affectent uniquement l'affichage mobile
   ============================================ */
@media only screen and (max-width: 768px) {

    /**
     * ⚠️ SECTION CRITIQUE : Position et taille de la bulle sur mobile
     * -------------------------------------------------------------
     * Ces valeurs déterminent où apparaît la bulle par rapport à l'image
     * sur les petits écrans.
     * 
     * MODIFICATION IMPORTANTE :
     * - Pour ajuster la position verticale : modifier la valeur "top"
     *   (valeur négative plus petite = bulle plus proche de l'image)
     * - Pour ajuster la position horizontale : modifier la valeur "left"
     */
    .pixel-profile-bubble {
        width: 220px;
        /* ⚠️ AJUSTER ICI pour largeur bulle mobile (MOBILE UNIQUEMENT) */
        top: -280px;
        /* ⚠️ AJUSTER ICI pour position verticale bulle mobile (MOBILE UNIQUEMENT) */
        left: -80px;
        /* ⚠️ AJUSTER ICI pour position horizontale bulle mobile (MOBILE UNIQUEMENT) */
        height: auto;
        /* Hauteur automatique pour s'adapter au contenu */
    }

    /**
     * Position de la bulle de réponse visiteur sur mobile (MODE MOBILE UNIQUEMENT)
     * Maintenant placée au-dessus de la bulle principale
     * Note: Ces valeurs ne s'appliquent que sur les écrans <= 768px
     */
    .pixel-profile-response-bubble {
        width: 220px;
        /* ⚠️ AJUSTER ICI pour largeur bulle réponse [MODE MOBILE] */
        top: -180px;
        /* ⚠️ AJUSTER ICI pour position verticale bulle réponse [MODE MOBILE] */
        left: -170px;
        /* ⚠️ AJUSTER ICI pour position horizontale bulle questions visiteur [MODE MOBILE] */
    }

    /**
     * Position de la bulle de réponse de Laure sur mobile (MODE MOBILE UNIQUEMENT)
     * Maintenant placée au-dessus de la bulle de réponse du visiteur
     * Note: Ces valeurs ne s'appliquent que sur les écrans <= 768px
     */
    .pixel-profile-answer-bubble {
        width: 220px !important;
        /* Bulle plus petite */
        height: auto;
        /* Positionnement absolu par rapport à la fenêtre */
        position: fixed !important;
        top: auto !important;
        bottom: 100px !important;
        /* Position depuis le bas de l'écran */
        left: auto !important;
        right: 20px !important;
        /* Position depuis la droite de l'écran */
        z-index: 2147483647 !important;
        /* Priorité maximale d'affichage */
    }

    /* Ajustement de l'image de fond de la bulle */
    .pixel-profile-answer-bubble img {
        width: 110% !important;
        height: auto !important;
    }

    /* Style du texte dans la bulle de réponse de Laure sur mobile */
    .pixel-profile-answer-bubble .pixel-profile-bubble-text {
        max-width: 330px !important;
        /* Réduit davantage pour s'assurer que le texte est plus compact */

        margin: 0 auto !important;
        /* Force le centrage horizontal */
        padding: 0px !important;
        /* Réduit l'espacement pour maximiser l'espace utilisable */
        font-size: 8px !important;
        /* Légèrement plus petit que le texte standard pour tenir dans la bulle */
        text-align: left !important;
        /* Force le centrage du texte */
        position: relative;
        left: 10px;
        /* Déplace le texte vers la droite */

    }

    /* Surcharge pour le conteneur de texte dans la bulle de réponse de Laure */
    .pixel-profile-answer-bubble .pixel-profile-bubble-text-container {
        justify-content: flex-end !important;
        /* Aligne le contenu vers la droite */
        padding-right: 29px !important;
        /* Ajoute de l'espacement à droite */
        width: 110% !important;
        /* Réduit la largeur pour éviter les débordements */
        transform: translateY(-23%);
    }

    /**
     * Ajustements du conteneur pour mobile
     * ----------------------------------
     * MODIFICATION : Pour modifier la position sur mobile, ajuster "right" et "bottom"
     */
    .pixel-profile-container {
        width: 150px;
        /* Largeur adaptée pour mobile */
        right: px;
        /* ⚠️ AJUSTER ICI pour décaler depuis la droite sur mobile (MOBILE UNIQUEMENT) */
        bottom: 0;
        /* ⚠️ AJUSTER ICI pour décaler depuis le bas sur mobile (MOBILE UNIQUEMENT) */
        margin: 0;
        /* Supprime les marges */
        padding-right: 0;
        /* Supprime l'espacement à droite */
        transform: translateX(0);
        /* Empêche toute translation non désirée */
    }

    /**
     * Ajustements de l'image pour mobile
     * --------------------------------
     * Image plus petite pour s'adapter aux écrans mobiles
     */
    .pixel-profile-img {
        width: 80px;
        /* ⚠️ AJUSTER ICI pour taille de l'image sur mobile (MOBILE UNIQUEMENT) */
        height: auto;
        object-fit: contain;
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0;
    }

    /**
     * Ajustements du texte pour mobile
     * -------------------------------
     * Texte plus petit pour s'adapter à la bulle plus petite
     * 
     * MODIFICATION :
     * - Pour ajuster la taille du texte du chatbot bienvenue sur mobile : modifier "font-size"
     * - Pour ajuster l'espacement du texte : modifier "padding"
     */
    .pixel-profile-bubble-text {
        font-size: 10px;
        /* ⚠️ AJUSTER ICI pour taille du texte sur mobile (MOBILE UNIQUEMENT) */
        padding: 0px;
        /* ⚠️ AJUSTER ICI pour espacement sur mobile (MOBILE UNIQUEMENT) */
        max-width: 140px;
        /* Limite maximale plus petite pour mobiles - Diminué de 180px à 140px */
        transform: translateY(0);
        /* Pas de décalage vertical sur mobile */
        margin: 0 auto;
        /* Centre le texte horizontalement */
        text-align: center;
        /* Assure que le texte est centré */
    }

    /* Ajustement des options pour mobile */
    .chatbot-options {
        max-width: 200px;
        /* Plus étroit sur mobile */
        transform: translateY(-15%);
        /* Décalage vertical sur mobile pour ajouter un peu d'espace dans la bulle de chat de questions */
    }
}