h2 {
    font-size: 2rem;
    font-style: italic;
}

/* entry screen */

.entry--screen {
    min-height: calc(100vh - var(--header-height));
    height: auto;
    display: flex;
    flex-direction: column;
}

.top--screen {
    flex: 5;
    display: flex;
    gap: 1rem;
}

/* Refonte home */

.left--side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 3rem;
}

.home--title {
    font-family: 'Open sans', sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.red--separate {
    border: 1px solid var(--primary-color);
    width: 70px;
}

.home--text {
    white-space: pre-line;
    line-height: 25px;
    text-align: justify;
}

.button--container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.button--container--top {
    display: flex;
    gap: 1rem;
}

.plein  {
    border: none;
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    border-radius: 50px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .3s ease-in-out ;
    text-decoration: none;
}

.vide {
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    padding: 1rem;
    border-radius: 50px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .3s ease-in-out ;
    text-decoration: none;
}

.stream--facebook {
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    padding: .8rem 1rem;
    border-radius: 50px;
    font-size: .9rem;
    cursor: pointer;
    transition: all .3s ease-in-out ;
    text-decoration: none;
    width: fit-content;
    display: flex;
    gap: .5rem;
    align-items: center;
}

.plein:hover,
.vide:hover,
.stream--facebook:hover {
    transform: scale(1.05);
}

.right--side {
    flex: 1;
    /*overflow: hidden;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.img--container {
    width: 100%;
    height: 60vh;
    position: relative;
    /*animation: enterPicture .8s ease-in-out;*/
}

.background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.people {
    position: absolute;
    bottom: 0;
    right: 10%;
    width: 626px;
    height: 619px;
    object-fit: contain;
}

@keyframes enterPicture {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

@media (max-width: 1365px) {
    .top--screen {
        flex-direction: column;
    }

    .right--side {
        width: 100%;
    }

    .img--container {
        height: 30vh;
    }

    .background {
        object-position: center;
        border-radius: 0;
    }

    .people {
        width: 286px;
        height: 282px;
    }

    .home--title {
        font-size: 35px;
    }
}

@media (max-width: 650px) {
    .left--side {
        padding: 3rem 2rem;
    }
}


/* --- */

.bottom--screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: enterSlider .8s ease-in-out;
    z-index: 1;
}

@keyframes enterSlider {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

.slide--one {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--secondary-color);
    font-weight: 500;
    font-style: italic;
    text-align: center;
}

@media (max-width: 1300px) {

    .entry--screen {
        height: auto;
    }
}

/* we are */

.we--are {
    background-color: var(--primary-background);
    min-height: 70vh;
    padding: 3rem;
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: space-evenly;
}

.we--are--info {
    /*flex: 1.5;*/
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.we-are--title {
    padding-left: 2rem;
}

.splide__pagination__page.is-active {
    background-color: var(--primary-color) !important;
}

.one--people {
    width: 100%;
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem;
}

.people--picture--container {
    width: 60%;
    height: 550px;
    display: flex;
    gap: .8rem;
    min-width: 350px;
}

.people--picture--container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 0 0 20% 72%;
}

#arnaud--mobile,
#maryannick--mobile {
    display: none;

    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    height: 100%;
}

#arnaud--mobile figcaption,
#maryannick--mobile figcaption {
    color: #DFDEDE;
    font-size: 40px;
    font-weight: 800;
}

.people--info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: var(--font-system);
}

.people--info figcaption {
    font-weight: 500;
    font-size: 2.5rem;
    font-style: italic;
}

.people--info hr {
    width: 20%;
    border: 1.5px solid var(--primary-color);
}

.people--info p {
    font-size: 1.05rem;
    white-space: pre-line;
    text-align: justify;
    margin-bottom: 2rem;
}

.we--are--picture {
    /*flex: 1;*/
    width: 100%;
    max-width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    position: relative;
    padding: 2rem 0;
}

.we--are--picture svg {
    z-index: 10;
}

.we--are--picture::after {
    content: 'Canton de \A Pont-de-l\'Arche';
    position: absolute;
    bottom: -50px;
    left: 0;
    font-weight: 800;
    color: #E3E3E3;
    font-size: 45px;
    font-family: var(--font-system);
    text-align: center;
    white-space: pre-line;
    z-index: 0;
    font-style: italic;
}

@media (max-width: 1200px) {
    .we--are {
        flex-direction: column;
        height: auto;
        gap: 2rem;
    }

    .we--are--info {
        max-width: 100%;
    }

    .we--are--picture {
        max-width: 100%;
        margin-bottom: 2rem;
    }
}

