:root {
    --color-primary: #ECDD9D;
    --color-secondary: #98B9A5;
    --color-text-dark: #31443A;
    --color-page-bg: #F7F6F2;
}

/* fond du header */
header#header {
    background-color: var(--color-primary);
}

/* bandeau principal */
header#header #hero-banner {
    position: relative;
    background: var(--color-secondary);
    color: white;
    padding-left: 420px;   /* réserve de la place pour le logo à gauche */
    padding-right: 60px;
    overflow: visible;     /* permet à l'image du bas de dépasser */
}

/* logo à gauche dans le bandeau */
header#header #hero-banner::before {
    content: "";
    position: absolute;
    left: 170px;
    top: 50%;
    transform: translateY(-50%);
    width: 350px;
    height: 350px;
    background: url("https://20ans-gbif.sciencesconf.org/data/css/GBIFlog.png") no-repeat center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

/* image à droite du texte */
header#header #hero-banner::after {
    content: "";
    position: absolute;
    right: 40px;   /* ajuste ici */
    top: 100%;
    margin-top: 390px;

    width: 450px;
    height: 450px;

    background: url("https://20ans-gbif.sciencesconf.org/data/css/Image1.png") no-repeat center;
    background-size: contain;

    z-index: 1;
    pointer-events: none;
}






/* texte du hero au-dessus des éléments décoratifs */
header#header #hero-banner h1,
header#header #hero-banner h2,
header#header #hero-banner p,
header#header #hero-banner span,
header#header #hero-banner div,
header#header #hero-banner a {
    position: relative;
    z-index: 2;
    color: white;
}

/* fond général */
body,
#page,
#content {
    background: var(--color-page-bg);
    color: var(--color-text-dark);
}

/* réserve de la place à droite dans le contenu pour l'image décorative */
#page,
#content {
    padding-right: 500px;
}

/* titres */
h1, h2, h3 {
    color: var(--color-text-dark);
}

/* listes */
#page ul {
    list-style: disc inside;
}

/* -------------------------
   ÉCRANS MOYENS
------------------------- */
@media screen and (max-width: 1200px) {
    header#header #hero-banner {
        padding-left: 300px;
        padding-right: 40px;
    }

    header#header #hero-banner::before {
        left: 80px;
        width: 240px;
        height: 240px;
    }

    header#header #hero-banner::after {
        right: 40px;
        margin-top: 60px;
        width: 220px;
        height: 220px;
    }

    #page,
    #content {
        padding-right: 260px;
    }
}

/* -------------------------
   PETITS ÉCRANS / TABLETTE
------------------------- */
@media screen and (max-width: 900px) {
    header#header #hero-banner {
        padding-left: 40px;
        padding-right: 40px;
    }

    header#header #hero-banner::before,
    header#header #hero-banner::after {
        display: none;
    }

    #page,
    #content {
        padding-right: 20px;
    }
}