@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600&display=swap');
@font-face {
    font-family: 'Agate';
    src: url('Ressources/qt_agatetype/QTAgateType-Bold.otf') format('opentype'),
         url('Ressources/qt_agatetype/QTAgateType.otf') format('opentype');
  }

html {
    width: 100%;
    height: 100%;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: #FFFFFF;
    height: fit-content;
    perspective: 1px;
}

.Histoire {
    position: relative;
    display: block;
    width: 100vw;
    height: 1149px;
}

.HistoireContainer {
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 1020px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.HistoireOverflow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 190px;
    width: 1400px;
    height: 35px;
    display: flex;
    align-items: center;
    overflow-x: hidden;
    z-index: 200;
    transition: top 1.9s ease;
}

.HistoireText {
    padding-right: 15px;
    padding-left: 15px;
    top: -10px;
    width: 50%;
    position: relative;
}

.HistoireText1 {
    position: relative;
    top: 275px;
    width: 473px;
    height: 500px;
}

.HistoireText2 {
    font-weight: 400;
    position: absolute;
    top: -30px;
    height: fit-content;
    font-size: 100px;
    font-style: italic;
    font-family: 'Cormorant', serif;
    color: #000000;
}

.HistoireText3 {
    position: absolute;
    top: 135px;
    width: 100%;
    color: #434343;
    font-size: 17.25px;
    line-height: 2.1;
    font-family: 'Jost', sans-serif;
    text-align: justify;
    font-weight: 400;
}

.HistoireImage {
    position: relative;
    width: 50%;
    padding-right: 15px;
    padding-left: 15px;
}

.HistoireImageFond {
    position: absolute;
    width: 690px;
    height: 750px;
    top: 245px;
    background-image: url('../Src/images/Fond\(else\).jpg');
    background-position: center;
    background-size: cover;
}





@media (max-width: 1560px) {
    .HistoireImageFond {
        width: 570px;
        height: 741px;
    }

    .HistoireText {
        padding-right: 0px;
        padding-left: 0px;
    }

    .HistoireContainer {
        width: 1180px;
    }

    .HistoireText1 {
        width: 379px;
    }

    .HistoireText2 {
        font-size: 80px;
    }

    .HistoireText3 {
        font-size: 17px;
        top: 110px;
    }

    .HistoireOverflow {
        width: 1180px;
    }
}

@media (max-width: 1250px) {
    .Histoire {
        height: 1625px;
    }

    .HistoireOverflow {
        top: 210px;
    }

    .HistoireContainer {
        flex-direction: column;
        align-items: center;
        height: 1543px;
    }

    .HistoireText {
        width: fit-content;
        height: 775px;
    }
    
    .HistoireText1 {
        width: 800px;
    }

    .HistoireImageFond {
        top: 0;
        left: 50%;
        transform: translateX(-50%) !important;
        width: 800px;
    }

    .HistoireOverflow {
        width: 800px;
    }
}

@media (max-width: 1180px) {
    .HistoireContainer {
        width: 100vw;
    }
}

@media (max-width: 991px) {
    .Histoire {
        height: 1750px;
    }

    .HistoireOverflow {
        top: 220px;
    }

    .HistoireContainer {
        height: 1655px;
    }

    .HistoireText {
        height: 800px;
        display: flex;
        justify-content: center;
    }

    .HistoireText1 {
        width: 690px;
    }

    .HistoireImageFond {
        width: 690px;
        height: 850px;
    }

    .HistoireOverflow {
        width: 690px;
    }
}













#HistoireReleve {
    display: block;
    position: relative;
    width: 100vw;
    top: 0;
    height: 100vh;
    background-image: url('../Src/images/Fond2.jpg');
    background-position: 50% 40%;
    background-size: cover;
}













.Releve {
    margin-top: 70px;
    position: relative;
    display: block;
    width: 100vw;
    height: 940px;
}

