/*Polices et icônes*/
@font-face {
    font-family: 'alexBrush-Regular';
    src: url('../polices/alex-brush/AlexBrush-Regular.ttf');
}

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');

/*Corps de la page*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
}

/*Fond de page*/
body{
    background-image: url('../images/texture3.jpg');
    background-attachment:scroll;
}

/*Entête*/
#titre{
    margin-top: 10px;
    display: flex;
    height: 100px;
    justify-content: space-between;
    background-color: white;
    border: solid 1px black;
}

header img{
    width: 170px;
    height: 99px;
    border-right: solid 1px black;
    border-bottom: solid 1px black;;
}

header h1{
    position: relative;
    top: 8px;
    right: 10px;
    color: #5e0c0c;
    font-family: 'alexBrush-Regular';
    font-size: 4em;
    align-self: center;
}

        /*Tablette Portrait*/
        @media only screen and (min-width: 600px){
            header h1{
                right: 20%;
            }
        }

        /*Tablette Paysage*/
        @media  only screen and (min-width: 768px){
                header h1{
                    right: 25%;
                }
        }

        /*Ecran normal*/
        @media  only screen and (min-width: 1024px){
                header h1{
                    right: 35%;
                }
        }

/*Bandeau de page*/
#bandeauPage{
    position: relative;
    height: 230px;
    top: 8px;
}

#bandeauPage img{
    position: absolute;
    width: 100%;
    height: 250px;
    border: solid black 1px;
}

#bandeauPage h2{
    position: absolute;
    left: 38%;
    bottom: 40%;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 2px black;
    font-size: 2.3em;
    font-family:'Times New Roman', Times, serif;
}

        /*Tablette Portrait*/
        @media only screen and (min-width: 600px){
            #bandeauPage{
                height: 350px;
            }

            #bandeauPage img{
                height: 350px;
            }

            #bandeauPage h2{
                left: 38%;
                bottom: 42%;
                font-size: 3em;
            }
        }

        /*Ecran normal*/
        @media  only screen and (min-width: 1024px){
            #bandeauPage{
                height: 490px;
            }

            #bandeauPage img{
                height: 490px;
            }

            #bandeauPage h2{
                bottom: 42%;
                left: 39%;
                font-size: 4.5em;
            }

            #imageBandeau img{
                width: 88%;
                left: 6%;
            }
        }   

/*Menu*/
nav{
    margin-top: 35px;
    margin-left: 5px;
    margin-right: 5px;
}

nav ul{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    list-style-type: none;
    background-color: white;
    padding: 3px;
    border:solid black;
    border-radius: 25%;
}

nav ul li a{
    color: #5e0c0c;
    font-family: 'alexBrush-Regular';
    font-size:3em;
    text-decoration: none;
    font-weight: bold;
    align-items: center;
    margin-left: 13%;
}

nav ul li a:hover{
    text-decoration: underline;
}

        /*Tablette Portrait*/
        @media  only screen and (min-width: 600px){
            nav ul{
                margin-bottom: 15px;
            }
        }

        /*Tablette Paysage*/
        @media  only screen and (min-width: 768px){
            nav ul{
                grid-template-columns: 0.8fr 1.4fr 1fr 0.8fr;
            }
        }

/*Accueil*/
    /*Image de la page d'accueil*/
    #entrée img{
        width: 100%;
    }

    /*Texte de la page d'accueil*/
    #entrée p{
        font-size: 1.6em;
        text-shadow: 1px 1px 1px white;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
    }

        /*Tablette Paysage*/
        @media  only screen and (min-width: 768px){
            #entrée img{
                width: 70%;
                display: block;
                margin: 20px auto 20px auto;
            }
        }

/*Domaine*/  
    /*Bandeaux*/
    .bandeauDomaine{
        position: relative;
        height: 230px;
        margin-top: 5px;
    }
    /*Images*/
    .bandeauDomaine img{
        position: absolute;
        width: 100%;
        height: 240px;
    }

    /*Titres*/
    .bandeauDomaine h2{
        position: absolute;
        right: 20px;
        top: 70px;
        color: rgba(255, 255, 255, 0.771);
        text-shadow: 2px 2px 2px black;
        font-size: 2em;
        font-family:'Times New Roman', Times, serif;
    }

    /*Paragraphe*/
    #domaine p{
        position: static;
        font-size: 1.4em;
        color:black;
        text-shadow: 1px 1px 1px white;
        background-color: rgba(255, 255, 255, 0.273);
        margin-top: 30px;
        margin-bottom: 20px;
    }

        /*Tablette Portrait*/
        @media only screen and (min-width: 600px){
            .bandeauDomaine{
                height: 300px;
            }

            .bandeauDomaine img{
                height: 310px;
            }
        }

        /*Tablette Paysage*/
        @media only screen and (min-width: 768px){
            .bandeauDomaine{
                height: 390px;
            }

            .bandeauDomaine img{
                height: 400px;
            }

            .bandeauDomaine h2{
                font-size: 3em;
            }
        }

        /*Ecran normal*/
        @media only screen and (min-width: 1024px){
            .bandeauDomaine{
                height: 450px;
                width: 80%;
                display: block;
                margin: 15px auto 25px auto;
            }

            .bandeauDomaine img{
                height: 460px;
            }

            #domaine p{
                margin-left: 10%;
                margin-right: 10%;
            }
        }

/*Vins*/
    /*Image bouteille*/
    .flexVin{
        margin-top: 15px;
        margin-bottom: 50px;
    }

    .photoBouteille img{
        text-align: left;
        width: 100%;
        border: solid 2px black;
        border-radius: 5%;
        background-color: rgba(255, 255, 255, 0.724);
    }

    .descriptionBouteille{
        text-align: center;
        background-color: rgba(255, 255, 255, 0.724);
        border: thick double black;
        border-radius: 5%;
        font-size: 1.5em;
        color: #5e0c0c;
        font-family: 'Amatic SC', cursive;
        font-weight: 700;
        margin-top: 15px;
    }

        /*Tablette Paysage*/
        @media only screen and (min-width: 768px){
            .flexVin{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }

            .photoBouteille{
                width: 40%;
            }  
            
            .descriptionBouteille{
                width: 45%;
                height: 250px;
                align-self: center;
            }

            .descriptionBouteille p{
                margin-top: 20px;
            }
        }

        /*Ecran normal*/
        @media only screen and (min-width: 1024px){
            .descriptionBouteille p{
                margin-top: 40px;
            }
        }

/*Contact*/
    /*Image*/
    #contact img{
        width: 100%; 
    }

    /*Article*/
    #contact article{
        background-color: rgba(255, 255, 255, 0.273);
        margin-top: 20px;
    }

    /*Titre Article*/
    #contact{
        width: 80%;
        margin-left: 10%; 
    }

    #contact h2{
        text-align: center;
        text-shadow: 1px 1px 1px white;
    }
    /*Listes*/
    #contact li img{
        height: 22px;
        width: 22px;
    }

    #contact li{
        list-style: none;
        font-size: 1.2em; 
        text-shadow: 1px 1px 1px white;
    }
        /*Tablette Portrait*/
        @media only screen and (min-width: 600px){
            #contact{
                margin-bottom: 20px;
            }
        }    

        /*Ecran normal*/
        @media only screen and (min-width: 1024px){
            #contact li{
                text-align: center;
                margin: 5px 0 5px 0;
            }
        }

/*Footer*/
footer{
    height: 50px;
}