/* 1. On cache complètement le dessin vectoriel SVG de Mastodon */
.column-link--logo svg,
.drawer__header svg.logo {
    display: none !important;
}

/* 2. On affiche votre propre logo en image de fond sur le bouton cliquable */
.column-link--logo,
.drawer__header a {
    display: block !important;
    background-image: url('/system/custom/mon-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    
    /* Ajustez ces dimensions en fonction des proportions de votre logo */
    height: 45px !important;
    width: 200px !important; 
}

/* 3. On garde cette règle pour les endroits où Mastodon utilise une balise <img> (comme sur mobile) */
img.logo {
    content: url('/system/custom/mon-logo.png') !important;
}

/* 4. On enlève le fond gris au survol de la souris */
.column-link--logo:hover,
.drawer__header a:hover {
    background-color: transparent !important;
}
.admin-wrapper .sidebar .logo {
    width: 100% !important;
    height: auto !important;
    margin: 40px auto;
    display: block;
}

/* --- Logo de la page d'accueil publique (logo-container) --- */

/* 1. On cache le dessin SVG */
.logo-container svg {
    display: none !important;
}

/* 2. On affiche votre logo sur le lien cliquable */
.logo-container a {
    display: block !important;
    background-image: url('/system/custom/mon-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important; /* "center" car sur cette page, le logo est centré */
    
    /* Dimensions pour l'affichage public (à ajuster selon votre logo) */
    height: 60px !important; 
    width: 260px !important; /* J'ai mis 260px pour correspondre à la taille d'origine */
    margin: 0 auto !important; /* Permet de s'assurer qu'il reste bien centré */
}