/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

* {box-sizing: border-box;}



html {

    --in-space: 50px;

    --c-brown: #D1AD94;
    --c-brown2: #F8D4BA;
    --c-beige: #F0E9E4;
    --c--dark: #2F1D36;
    --c-mauve: #AD849F;
    --c-violet: #5E5262;
    --c-medium: #504553;

    scroll-behavior: smooth;
}

body {

    font-family: "Roboto", sans-serif;
    font-weight: 300;
    line-height: 150%;
    font-size: 16px;
    background-color: var(--c-beige);
}


a.btn_cta {
    padding: 10px 17px 10px 37px;
    font-weight: 700;
    border-radius: 7px;
    text-decoration: none;
    background-color: var(--c-mauve);
    background-image: url(media/picto_btn.svg);
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 17px;
    color: white;
    text-align: center;
    margin: 20px 0;
    display: inline-block;
    box-shadow: 0 5px 5px #00000052;
    transition: all ease-in-out 300ms;
    cursor: pointer;
}

a.btn_cta:hover {
    background-color: #AA7899;
    cursor: pointer;
}


h1 {
    font-family: "Bodoni Moda", serif;
    font-size: 30px;
    line-height: 120%;
    z-index: 5;
}

h1 em {
    color: var(--c-brown2);
}

h2 {
    font-family: "Bodoni Moda", serif;
    font-size: 30px;
    line-height: 120%;
    margin-bottom: var(--in-space);
}

#legal header {
    height: 25vh;
}

#legal .edito h2 {
    
    margin: 30px 0;  
      
}

#legal .edito ul {
    padding: 0 0 0 17px; 
}

#legal .edito ul li {
    list-style: disc;
    padding: 0 0 0 10px; 
}

#legal .edito a {
    color: var(--c--dark);
    font-weight: 400;
}

main {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

section,
header,
footer {
    margin: 0 auto;
    padding: var(--in-space);
}







/* / / / / / / / / / / / / H E A D E R */



header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    height: 80vh;
    background-image: url(media/cover.jpg);
    background-size: cover;
    background-position: center top -150px;
    background-repeat: no-repeat;
    
}

nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}


nav img.logo {
    width: 100px;
}

nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

nav ul li a {
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    border-bottom: 2px solid transparent;
    transition: all linear 300ms;
    padding: 5px 0;
    letter-spacing: 1px;
    cursor: pointer;
}

nav ul li a:hover {
    border-bottom: 2px solid white;
}

.intro {
    background-color: #2f1d3682;
    border-radius: 0% 80px 0 0%;
    padding: var(--in-space);
    width: 50%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    min-height: 50%;
    color: white;
    backdrop-filter: brightness(50%);
}

.intro .btn_cta {
    width: 155px;
}




/* / / / / / / / / / / / / E D I T O */


.edito {
    background-color: var(--c-brown);
}

.edito .eriksson {
    display: flex;
    align-items: center;
    gap: 30px;
}

.edito .eriksson img.portrait {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid white;
    background-color: white;
}

.edito .eriksson p {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 5px;
    color: white;
    text-transform: uppercase;
}

.edito .eriksson p img {
    width: 250px;
}

.edito .presentation {
    display: flex;
    gap: 30px;
    align-items: flex-end;

}

.edito .presentation p {
    width: 50%;
}





/* / / / / / / / / / / / / W I N E S */

.wines {
background-color: white;
padding-bottom: 100px;
background-image: url(media/raisin.jpg);
background-repeat: no-repeat;
background-size: 375px;
background-position: right -5% bottom 50px;
}

.wines h2 {
    margin-bottom: 0px;
}

.wines .chateaux {
    display: flex;
    gap: 10px;
    margin: 40px auto 80px auto;
    opacity: 0.5;
    width: 600px;
}

.wines .chateaux li img {
    width: 100%;
}


.wines .vin {
    width: 95%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 50px;
    margin: 50px 0;
}

.wines .vin li {

    width: 30%;
    height: 200px;
    position: relative;

}

.wines .vin li a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

a#vin1 {background-image: url(media/wine_6.jpg); }
a#vin2 {background-image: url(media/wine_5.jpg); }
a#vin3 {background-image: url(media/wine_3.jpg); }
a#vin4 {background-image: url(media/wine_4.jpg); }
a#vin5 {background-image: url(media/wine_2.jpg); }
a#vin6 {background-image: url(media/wine_1.jpg); }

.wines .vin li a div {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 50px 0 20px;
    backdrop-filter: blur(0px) brightness(60%);
    -webkit-backdrop-filter: blur(0px) brightness(60%);
    transition: all linear 200ms;

}

.wines .vin li a:hover div {
    backdrop-filter: blur(10px) brightness(50%);
    -webkit-backdrop-filter: blur(10px) brightness(60%);
}



.wines .vin li a h3 {
    color: white;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 130%;
    opacity: 1;
    text-shadow: 1px 1px 2px black;
    
}

.wines .vin li a h3 strong {
    font-family: "Bodoni Moda", serif;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.3px;
}

.wines .vin li a:hover h3 {
    display: none;
}

.wines .vin li a div .details {
    display: none;
}

.wines .vin li a:hover div .details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    line-height: 120%;
    height: 100%;
    font-family: "Bodoni Moda", serif;
}

.wines .vin li a div .details p strong {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 250%;
    color: var(--c-brown2);
    font-family: "Roboto", sans-serif;
    letter-spacing: 2px;
}

.wines .vin li a div .details ul {
    width: 100%;
    padding: 0px 13px;
    font-size: 0.8rem;
    font-family: "Roboto", sans-serif;
}

