/* Default height setting for .height-section */
.height-section {
    height: 10vw;
    /* Set the height based on the width of the viewport */
}

/* Media query for screens narrower than 768px */
@media (max-width: 1200px) {
    .height-section {
        height: 20vw;
        /* Increase the height as the screen gets narrower */
    }
}

/* Media query for screens narrower than 768px */
@media (max-width: 768px) {
    .height-section {
        height: 30vw;
        /* Increase the height as the screen gets narrower */
    }
}

/* Media query for screens narrower than 480px */
@media (max-width: 480px) {
    .height-section {
        height: 40vw;
        /* Further increase the height for very narrow screens */
    }
}
/* Plafond de hauteur des illustrations des engagements — retour de la
   communication : elles étaient trop grosses, surtout sur mobile (le pneu de
   « Le recyclage » prenait toute la largeur de l'écran). object-contain garde
   les proportions sous le plafond.
   Élément + classe : cette feuille est chargée AVANT base.css, dont les
   utilitaires (.w-full) gagneraient à spécificité égale. */
article .illus-engagement {
    max-height: 120px;
}

article .illus-engagement--principale {
    max-height: 160px;
}

@media (min-width: 768px) {
    article .illus-engagement {
        max-height: 160px;
    }

    article .illus-engagement--principale {
        max-height: 220px;
    }
}

.header-section {
    background-color: #f8f9fa;
    padding: 20px 0;
}

.values-section {
    background-color: #f8f9fa;
    padding: 20px 0;
}