@media (max-width: 770px) {
    .Histoire {
        height: 1650px;
        top: -100px;
    }

    .HistoireContainer {
        overflow-y: inherit;
    }

    .HistoireOverflow {
        top: 140px;
    }

    .CepagesText {
        overflow-y: inherit;
    }

    .HistoireText1 {
        width: 515px;
    }

    .HistoireText2 {
        font-size: 52.5px;
    }

    .HistoireText3 {
        font-size: 15.5px;
        top: 90px;
        color: #686868;
    }

    .HistoireImageFond {
        width: 515px;
    }

    .HistoireOverflow {
        width: 515px;
    }
}

@media (max-width: 545px) {
    .Histoire {
        height: auto;
        padding-top: 323px;
    }
    
    .HistoireContainer {
        overflow-x: hidden;
        height: fit-content;
        position: relative;
        top: 0;
    }

    .HistoireText {
        top: -20px;
        width: 100%;
        height: auto;
        display: inline-block;
    }

    .HistoireText1 {
        position: relative;
        top: auto;
        height: fit-content;

        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 30px);
        display: block;
        margin-bottom: 77.5px;
    }

    .HistoireText2 {
        top: 5px;
        position: relative;
    }

    .HistoireText3 {
        position: relative;
        top: 0;
        padding-top: 60px;
    }

    .HistoireImage {
        width: 100%;
        height: fit-content;
    }

    .HistoireImageFond {
        width: 100%;
        position: relative;
        height: 132.5vw;
    }

    .HistoireOverflow {
        width: calc(100% - 27px);
    }
}

@media (max-width: 400px) {
    @media (max-height: 660px) {
        .Histoire {
            top: -185px;
        }
        .HistoireOverflow {
            top: 10vh;
        }
    }
}
















@media (max-width: 770px) {
    .Releve {
        height: 1340px;
    }

    .ReleveContainer {
        overflow: inherit;
    }

    .ReleveText {
        overflow-y: inherit;
    }
    
    .ReleveText1 {
        width: 515px;
    }

    .ReleveText2 {
        font-size: 52.5px;
    }

    .ReleveText3 {
        font-size: 15.5px;
        top: 90px;
        color: #686868;
    }

    .ReleveImageFond {
        top: -75px;
        width: 515px;
    }
}

@media (max-width: 545px) {
    .Releve {
        padding-bottom: 69px;
        height: auto;
    }
    
    .ReleveContainer {
        overflow-x: hidden;
        height: fit-content;
        position: relative;
        top: 0;
    }

    .ReleveText {
        width: 100%;
        height: auto;
        top: 0px;
    }

    .ReleveText1 {
        position: relative;
        top: auto;
        height: fit-content;

        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 30px);
        display: inline-block;
        margin-bottom: 77.5px;
    }

    .ReleveText2 {
        top: 5px;
        position: relative;
    }

    .ReleveText3 {
        position: relative;
        top: 0;
        padding-top: 60px;
    }

    .ReleveImage {
        top: auto;
        width: 100%;
        height: fit-content;
    }

    .ReleveImageFond {
        width: 100%;
        position: relative;
        height: 115vw;
        top: 0;
    }
}

















@media (max-width: 770px) {
    .Cepages {
        top: -20px;
        height: 1385px;
    }

    .CepagesContainer {
        overflow: inherit;
    }

    .CepagesText {
        overflow-y: inherit;
    }
    
    .CepagesText1 {
        width: 515px;
    }

    .CepagesText2 {
        font-size: 52.5px;
    }

    .CepagesText3 {
        font-size: 15.5px;
        top: 90px;
        color: #686868;
    }

    .CepagesImageFond {
        top: -15px;
        width: 515px;
    }
}

