:root {
    --header-height : 15vh;
    --footer-height: 10vh;
    --mainmenu-height: 4vh;

    --logo-height: 12vh;

    --articles-height: calc(100vh - var(--main-content-margin-top));

    --mainmenu-margin-top: 15vh;

    --main-content-margin-top: calc(var(--hamburgerCross-position-top) + 1vh);

    --hamburgerCross-position-top: calc((var(--header-height) + var(--mainmenu-height)) + 2vh);
    --hamburgerCross-position-right: 3%;

    --submenu-position-top: 20vh;

    --submenu-height: calc(100vh - (var(--header-height) + var(--footer-height) + var(--mainmenu-height) + 1vh));
    --submenu-width: 20%;

    --gamme_pommes-first-row-height: 5vh;
    --gamme_pommes-second-row-height: 4vh;
    --gamme_pommes-third-row-height: 66vh;
    --gamme_pommes-row-gap: 1vh;

    --contact-height: 50vh;

    --noir-site: rgba(21,21,21,1.0);
    --blanc-casse: antiquewhite;
    --mainmenu-background-color: rgba(144, 110, 75, 1.0);
    --submenu-background-color: rgba(144, 110, 75, 0.95);
    --sub-submenu-background-color: rgba(144, 110, 75, 0.5);
    --mainmenu-background-color-hover: rgba(21,21,21,0.9);
    --red-pointer-hover: rgb(161, 20, 20);

    --mainmenu-font-size: 1.3em;
    --submenu-font-size: 1.2em;
    --sub-submenu-font-size: 1.3em;
    --h1-font-size: 3.2em;
    --h2-font-size: 1.5em;
    --h3-font-size: 1.3em;
    --carousel-caption-font-size: 1.1em;

    --h1-font-family: 'Asmelina Harley';
}

@font-face {
    font-family: 'ClementePDai Regular';
    font-style: normal;
    font-weight: normal;
    src: local('ClementePDai Regular'), url('/contents/fonts/clementepdaa/ClementePDai-Regular.woff') format('woff');
}

@font-face {
    font-family: 'ClementePDac ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('ClementePDac ExtraLight'), url('/contents/fonts/clementepdaa/ClementePDac-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Dream Orphans';
    src: url('/contents/fonts/dream_orphans/dream_orphans.ttf') format('ttf');
}

