.hero__container {
    background-color: var(--color-back, --color-grey-dark);
    padding: 4rem;
    border-radius: var(--radius-L);
    color: var(--color-front);
    gap: 4rem;
}
h1 {
    text-transform: uppercase;
    font-size: var(--fs-1000);
}
.hero__text {
    align-content: end;
}
.hero__text p,
.soutien__text p {
    font-size: var(--fs-700);
    line-height: 1.2em;
}
.hero__icon {
    justify-content: center;
}
.hero__icon svg {
    height: 25rem;
    width: auto;
}
.hero__icon svg path {
    fill: var(--color-front)
}

h2 {
    font-size: var(--fs-h2);
    text-transform: uppercase;
    color: var(--color-p3);
    line-height: 1em;
}
.testi__soutien {
    min-height: 35rem;
}
.testi__soutien:nth-child(odd){
    flex-direction: row-reverse;
}
.soutien__text {
    background-color: var(--color-back);
    border-radius: var(--radius-root);
    color: var(--color-txt);
    padding: 6rem 4rem 4rem 4rem;
}
.soutien__text svg {
    height: 8rem;
    width: auto;
}
.soutien__image figure {
    position: relative;
    border-radius: var(--radius-root);
    height: 100%;
}
.soutien__image figure::after {
    content: '';
    border-radius: var(--radius-root);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%,rgba(0,0,0,0.70) 100%);
}
.soutien__image img {
    object-fit: cover;
    height: 100%;
}
.soutien__image figcaption {
    position: absolute;
    bottom: 1.5rem;
    left: 2rem;
    font-size: var(--fs-600);
    color: var(--color-y1);
    z-index: 1;
}

.comite__list p {
    font-size: 1.5rem;
}
.list__perso,
.comite__header {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.list__perso .item {
    border-bottom: 2px solid #46258038;
}
.comite__header .header,
.list__perso .perso__nom.item,
.list__perso .perso__qualite.item
 {
    padding: 1rem 1rem 0.5rem 1rem;
}
.list__perso .perso__nom.item,
.list__perso .perso__qualite.item
 {
    padding-top: 2rem;
}
.perso__qualite.item p::first-letter {
    text-transform: uppercase;
}
.comite__header {
    border-bottom: 2px solid var(--color-p3);
    top: 8rem;
    position: sticky;
    background-color: #fff;
}
@media (max-width: 972px) {
    .list__perso,
    .comite__header {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 500px) {
    .list__perso,
    .comite__header {
        grid-template-columns: 1fr;
        position: static;
    }
    .list__perso .header {
        display: none;
    }
    .list__perso .perso__nom.item{
        border: unset;
    }
    .list__perso .perso__qualite.item {
        padding-top: 1rem;
    }
}

@media (max-width:1440px) {
    :root {
        --fs-900: 3rem;
        --fs-800: 2rem;
        --fs-700: 2rem;
        --fs-1000: 3rem;
        --fs-h2: 5rem;
        --fs-h3: 4rem;
    }
    .hero__icon svg {
        height: 15rem;
    }
    .soutien__text svg {
        height: 5rem;
    }
}
@media (max-width: 1280px) {
    .hero__text.flex--1-5 {
        flex: 2 1 0;
    }
    .soutien__text {
        padding: 3rem;
    }
    .soutien__text.flex--1-5 {
        flex: 1 1 0;
    }
}
@media (max-width: 960px) {
    :root {
        --fs-900: 2rem
    }
    .testi__soutien.flex {
        flex-direction: column;
    }
    .testi__soutien.flex > * {
        width: unset;
    }
    .hero__container {
        flex-direction: column-reverse;
    }
    .hero__container > * {
        width: unset;
    }
    .hero__icon {
        justify-content: flex-start;
    }
}
@media (max-width: 768px) {
    .hero__icon svg {
        height: 10rem;
    }
}
@media (max-width: 550px) {
    :root {
        --fs-1000: 2.5rem;
        --fs-900: 1.8rem;
    }
    .soutien__text p {
        font-size: 1.7rem;
    }
}