@media (max-width: 900px) {
    .one--people {
        flex-direction: column;
        overflow: hidden;
    }

    .people--picture--container {
        width: 100%;
        max-height: 450px;
    }

    .people--picture--container img {
        object-fit: contain;
        max-width: 400px;
    }

    .people--picture--container {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 635px) {

    .people--picture--container img {
        width: 75%;
        object-fit: cover;
        object-position: top;
        max-height: 400px;
        border-radius: 0 0 20px 20px;
    }

    .one--people {
        gap: 0;
    }

    .people--info figcaption {
        font-size: 2rem;
    }

    .we--are {
        padding: 3rem 0;
    }

    .we--are--picture {
        padding: 0 .5rem;
    }

    .we--are--picture::after {
        left: 10px;
        bottom: -75px;
    }

    .we--are--picture svg {
        width: 375px !important;
    }
}

/* equipe */

.equipe {
    min-height: 70vh;
    padding: 5rem 3rem;
    margin: 3rem 0;
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: end;
}

.equipe--picture {
    flex: 1;
    padding-left: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    position: absolute;
    left: -10%;
    border-radius: 50px;
}

.map {
    z-index: 0;
}

.equipe--texte {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.equipe--texte h2 {
    text-align: center;
}

/*.equipe--texte h2 {*/
/*    font-size: 2rem;*/
/*    font-style: italic;*/
/*}*/

.equipe--texte p {
    font-size: 1.05rem;
    white-space: pre-line;
    line-height: 25px;
    text-align: justify;
    z-index: 99;
}

@media (max-width: 1400px) {
    .map {
        width: 630px;
        height: 600px;
    }
}

@media (max-width: 1200px) {
    .equipe {
        height: auto;
        flex-direction: column-reverse;
        padding: 3rem;
        margin-bottom: 17rem;
        position: relative;
    }

    .equipe--picture {
        flex-direction: column;
        padding-left: 0;
        margin: auto;
    }

    .equipe--texte {
        width: 90%;
    }

    .equipe--picture {
        position: absolute;
        bottom: -370px;
    }

}

@media (max-width: 600px) {
    .map {
        width: 530px;
        height: 500px;
        left: -150px;
    }

    .equipe--picture {
        left: -120px;
    }
    .equipe {
        padding: 3rem 1.5rem;
    }
}

/* help */

.help--container {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding-bottom: 5rem;
}

.help--container::after {
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1024%26quot%3b)' fill='none'%3e%3cpath d='M504.21 569.46C655.12 562.75 747.25 320.36 1048.59 307.25 1349.93 294.14 1442.54 56.04 1592.97 49.65' stroke='rgba(139%2c 139%2c 139%2c 0.16)' stroke-width='2'%3e%3c/path%3e%3cpath d='M524.15 639.99C646.79 589.45 594.34 212 835.14 210.1 1075.93 208.2 1294.51 398.38 1457.11 400.5' stroke='rgba(139%2c 139%2c 139%2c 0.16)' stroke-width='2'%3e%3c/path%3e%3cpath d='M594.6 656.48C723.37 652 809.61 458.17 1066.63 449.53 1323.65 440.89 1410.41 252.09 1538.66 247.93' stroke='rgba(139%2c 139%2c 139%2c 0.16)' stroke-width='2'%3e%3c/path%3e%3cpath d='M908.86 562.41C1035.41 540.02 1065.78 247.56 1297.03 225.36 1528.27 203.16 1578.96 55.65 1685.19 51.76' stroke='rgba(139%2c 139%2c 139%2c 0.16)' stroke-width='2'%3e%3c/path%3e%3cpath d='M303.86 670.68C482.3 656.97 606.18 303.66 917.98 302.83 1229.77 302 1373.98 452.92 1532.09 454.03' stroke='rgba(139%2c 139%2c 139%2c 0.16)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1024'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    width: 100%;
    height: 90%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.help--text {
    width: 50%;
    text-align: justify;
    line-height: 22px;
}

.help--stats {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 2rem;
    gap: .5rem;
}

.one--stats {
    width: calc(100%/4);
    padding-left: 1.5rem;
    border-left: 1px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.stat--number {
    font-size: 35px;
    font-weight: 400;
}

.stat--number--label {
    font-style: italic;
}

@media (max-width: 900px) {
    .help--text {
        width: auto;
    }

    .help--stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .one--stats {
        width: 90vw;
        margin: auto;
    }
}