.ReleveContainer {
    overflow: hidden;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 800px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.ReleveText {
    padding-right: 15px;
    padding-left: 15px;
    width: 50%;
    position: relative;
    height: 900px;
    top: -325px;
    display: flex;
    justify-content: center;
}

.ReleveText1 {
    position: absolute;
    bottom: 0;
    width: 473px;
    height: 350px;
    padding-right: 15px;
}

.ReleveText2 {
    font-weight: 400;
    position: absolute;
    top: -30px;
    height: fit-content;
    font-size: 100px;
    font-style: italic;
    font-family: 'Cormorant', serif;
    color: #000000;
}

.ReleveText3 {
    position: absolute;
    top: 135px;
    width: 100%;
    color: #434343;
    font-size: 17.25px;
    line-height: 2.1;
    font-family: 'Jost', sans-serif;
    text-align: justify;
    font-weight: 400;
}

.ReleveImage {
    position: relative;
    width: 50%;
    height: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.ReleveImageFond {
    position: absolute;
    width: 690px;
    height: 750px;
    top: 0;
    background-image: url('../Src/images/Fond3.jpg');
    background-position: center;
    background-size: cover;
}
















@media (max-width: 1560px) {
    .ReleveImageFond {
        width: 570px;
        height: 741px;
    }

    .ReleveText {
        padding-right: 0px;
        padding-left: 0px;
    }

    .ReleveContainer {
        width: 1180px;
    }

    .ReleveText1 {
        width: 379px;
    }

    .ReleveText2 {
        font-size: 80px;
    }

    .ReleveText3 {
        font-size: 17px;
        top: 110px;
    }
}

@media (max-width: 1250px) {
    .Releve {
        height: 1400px;
        margin-top: 0;
    }

    .ReleveContainer {
        flex-direction: column;
        align-items: center;
        height: 1500px;
    }

    .ReleveText {
        width: fit-content;
        height: fit-content;
        top: 400px;
    }

    .ReleveText1 {
        width: 800px;
    }

    .ReleveImage {
        top: 525px;
    }

    .ReleveImageFond {
        left: 50%;
        transform: translateX(-50%) !important;
        width: 800px;
        top: -50px;
    }
}

@media (max-width: 1180px) {
    .ReleveContainer {
        width: 100vw;
    }
}

@media (max-width: 991px) {
    
    .ReleveText1 {
        width: 690px;
    }

    .ReleveImageFond {
        width: 690px;
    }
}















.Cepages {
    margin-top: 30px;
    position: relative;
    display: block;
    width: 100vw;
    height: 1150px;
}

.CepagesContainer {
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 1020px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.CepagesText {
    padding-right: 15px;
    padding-left: 15px;
    width: 50%;
    position: relative;
}

.CepagesText1 {
    position: relative;
    top: 300px;
    width: 553px;
    height: 500px;
}

.CepagesText2 {
    font-weight: 400;
    position: absolute;
    top: -30px;
    height: fit-content;
    font-size: 100px;
    font-style: italic;
    font-family: 'Cormorant', serif;
    color: #000000;
}

.CepagesText3 {
    position: absolute;
    top: 135px;
    width: 100%;
    color: #434343;
    font-size: 17.25px;
    line-height: 2.1;
    font-family: 'Jost', sans-serif;
    text-align: justify;
    font-weight: 400;
}

.CepagesImage {
    position: relative;
    width: 50%;
    padding-right: 15px;
    padding-left: 15px;
}

.CepagesImageFond {
    position: absolute;
    width: 690px;
    height: 850px;
    top: 140px;
    background-image: url('../Src/images/Fond4.jpg');
    background-position: center;
    background-size: cover;
}















@media (max-width: 1560px) {
    .CepagesImageFond {
        width: 570px;
        height: 800px;
    }

    .CepagesText {
        padding-right: 0px;
        padding-left: 0px;
    }

    .CepagesContainer {
        width: 1180px;
    }

    .CepagesText1 {
        width: 443px;
    }

    .CepagesText2 {
        font-size: 80px;
    }

    .CepagesText3 {
        font-size: 17px;
        top: 110px;
    }
}

@media (max-width: 1250px) {
    .Cepages {
        height: 1450px;
        margin-top: 0;
    }

    .CepagesContainer {
        top: -145px;
        flex-direction: column;
        align-items: center;
        height: 1500px;
    }

    .CepagesText {
        width: fit-content;
        height: 660px;
        top: -40px;
    }
    
    .CepagesText1 {
        width: 800px;
    }

    .CepagesImageFond {
        top: 0;
        left: 50%;
        transform: translateX(-50%) !important;
        width: 800px;
    }
}

@media (max-width: 1180px) {
    .CepagesContainer {
        width: 100vw;
    }
}

@media (max-width: 991px) {
    .CepagesText {
        display: flex;
        justify-content: center;
    }

    .CepagesText1 {
        width: 690px;
    }

    .CepagesImageFond {
        width: 690px;
    }
}