/* Conteneur pour positionner le logo (Règles générales pour Desktop) */
#kc-logo-right-container {
    position: absolute; /* Reste en position absolue pour le desktop */
    top: 20px;
    right: 30px; 
    z-index: 1000;
    pointer-events: none; 
    width: auto; /* Important: s'assurer qu'il ne prend pas 100% de la largeur */
}

/* Style de l'image elle-même */
.logo-entreprise-login {
    max-width: 150px; 
    height: auto;
    pointer-events: auto;
    display: block; /* Nécessaire pour le centrage du bloc */
}

/* --- RÈGLES SPÉCIFIQUES POUR MOBILE (Écrans inférieurs à 768px) --- */
@media (max-width: 992px) {
    #kc-logo-right-container {
        /* 1. ANCRAGE AU DESSUS DU CONTENU NORMAL (moins intrusif que absolute) */
        position: relative; 
        
        /* 2. FORCER LE CONTENEUR À PRENDRE TOUTE LA LARGEUR POUR LE CENTRAGE */
        width: 100%; 
        
        /* 3. Annuler les ancres de droite et gauche */
        right: auto;
        left: auto;
        
        /* 4. Réinitialiser la marge supérieure */
        top: 0;
        
        /* 5. Ajouter un padding externe au conteneur pour l'espace */
        padding: 10px 0; 
        
        /* S'assurer que les événements de souris sont réactivés pour le conteneur */
        pointer-events: auto;
        
        /* Centrer le contenu du bloc */
        text-align: center;
        
        /* Pour le débogage, vous pouvez ajouter une bordure temporaire ici: border: 1px solid red; */
    }
    
    .logo-entreprise-login {
        max-width: 100px; /* Réduire la taille sur mobile */
        
        /* Centrage de l'image dans le bloc parent */
        margin: 0 auto; 
        display: block; 
    }
}