@font-face {
    font-family: 'Asmelina Harley';
    src: url('/contents/fonts/asmelina_harley/asmelinaharley.ttf') format('ttf'),
        url('/contents/fonts/asmelina_harley/asmelinaharley.woff2') format('woff2'),
        url('/contents/fonts/asmelina_harley/asmelinaharley.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}


/*  ******************************************  Grands écrans   *********************************   */
@media all and (min-width: 1500px){

    body {
        background-color: var(--noir-site);
        color: var(--blanc-casse);
        font-family: 'ClementePDac ExtraLight', sans-serif;
    }

    h1 {
        font-size: var(--h1-font-size);
        font-family: var(--h1-font-family);
    }

    a {
        text-decoration: none;
        color: var(--blanc-casse);
    }

    .pointer {
        cursor: pointer;
    }

    /*  -------HEADER--------   */
    header {
        position: fixed;
        z-index: 1000;
        top: 0;
        background-color: var(--noir-site);
        height: var(--header-height);
        width: 100%;
        display: grid;
        grid-template-columns: 10% 90%;
        align-content: center;
        -webkit-box-align: center;
                align-items: center;
        justify-items: center;
    }

    header img {
        height: 100%;
    }

    #logo_and_title {
        height: 100%;
        width: 40%;
        display: grid;
        grid-template-columns: 30% 70%;
        align-content: center;
        -webkit-box-align: center;
                align-items: center;
        justify-items: center;
        

    }

    #logo_and_title .logo {
        height: var(--logo-height);
    }

    /*  -------MAIN MENU-----   */

    #main_menu {
        position: fixed;
        z-index: 1000;
        height: var(--mainmenu-height);
        width: 100%;
        top: var(--mainmenu-margin-top);
        background-color: var(--mainmenu-background-color);
        display: grid;
    }

    #main_menu ul {
        margin: 0;
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 10%);
        -webkit-box-pack: center;
                justify-content: center;
    }

    #main_menu ul li {
        display: grid;
        /* justify-content: center;
        align-content: center; */
        
    }

    #main_menu ul li a {
        position: relative;
        justify-self: stretch;
        text-align: center;
        text-decoration: none;
        font-size: var(--mainmenu-font-size);
        color: var(--noir-site);
        -webkit-transition: color 0.5s ease-in-out;
        transition: color 0.5s ease-in-out;
    }

    #main_menu ul li a::after {
        content: "";
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        height: 0px;
        width: 100%;
        background-color: var(--mainmenu-background-color-hover);
        -webkit-transition: height 0.25s ease-in-out;
        transition: height 0.25s ease-in-out;
    }

    #main_menu ul li a:hover {
        color: var(--blanc-casse);
    }

    #main_menu ul li a:hover::after {
        height: 100%;
    }


    /*  --HAMBURGER & CROSS--    */
    #hamburger {
        position: fixed;
        z-index: 1000;
        height: 40px;
        width: 50px;
        top: var(--hamburgerCross-position-top);
        right: var(--hamburgerCross-position-right);
        cursor: pointer;
    }

    #hamburger {
        display: grid;
        -webkit-box-align: center;
                align-items: center;
    }

    

    #hamburger .line {
        width: 100%;
        height: 5px;
        background-color: var(--blanc-casse);
        border-radius: 2px;
        -webkit-transform-origin: top left;
                transform-origin: top left;
        -webkit-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .line:nth-child(1) {
        align-self: start;
    }

    .line:nth-child(3) {
        align-self: end;
    }

    #hamburger.cross .line:nth-child(2){
        width: 0px;
    }

    #hamburger.cross .line:nth-child(1){
        -webkit-transform: rotate(45deg) ;
                transform: rotate(45deg) ;
    }

    #hamburger.cross .line:nth-child(3){
        -webkit-transform: rotate(-45deg) ;
                transform: rotate(-45deg) ;
    }

    /*  -------SUB MENU-----    */

    #submenu {
        position: fixed;
        z-index: 1000;
        top: var(--submenu-position-top);
        left: calc(var(--submenu-width) * -1);
        height: var(--submenu-height);
        background-color: var(--submenu-background-color);
        padding-right: 1%;
        padding-left: 3%;
        border-radius: 10px;
        font-size: var(--submenu-font-size);
        -webkit-transition: left 0.5s ease-in-out;
        transition: left 0.5s ease-in-out;
    }

    #submenu.visible {
        left: 2%;
    }

    #submenu ul {
        padding: 0;
        list-style-type: none;
        height: 100%;
        display: grid;
        justify-items: end;
    }

    #submenu ul li {
        display: grid;
        -webkit-box-align: center;
                align-items: center;
    }

    #submenu .pointer:hover {
        color: var(--red-pointer-hover);
    }


    /*  -------MAIN--------     */
    main {
        /* background-color: darksalmon; */
        position: relative;
        width: 100%;
        margin-top: var(--main-content-margin-top);
        display: grid;
        -webkit-box-pack: center;
                justify-content: center;
        grid-template-columns: 80%;
    }
    main article {
        height: 0;
        opacity: 0;
        overflow: hidden;
        -webkit-transition: height 0.9s ease-in-out;
        transition: height 0.9s ease-in-out;
    }

    main article.visible_article {
        display: grid;
        grid-template-columns: 80%;
        grid-template-rows: 5vh 70vh;
        row-gap: 2vh;
        -webkit-box-pack: center;
                justify-content: center;
        height: var(--articles-height);
        opacity: 1;
        text-align: center;
        overflow: scroll;
    }

    main article p {
        text-align: justify;
    }


    /* QUI SOMMES NOUS */


    /* COMMENT TRAVAILLONS NOUS */
    #carousel {
        height: 100%;
        width: 80%;
        margin: auto;
    }

    .carousel-inner, .carousel-item {
        height: 100%;
    }

    .carousel-item img {
        min-width: 100%;
    }

    .carousel-caption {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 1% 2% 1% 2%;
        background-color: rgba(21,21,21,0.5);
    }

    .carousel-caption p {
        font-size: var(--carousel-caption-font-size);
    }

    /* NOTRE GAMME */

    .color-red {
        color: var(--red-pointer-hover);
    }

    main #gamme_pommes.visible_article {
        display: grid;
        grid-template-columns: 80%;
        grid-template-rows: var(--gamme_pommes-first-row-height) var(--gamme_pommes-second-row-height) var(--gamme_pommes-third-row-height);
        row-gap: var(--gamme_pommes-row-gap);
        -webkit-box-pack: center;
                justify-content: center;
        height: var(--articles-height);
        opacity: 1;
        text-align: center;
    }

    #sub_sub_menu ul {
        width: 100%;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
                justify-content: space-evenly;
        background-color: var(--sub-submenu-background-color);
        height: 100%;
    }

    #sub_sub_menu ul li {
        list-style-type: none;
        font-size: var(--sub-submenu-font-size);
    }

    #sub_sub_menu ul li span {
        line-height: var(--gamme_pommes-second-row-height);
    }

    #sub_sub_menu li:hover {
        color: var(--red-pointer-hover);
    }

    article .visible_section {
        overflow: scroll;
    }

    article .invisible_section {
        display: none;
    }

    .drink-item {
        display: grid;
        height: 100%;
        grid-template-columns: 35% 60%;
        -webkit-column-gap: 5%;
           -moz-column-gap: 5%;
                column-gap: 5%;
        grid-template-rows: 100%;
    }

    .drink-item img {
        max-height: 100%;
        min-height: 100%;
    }

    .item-text {
        display: grid;
        grid-template-columns: 100%;
        align-content: space-around;
    }


    /* VISITES */

    #visites section {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 8vh;
        overflow: scroll;
    }

    #logos-divers {
        height: 10vh;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: space-evenly;
                justify-content: space-evenly;
    }

    #logos-divers img {
        max-height: 100%;
    }

    

    /* ---------CONTACT--------- */

    #contact {
        place-self: center;
        height: var(--contact-height);
        font-size: 1.3em;
        text-align: center;
    }

    #contact address {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 3vh;
    }

    #contact address iframe {
        display: block;
    }

    #contact address a {
        text-decoration: none;
    }

    #contact address a:hover {
        color: var(--mainmenu-background-color);
    }

    #contact #map-link {
        cursor: pointer;
    }

    #contact #map-link:hover {
        color: var(--mainmenu-background-color);
    }

    #contact .fa-facebook {
        margin-top: 3vh;
    }

    #contact #google-map-div.map-close {
        position: fixed;
        overflow: hidden;
        top: 0;
        left: 0;
        
        height: 0vh;
        width: 100%;

    }

    #contact #google-map-div {
        -webkit-transition: height 0.5s ease-in-out;
        transition: height 0.5s ease-in-out;
    }

    #contact #google-map-div.map-open {
        position: fixed;
        overflow: hidden;
        top: 0;
        left: 0;
        z-index: 1001;
        height: 100vh;
        width: 100%;
        background-color: rgba(21,21,21,0.9);
    }

    #contact #google-map{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }



    /*  -------FOOTER------     */
    footer {
        background-color: darkslategrey;
        position: absolute;
        height: 10vh;
        width: 100%;
    }
    
}



/*  ******************************************  Ecrans Moyens   *********************************   */
@media all and (min-width: 920px) and (max-width: 1500px){
    body {
        background-color: var(--noir-site);
        color: var(--blanc-casse);
        font-family: 'ClementePDac ExtraLight', sans-serif;
    }

    h1 {
        font-size: var(--h1-font-size);
        font-family: var(--h1-font-family);
    }

    a {
        text-decoration: none;
        color: var(--blanc-casse);
    }

    .pointer {
        cursor: pointer;
    }
}




/*  ******************************************  Petits écrans   *********************************   */
/* @media and (max-width: 919px){
    
} */