/* Logo Responsive CSS pour MediNotes */
/* Assure une adaptation parfaite du logo sur tous les appareils */

:root {
    /* Variables pour le logo */
    --logo-size-mobile: 32px;
    --logo-size-tablet: 48px;
    --logo-size-desktop: 64px;
    --logo-margin: 8px;
}

/* Styles de base du logo */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--logo-margin);
}

.logo-image {
    height: var(--logo-size-mobile);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: height 0.3s ease;
}

/* Responsive Design */

/* Tablettes (768px et plus) */
@media (min-width: 768px) {
    :root {
        --logo-size-mobile: var(--logo-size-tablet);
    }

    .logo-image {
        height: var(--logo-size-tablet);
    }
}

/* Desktop (1024px et plus) */
@media (min-width: 1024px) {
    :root {
        --logo-size-mobile: var(--logo-size-desktop);
    }

    .logo-image {
        height: var(--logo-size-desktop);
    }
}

/* Grandes écrans (1440px et plus) */
@media (min-width: 1440px) {
    :root {
        --logo-size-desktop: 80px;
    }

    .logo-image {
        height: 80px;
    }
}

/* Très grands écrans (1920px et plus) */
@media (min-width: 1920px) {
    :root {
        --logo-size-desktop: 96px;
    }

    .logo-image {
        height: 96px;
    }
}

/* Orientation paysage sur mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .logo-image {
        height: 24px;
    }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    .logo-image {
        filter: brightness(1.1);
    }
}

/* Haute résolution (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .logo-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Animation d'entrée */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.logo-image {
    animation: logoFadeIn 0.5s ease-out;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .logo-image {
        animation: none;
        transition: none;
    }
}

/* Imprimer */
@media print {
    .logo-image {
        height: 24px;
        filter: grayscale(100%);
    }
}