:root {
    --background-color: white;
    --color: black;
    --img-filter: brightness(100%) saturate(100%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body,
.container-full {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    background-color: var(--background-color);
    color: var(--color);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo-full {
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding: 12px;
    filter: var(--img-filter);
    transition: filter 0.3s ease;
    /* Optimisations ajoutées */
    will-change: filter;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Preload critical resources */
@media (preload) {
    .logo-full {
        content-visibility: auto;
        contain-intrinsic-size: 100vh 100vw;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #121212;
        --color: #ffffff;
        --img-filter: invert(1) brightness(0.9) saturate(0.8);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --background-color: white;
        --color: black;
        --img-filter: brightness(100%) saturate(100%);
    }
}