/* Réinitialisation des marges et hauteurs */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Assure que le body prend toute la hauteur de la page */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
}

/* Conteneur principal qui grandit pour occuper l'espace disponible */
.container {
    flex: 1; /* Permet au conteneur de s'étirer */
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    padding: 20px;
}

/* Image centrée */
.centered-image {
    max-width: 100%;
    max-height: 80vh; /* Empêche l'image d'être trop grande */
    height: auto;
}

/* Footer en bas */
/* Footer en bannière sombre */
/* Footer en bannière sombre avec une hauteur plus importante */
.footer {
    font-family: 'Roboto', sans-serif;
    background-color: #2b2d2f;  /* Couleur de fond sombre */
    color: #ccc;  /* Texte en gris clair */
    text-align: center;
    padding: 25px 15px; /* Augmente l'espace intérieur pour une meilleure visibilité */
    font-size: 16px; /* Légèrement plus grand pour le confort de lecture */
    width: 100%;  /* S'assure que le footer prend toute la largeur */
    min-height: 80px; /* Assure une hauteur minimale pour un bon affichage sur tous les écrans */
    display: flex;
    align-items: center; /* Centre verticalement le texte */
    justify-content: center; /* Centre horizontalement le texte */
}

.separator {
    color: #4c8b40; /* Couleur du séparateur */
    margin: 0 10px; /* Espacement autour du pipe */
    font-weight: bold; /* Optionnel : rend le pipe plus visible */
}