@media (max-width: 545px) {
    .Cepages {
        height: auto;
        padding-top: 115px;
        margin-bottom: 90.5px;
    }
    
    .CepagesContainer {
        height: fit-content;
        position: relative;
        top: 0;
    }

    .CepagesText {
        width: 100%;
        height: auto;
    }

    .CepagesText1 {
        position: relative;
        top: auto;
        height: fit-content;

        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 30px);
        display: inline-block; 
        margin-bottom: 77.5px;
    }

    .CepagesText2 {
        top: 5px;
        position: relative;
    }

    .CepagesText3 {
        position: relative;
        top: 0;
        padding-top: 65px;
    }

    .CepagesImage {
        width: 100%;
        height: fit-content;
    }

    .CepagesImageFond {
        top: 0;
        width: 100%;
        position: relative;
        height: 132.5vw;
    }

    .CepagesOverflow {
        width: calc(100% - 27px);
    }
}


















/*
.navbar {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    right: 0px;
    width: 564px;
    height: 20px;
    font-weight: 400;
    font-family: 'Cormorant', serif;
}

.navbar::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 988%;
    background-color: #101010;
    transform: scaleY(0.5);
    left: -1000%;
}
  
.navbar a {
    text-decoration: none;
    color: #000000;
    font-size: 14.8px;
    display: inline;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.2rem;
    position: relative;
    font-weight: 600;
    font-family: 'Cormorant', serif;
}
  
#ligne {
    position: relative;
    height: 100%;
    width: 1px;
    background-color: #00000087;
}
  
#Histoire::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.424);
    opacity: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 32px;
    width: 132px;
    z-index: -1;
}

@media (max-width: 991px) {

    .navbar a {
        display: none;
    }
    
    #ligne {
        display: none;
    }

    .navbar {
        position: absolute;
        right: -31px;
        width: 50px;
        height: 40px;
        display: inline-block;
        transform: inherit;
    }

    .navbar::after {
        left: -1555%;
        width: 1500%;
        opacity: 1;
    }

    .Burger {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .BurgerLine {
        margin: auto;
        position: relative;
        height: 1px;
        width: 40%;
        background-color: #101010;
        transform: scaleY(0.9);
        transition: 0.7s ease-in-out all;
    }

    .BurgerLine::after {
        display: block !important;
    }

    .BurgerLine::before {
        display: block !important;
    }

    #BackgroundBurger {
        position: absolute;
        width: 70px;
        height: 70px;
        border: solid #000000 1px;
        transform: scale(0.5);
    }

    body.active .BurgerLine {
        transform: rotate(90deg);
        height: 1.45px;
    }
}

.Burger {
    position: absolute;
}

.NavbarMobile {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 105vh;
    z-index: 1;
    position: absolute;
    display: flex;
    flex-direction: column;
    opacity: 0.7;
    display: none;
    transform: translateY(100vh);
    z-index: 100;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style-type: none;
}

li {
    opacity: 0;
    transform: translateY(35px);
}

li a {
    text-decoration: none;
    color: #e5e1d5;
    font-size: 35px;
    font-family: 'Cormorant', serif;
    font-weight: 100;
    line-height: 85px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    font-style: italic;
}

.BurgerLine::after {
    transition: 0.7s ease-in-out all;
    content: '';
    position: absolute;
    top: -6px;
    width: 100%;
    height: 2px;
    background-color: #101010;
    transform: scaleY(0.7);
    display: none;
}
.BurgerLine::before {
    transition: 0.7s ease-in-out all;
    content: '';
    position: absolute;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background-color: #101010;
    transform: scaleY(0.7);
    display: none;
}*/

/* Réglage des bugs après le test sur le site (là, navbar) */

/*body.active .HistoireOverflow {
    top: 32px;
}

@media (max-height: 500px) {
    li a {
        font-size: 35px;
        line-height: 70px;
    }
}

@media (max-height: 500px) {
    body.active .HistoireOverflow {
        top: 22px;
    }
}

@media (max-height: 380px) {
    li a {
        font-size: 30px;
        line-height: 62.5px;
    }
}

@media (max-height: 500px) {
    body.active .HistoireOverflow {
        top: 16px;
    }
}

.NavbarMobileBackground {
    background-color: #101010;
    position: absolute;
    transform: translateY(99vh);
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    z-index: 99;
}

body.active .NavbarMobileBackground {
    height: 7000%;
}*/

