/* Style de test pour vérifier que le CSS est chargé */
.cl-header,
header,
div[role="banner"] {
    background-color: #f0f0f0 !important;
    padding-top: 0.5rem !important;
    min-height: auto !important;
    height: auto !important;
}

/* Style de base pour le logo et son conteneur */
.cl-header img,
header img,
div[role="banner"] img,
img[alt="logo"],
img[alt="Callimac"] {
    transition: all 0.3s ease;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.5rem 0 !important;
}

/* Redimensionnement progressif */
@media (max-width: 1200px) {
    .cl-header img,
    header img,
    div[role="banner"] img,
    img[alt="logo"],
    img[alt="Callimac"] {
        width: 150px !important;
    }
}

@media (max-width: 900px) {
    .cl-header img,
    header img,
    div[role="banner"] img,
    img[alt="logo"],
    img[alt="Callimac"] {
        width: 100px !important;
    }
}

/* Ajustements uniquement pour mobile */
@media (max-width: 600px) {
    /* Fixer le header en haut */
    .cl-header,
    header,
    div[role="banner"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: white !important;
        height: 80px !important;
        min-height: 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Ajuster le logo */
    .cl-header img,
    header img,
    div[role="banner"] img,
    img[alt="logo"],
    img[alt="Callimac"] {
        width: 80px !important;
        height: auto !important;
    }

    /* Ajuster le conteneur principal pour compenser le header fixe */
    .cl-app,
    .cl-main {
        padding-top: 80px !important;
        margin-top: 0 !important;
    }

    /* S'assurer que les boutons commencent après le header */
    .cl-chat-starters {
        margin-top: 1rem !important;
    }
}

/* Pour le thème sombre sur mobile */
@media (max-width: 600px) {
    [data-theme="dark"] .cl-header,
    [data-theme="dark"] header,
    [data-theme="dark"] div[role="banner"] {
        background: #1A1C1E !important;
    }
}

/* Style desktop */
.cl-header .MuiBox-root img,
.cl-header img,
header img,
div[role="banner"] img,
img[alt="logo"],
img[alt="Callimac"] {
    max-width: 200px;
    height: auto;
}