html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Variable d'unité de hauteur du viewport pour mieux gérer sur mobile */
:root {
    --vh: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--vh)*1);
    /* Le body prend toute la hauteur visible et s'ajuste lors des changements */
}

.container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* La div result prend l'espace restant, avec une hauteur minimale pour éviter 
   qu'elle soit trop réduite sur de petits écrans. */
.result {
    flex: 1 1 auto; /* Laisse la div s'adapter au flex container */
    min-height: 250px; /* Hauteur minimale */
    max-height: 50vh; /* Ne dépassera pas 50% de la hauteur de la fenêtre */
    background-color: var(--result-bg, #f0f0f0);
    color: var(--result-text, #212529);
    padding: 10px;
    margin-top: 10px;
    border: 1px solid var(--result-border, #ced4da);
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    overflow-y: auto;
}


/* Bouton clearHistory */
#clearHistory {
    margin-bottom: 10px;
}

/* Thème clair */
:root[data-bs-theme="light"] {
    --result-bg: #f0f0f0;
    --result-text: #212529;
    --result-border: #ced4da;
}

/* Thème sombre */
:root[data-bs-theme="dark"] {
    --result-bg: #343a40;
    --result-text: #f8f9fa;
    --result-border: #495057;
}