.arrow {
    width: 10px;
    height: 70px;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}



















/* navbar */

.navbar {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    top: 31px;
    right: 43px;
    width: 564px;
    z-index: 110;
    height: 20px;
    font-weight: 400;
    font-family: 'Cormorant', serif;
}

.navbar::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 988%;
    background-color: #101010;
    transform: scaleY(0.5);
    left: -1000%;
}
  
a {
    text-decoration: none;
    color: #101010;
    font-size: 14.8px;
    display: inline;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.2rem;
    font-weight: 600;
    position: relative;
}
  
#ligne {
    position: relative;
    height: 100%;
    width: 1px;
    background-color: #101010;
}
  
#Histoire::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.424);
    opacity: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 32px;
    width: 132px;
    z-index: -1;
}

/*.div {
    background-color: black;
    width: 100px;
    height: 100px;
    margin: auto;
    position: relative;
}
  
.div::after {
    background-color: red;
    width: 100px;
    height: 5px;
    position: absolute;
    bottom: -10px;
    content: '';
}*/

@media (max-width: 725px) {
    .navbar {
        right: 50%;
        transform: translateX(50%);
    }
    .navbar::after {
        opacity: 0;
    }
}

@media (max-width: 710px) {
    .navbar a {
        display: none;
    }
    
    #ligne {
        display: none;
    }

    .navbar {
        right: 20px;
        width: 50px;
        height: 40px;
        display: inline-block;
        transform: inherit;
    }
    
    .navbar::after {
        left: -1555%;
        width: 1500%;
        opacity: 1;
    }

    .Burger {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .BurgerLine {
        margin: auto;
        position: relative;
        height: 1px;
        width: 40%;
        background-color: #101010;
        transform: scaleY(0.9);
        transition: 0.7s ease-in-out all;
    }

    .BurgerLine::after {
        display: block !important;
    }

    .BurgerLine::before {
        display: block !important;
    }

    #BackgroundBurger {
        position: absolute;
        width: 70px;
        height: 70px;
        border: solid #101010 1px;
        transform: scale(0.5);
    }

    body.active .BurgerLine {
        transform: rotate(90deg);
        height: 1.45px;
    }
}

.Burger {
    position: absolute;
}

.NavbarMobile {
    /*position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: #101010;
    z-index: 9;
    position: absolute;
    display: flex;
    flex-direction: column;
    opacity: 0.7;
    display: none;
    transform: translateY(100vh);*/

    position: absolute;
    top: 0;
    width: 100vw;
    height: 105vh;
    z-index: 1;
    position: absolute;
    display: flex;
    flex-direction: column;
    opacity: 0.7;
    display: none;
    transform: translateY(100vh);
    z-index: 100;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style-type: none;
}

li {
    opacity: 0;
    transform: translateY(35px);
}

li a {
    justify-content: left;
    color: #e5e1d5;
    font-size: 35px;
    font-family: 'Cormorant', serif;
    font-weight: 100;
    line-height: 85px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    font-style: italic;
}
.BurgerLine::after {
    transition: 0.7s ease-in-out all;
    content: '';
    position: absolute;
    top: -6px;
    width: 100%;
    height: 2px;
    background-color: #101010;
    transform: scaleY(0.7);
}
.BurgerLine::before {
    transition: 0.7s ease-in-out all;
    content: '';
    position: absolute;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background-color: #101010;
    transform: scaleY(0.7);
}



/* Réglage des bugs après le test sur le site (là, navbar) */

@media (max-height: 500px) {
    li a {
        font-size: 35px;
        line-height: 70px;
    }
}

@media (max-height: 500px) {
    .navbar{ 
        top: 22px;
    }
}

@media (max-height: 380px) {
    li a {
        font-size: 30px;
        line-height: 62.5px;
    }
}

@media (max-height: 340px) {
    .navbar{ 
        top: 15px;
        right: 15px;
    }
}























.NavbarMobileBackground {
    background-color: #101010;
    position: absolute;
    transform: translateY(99vh);
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    z-index: 99;
}

body.active .NavbarMobileBackground {
    height: 7000%;
}