.wines .vin li a div .details ul li {
    width: 100%;
    height: auto;
    list-style: disc;
    color: var(--c-beige);
    line-height: 120%;

}

.wines .vin li img {
    position: absolute;
    top: -30px;
    right: -35px;
    width: 85px;
    z-index: 10;
}

.custom {
    margin: 70px 0 0px 0;
    width: 50%;
}

.custom h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

.custom p {
    margin-bottom: 20px;
}




/* / / / / / / / / / / / / P R O C E S S */


.process {
    position: relative;
    background-color: var(--c-violet);
    border-radius: 0 0 15px 15px;
}

.process h2 {
    color: white;
}

.process span {
display: block;
top: -65px;
left: 50%;
transform: translateX(-50%);
position: absolute;
width: 120px;
height: 120px;
background-image: url(media/medal.svg);
background-size: cover;
}


.process h3 {
    font-family: "Bodoni Moda", serif;
    color: white;
    font-size: 20px;
}

.process-intro {
    width: 50%;
    color: #EBDED5;
}

.process ul {
    display: flex;
    gap: 20px;
    height: 250px;
    align-items: flex-end;
    margin: var(--in-space) auto;
}

.process ul li {
    height: 230px;
    width: 25%;
    background-color: var(--c-medium);
    border-radius: 15px;
    text-align: center;
    padding: var(--in-space) 30px;
    transition: all linear 150ms;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: white;
    cursor: pointer !important;
}

.process ul p {
    display: none;
}

.process ul li:hover {
    height: 250px;
}

.process img {
    width: 70px;

}

.process ul li:hover img {
    display: none;
}

.process ul li:hover p {
    display: inherit;
    color: var(--c-brown);
    font-size: 0.85rem;
    line-height: 140%;
}


/* / / / / / / / / / / / / C O N T A C T */


.contact {
    display: flex;
    background-color: var(--c-beige);
}

.contact div {
    width: 50%;
}

.contact li a {
    border-radius: 7px;
    padding: 7px 15px;
    background-color: white;
    line-height: 150%;
    text-decoration: none;
    color: var(--c--dark);
    font-weight: 700;
    display: inline-block;
    margin-bottom: 10px;
    cursor: pointer !important;
    transition: all linear 300ms;
}

.contact li a:hover {
    cursor: pointer;
    background-color: var(--c-brown);
}

.rs a {
    text-decoration: none;
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--c--dark);
    margin-bottom: 30px;
    padding: 5px 0;
    width: 150px;
    background-image: url(media/rs.svg);
    background-size: contain;
    background-position-x: right;
    background-repeat: no-repeat;
    transition: all linear 200ms;
    cursor: pointer;
}

.rs a:hover {
    color: var(--c-violet);
    width: 152px;

}

.rs img {
    width: 50%;
    margin: 20px 0;
}


/* / / / / / / / / / / / / F O O T E R */

footer {
    background-color: white;
    display: flex;
    justify-content: space-between;
    border-radius: 15px 15px 0 0;
}

footer img {
    height: 100px;
    opacity: 0.5;
    }

footer ul {
    width: 50%;;
}

footer li a {
    text-decoration: none;
    color: var(--c-mauve);
}

.credit {
    padding: 10px 0;
    margin-bottom: 30px;
    background-color: var(--c-beige);
    font-size: 0.8rem;
    color: var(--c-medium);
    opacity: 0.7;
}
.credit a {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85em;
    display: inline-block;
    color: var(--c-medium);
}

.credit a:hover {
    text-decoration: underline;
}






@media only screen and (max-width: 1000px) {


    html {
        --in-space: 30px;
    }

    main {
        width: 100%;
    }

    h1 {font-size: 22px;}
    h2 {font-size: 20px;}
    
    .intro {
        width: 80%;
    }
    
    
    header {
        background-position: center center;
    }
    
    
    nav ul {

        gap: 10px;
        margin: 20px 0;
    }
    
    nav ul li a {
        letter-spacing: 0px;
    }
    
    nav img.logo {
        width: 60px;
    }


    .edito .presentation {
        margin-top: var(--in-space);
        flex-direction: column;
        gap: 0px;
        align-items: flex-start;
    
    }
    
    .edito .presentation p, p.process-intro {
        width: 100%;
    }
    
    .edito .eriksson {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    .edito .eriksson img.portrait {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid white;
        background-color: white;
    }

    .wines {
        background-image: none;
    }
    .wines .chateaux {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        margin: 20px auto 40px auto;
        opacity: 0.5;
        justify-content: center;
        width: 90%;
        
    }

    .wines .vin {
        column-gap: 10%;
        row-gap: 50px;
        flex-direction: column;
        width: 100%;
    }

    .wines .vin li {
        width: 90%;

    }

    .custom, .process-intro {
        width: 100%;
    }

    .process span {
        left: 95%;
        transform: translateX(-100%);
    }

    .process ul {
        flex-wrap: wrap;
        gap: 20px;
        height: 450px;
        align-content: flex-start;
    }

    .process ul li {
        padding: 20px;
        width: 47%;
        height: 180px;
        margin: 0;

    }
    
    
    
    .process h3 {
        font-size: 18px;
    }
    
    .process-intro {
        width: 50%;
        color: #EBDED5;
    }
    
    
    
    
    


    .contact {
        flex-direction: column;
        gap: 30px;
    }
    
    .contact div {
        width: 100%;
    }

    footer {
        flex-direction: column;
        gap: 30px;

    }

    footer ul {width: 100%;}

    .credit {padding: var(--in-space);}

}