@font-face {
    font-family: "Dosis Bold";
    src: url(./assets/typo/Dosis-Bold.woff2) format('woff2'),
        url(./assets/typo/Dosis-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Dosis Extra Bold";
    src: url(./assets/typo/Dosis-ExtraBold.woff2) format('woff2'),
        url(./assets/typo/Dosis-ExtraBold.woff) format('woff');
    font-weight: 800;
    font-style: normal;
}

:root {
    /* Variables couleurs */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-orange: #CA3904;
    --color-orange-bg: #FFF1EA;

    --color-violet-1: #4C2F91;
    --color-violet-footer: #1B0132;

    /* Variables typo */
    --typo-h1: 3.5rem;
    --typo-h2: 2rem;
    --typo-h3: 1.5rem;

    --typo-h1-tel: 2.75rem;
    --typo-h2: 2rem;
    --typo-h3: 1.5rem;
}

*,
*::after,
*::before {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
}

.CTA {
    background-color: var(--color-orange);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 12px;
    padding: 8px 28px;
    font-size: 1.125rem;
}

h2 {
    font-size: var(--typo-h2);
    font-family: 'Dosis Extra Bold', sans-serif;
    margin: 0;
}

h3 { 
    font-size: var(--typo-h3);
    font-family: 'Dosis Extra Bold', sans-serif;
    margin: 0;
}

/* --- Header --- */
header {
    background-color: var(--color-orange-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4.3% 18px 4.3%;
 
    position: sticky;
    top: 0;
    z-index: 10;
}

header img {
    width: 130px;
}

    /* Responsive */
    @media (max-width: 380px) {
        header .CTA {
            padding: 8px 16px;
            text-align: center;
        }

        header img {
            width: 100px;
        }
    }
/* --- End Header --- */

/* --- Banner --- */
.banner {
    background-color: var(--color-orange-bg);
    position: relative;
    padding: 12px 48% 68px 4.3%;
    position: relative;
    z-index: 1;
}

h1 {
    font-size: var(--typo-h1);
    font-family: 'Dosis Extra Bold', sans-serif;
    margin: 0;
    margin-bottom: 40px;
    line-height: 60px
}

.banner p {
    margin: 0;
}

.banner .highlight {
    font-weight: 600;
    width: 94%;
    margin-top: 12px;
    margin-bottom: 28px;
}

.banner img {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

    /* Responsive */
    @media (max-width: 1290px) {
        .banner {
            padding: 12px 39% 68px 4.3%;
        }

        .banner img {
            width: 52%;
        }
    }

    @media (max-width: 1096px) {
        .banner {
            padding: 12px 27% 105px 4.3%;
        }
    }

    @media (max-width: 950px) {
        .banner {
            padding: 12px 17% 105px 4.3%;
        }
    }

    @media (max-width: 800px) {
        .banner {
            padding: 12px 4.3% 140px 4.3%;
        }
    }

    @media (max-width: 700px) {
        .banner img {
            width: 60%;
        }
    }

    @media (max-width: 530px) {
        .banner {
            padding: 4px 4.3% 140px 4.3%;
        }

        h1 {
            font-size: var(--typo-h1-tel);
            margin-bottom: 20px;
            line-height: 53px;
        }
        .banner img {
            width: 75%;
        }
    }

    @media (max-width: 400px) {
        .banner img {
            width: 91%;
        }
    }
/* --- End Banner --- */

/* --- Presentation --- */
.presentation {
    margin: auto;
    width: 56.5%;
    padding: 75px 0 85px 0;
    text-align: center;
    position: relative;
}

.presentation::before {
    content: url(assets/img/bonhomme1.svg);
    position: absolute;
    left: -39%;
    bottom: -5px;
}

.presentation h2 {
    margin-bottom: 24px;
}

.presentation div {
    background-color: var(--color-orange-bg);
    border-radius: 12px;
    padding: 20px 52px;
    width: 63%;
    margin: auto;
    margin-top: 46px;
}

.presentation h3 {
    margin-bottom: 8px;
    position: relative;
}

.presentation h3::before {
    content: url(assets/img/panneau.svg);
    position: relative;
    left: -8px;
    top: 2px;
}

.presentation div p {
    margin: 0;
}

    /* Responsive */
    @media (max-width: 1275px) {
        .presentation {
            width: 71%;
        }

        .presentation::before {
            left: -21%;
        }
    }

    @media (max-width: 1020px) {
        .presentation {
            width: 91%;
            padding: 65px 0 105px 0;
        }

        .presentation::before {
            left: -5%;
        }

        .presentation div {
            width: 50%;
            padding: 20px 36px;
        }
    }

    @media (max-width: 700px) {
        .presentation::before {
            content: url(assets/img/bonhomme1tel.svg);
        }

        .presentation div {
            width: 80%;
        }
    }

    @media (max-width: 580px) {
        .presentation {
            padding: 48px 0 105px 0;
        }

        .presentation div {
            width: 85%;
            padding: 20px 28px;
        }
    }

    @media (max-width: 350px) {
        .presentation div {
            width: 95%;
        }
    }
/* --- End Presentation --- */

/* --- Offer --- */
.offer {
    background-color: var(--color-orange-bg);
    margin-right: 4.3%;
    padding-left: 4.3%;
    border-top-right-radius: 52px;
    border-bottom-right-radius: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer .text {
    padding: 60px 0 75px 0;
}

.offer .photo {
    border-top-right-radius: 52px;
    border-bottom-right-radius: 52px;
    background-image: url(assets/img/photo.png);
    position: relative;
    height: stretch;
    width: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} 

@supports (-moz-appearance: none) {
    .offer .photo {
        height: 580px;
    }
}

.offer .photo::before {
    content: url(assets/img/deco_photo.svg);
    position: absolute;
    bottom: -5px;
}

.bloc-offer {
    margin-top: 28px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.one-offer {
    display: flex;
    gap: 16px;
}


    @media (max-width: 900px) {
        .offer .text {
            padding: 60px 12px 75px 0;
        }

        .offer .photo {
            width: 65%;
        }
    }

    @media (max-width: 750px) {
        .offer {
            flex-direction: column;
            padding-left: 0;
        }

        .offer .text {
            padding: 60px 12px 40px 4.3%;
            width: 100%;
        }

        .offer .photo {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 52px;
            height: 400px;
            width: 100%;
            background-position: center -25px;
        }

        .offer .text {
            padding: 48px 4.3% 40px 4.3%;
        }
    }

    @media (max-width: 580px) {
        .offer {
            margin-right: 0;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .offer .photo {
            border-bottom-right-radius: 0px;
            height: 300px;
        }
    }

    @media (max-width: 440px) {
        .bloc-offer {
            gap: 0;
        }

        .offer .photo {
            height: 200px;
        }
    } 

    @media (max-width: 300px) {
        .offer .photo {
            background-position: center 0px;
            height: 150px;
        }
    } 
/* --- End Offer --- */

/* --- Project --- */
.project {
    padding: 65px 4.3%;
    position: relative;
}

.project::after {
    content: url(assets/img/bonhomme2.svg);
    position: absolute;
    right: 0;
    bottom: -5px;
}

.project h2 {
    text-align: center;
    margin-bottom: 40px;
}

.bloc-project {
    display: flex;
    gap: 26px;
    justify-content: center;
}

.one-project {
    background-color: var(--color-orange-bg);
    border-radius: 12px;
    padding: 32px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 32%;
}

.one-project h3 {
    margin: 0;
    text-align: center;
    position: relative;
}

.one-project h3::before {
    position: relative;
    left: -8px;
    top: 2px;
}

.school h3::before {
    content: url(assets/img/icon_school.svg);
}

.place h3::before {
    content: url(assets/img/icon_place.svg);
}

.books h3::before {
    content: url(assets/img/icon_books.svg);
}

.one-project p {
    margin: 0;
}

.one-project .highlight {
    font-weight: 600;
}

.one-project a {
    text-decoration: none;
    text-decoration: underline;
    color: var(--color-black);
}

.CTA_icon {
    display: flex;
    justify-content: center;
    width: fit-content;
    gap: 8px;
    padding: 8px 20px;
    font-weight: 600;
}

.project .CTA_icon {
    margin: auto;
    margin-top: 36px;
}

    /* Responsive */
    @media (max-width: 1000px) {
        .bloc-project {
            flex-wrap: wrap;
        }

        .one-project {
            width: 47%;
        }
    }
    
    @media (max-width: 930px) {
        .project::after {
            content: url(assets/img/bonhomme2tel.svg);
        }
    }

    @media (max-width: 800px) {
        .project .CTA_icon {
            width: 45%;
            text-align: center;
        }
    }

    @media (max-width: 730px) {
        .one-project {
            width: 70%;
        }
    }

    @media (max-width: 700px) {
        .project {
            padding: 65px 4.3% 110px 4.3%;
        }

        .project::after {
            content: url(assets/img/bonhomme2tel3.svg);
        }
    }

    @media (max-width: 550px) {
        .one-project {
            width: 100%;
        }

        .project .CTA_icon {
            width: 65%;
        }
    }

    @media (max-width: 350px) {
        .project {
            padding: 65px 4.3% 145px 4.3%;
        }

        .project .CTA_icon {
            width: 95%;
        }
    }
/* --- End Project --- */

/* --- Don --- */
.don {
    background-color: var(--color-orange-bg);
    margin-left: 4.3%;
    padding-right: 4.3%;
    padding-top: 52px;
    padding-bottom: 32px;
    border-top-left-radius: 52px;
    text-align: center;
    position: relative;
}

.don::after {
    content: url(assets/img/bonhomme3.svg);
    position: absolute;
    left: 20px;
    bottom: -5px;
}

.don h2 {
    margin: 0;
    margin-bottom: 12px;
}

.don p {
    margin: 0;
}

.bloc-don {
    display: flex;
    justify-content: space-evenly;
    margin: auto;
    margin-top: 36px;
    margin-bottom: 40px;
    width: 95%;
}

.one-don {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 22%;
}

.one-don h3, .one-don p {
    margin: 0;
}

.one-don h3 {
    color: var(--color-orange);
}

.one-don .reduc {
    font-size: 0.875rem;
    font-style: italic;
    margin-bottom: 2px;
}

.one-don .CTA {
    margin-top: 8px;
}

.don .mention {
    font-size: 0.75rem;
}

    @media (max-width: 1150px) {
        .bloc-don {
            flex-wrap: wrap;
            justify-content: center;
            gap: 32px;
        }

        .one-don {
            width: 28%;
        }

        .don .mention {
            width: 65%;
            margin: auto;
        }
    }

    @media (max-width: 820px) {
        .one-don {
            width: 40%;
        }

        .don .mention {
            width: 52%;
        }
    }

    @media (max-width: 580px) {
        .don {
            margin-left: 0;
            padding-left: 4.3%;
            padding-bottom: 115px;
            border-radius: 0;
        }

        .bloc-don  {
            width: 100%;
        }

        .one-don {
            width: 45%;
        }

        .don .mention {
            width: 95%;
        }
    }

    @media (max-width: 500px) {
        .don::after {
            left: 8px;
        }

        .one-don {
            width: 70%;
        }
    }

    @media (max-width: 330px) {
        .one-don {
            width: 100%;
        }
    }
/* --- End Don --- */