@charset "UTF-8";

/* Mode clair (par défaut) */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f7f2;
    color: #222;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
}

header h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-size: 52px;
}

section {
    padding: 2rem;
    text-align: center;
    font-size: larger;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    width: 100%;
    position: relative;
    bottom: 0;
}

a {
    color: #ff5722;
    text-decoration: none;
}

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    margin: 0;
}

footer {
    margin-top: auto;
}

#mimo_img {
    width: 66%;
    max-width: 1000px;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated; /* Pour pixel art */
    image-rendering: crisp-edges; /* Pour navigateurs modernes */
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #292828;
        color: #f4f4f4;
    }

    header, footer {
        background-color: #1f1f1f;
        color: #fff;
    }

    a {
        color: #fa9805; /* Orange plus doux sur fond sombre */
    }

    section {
        color: #e0e0e0;
    }

    #mimo_img {
        filter: brightness(0.9);
    }
}


@media (max-width: 1024px) {
    #mimo_img {
        width: 100%;
        max-width: none;
    }
}

#mimo_picture, #mimo_img {
    display: block;        /* Retire les espaces inline */
    width: 100vw;          /* Prend toute la largeur du viewport */
    max-width: 100%;       /* Pas plus large que le viewport */
    height: auto;          /* Garde les proportions */
    margin: 0;             /* Supprime margin */
    padding: 0;            /* Supprime padding */
}