/* Bouton "Connexion" 

.connexion {

    position: fixed; /* Fixe le bouton à un emplacement précis

    bottom: 20px; /* Distance du bas de la page 

    right: 20px; /* Distance de la droite de la page 

    background-color: #500614;

    text-decoration: none;

    font-size: 16px;

    padding: 5px 10px;

    border: 1px solid white;

    border-radius: 5px;

    transition: all 0.3s ease-in-out;

}



.connexion:hover {

    background-color: white;

    color: rgb(70, 5, 17);

}*/



.nav{

    /*Permet de garder mon header en haut*/

    position: sticky;

    top: 99px;

    width: 100%;

    z-index: 10000;

    /*           */

    display: flex;

    flex: 1;

    justify-content: center;

    text-align: center;

    background-color: rgb(73, 7, 19);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

    padding: 2%;

}



.nav ul{

    display: flex;

    flex-direction: row;

    list-style: none;

    text-decoration: none;

    justify-content: center;

}



.nav ul li a{

    text-decoration: none;

    font-size: 24px;

    padding: 5px 10px;

    position: relative;

    transition: all 0.4s ease-in-out;

} 



.nav ul li a:hover{

    font-size: 28px;

    font-weight: bold;

}



.nb{

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    padding: 3%;

    background-color: #500614;

    width: 100%;

    height: auto;

    background-color: rgb(63, 5, 16);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

    position: relative;



    p{

        font-size: 28px;

        margin-left: auto;

        margin-right: auto;

        text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);

    }



    .stocke{

        font-size: 18px;

    }

}



.divvin {

    width: 100%;

    padding: 50px 0;

    background-color: #6D071A;

    text-align: center;

}





.divvin h1 {

    font-size: 36px;

    margin-bottom: 40px;

    color: white;

}



/* Grille des vins */

.grid-vin {

    display: flex;

    flex-wrap: wrap;

    justify-content: center; /* Centre les éléments */

    gap: 30px;

    padding: 0 5%;

}



/* Styles des éléments de vin */

.grid-vin .vin {

    flex: 1 1 calc(33.33% - 30px); /* Taille normale sur desktop */

    max-width: 550px; /* Fixe une largeur maximale */

}



/* Si une seule image */

.grid-vin:has(.vin:nth-child(1):nth-last-child(1)) {

    justify-content: center !important;

}



/* Si deux images */

.grid-vin:has(.vin:nth-child(1):nth-last-child(2)) {

    justify-content: center !important;

}



/* Chaque vin */

.vin {

    background-color: rgba(0, 0, 0, 0.3);

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

    text-align: center;

    transition: transform 0.3s ease-in-out;

}



.vin:hover {

    transform: translateY(-5px);

}



/* Images réelles */

.vin img {

    width: 100%;

    height: auto;

    border-radius: 5px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

}



/* Titre du vin */

.vin h2 {

    font-size: 22px;

    margin: 15px 0 5px;

    color: white;

}



/* Description du vin */

.vin p {

    font-size: 16px;

    color: #ddd;

}



@media (max-width: 800px) {



    .nb{

        text-align: center;



        p{

            font-size: 20px;

        }



        .stocke{

            font-size: 15px;

        }

    }



    .nav{

        top: 65px;

    }



    .nav ul {

        flex-direction: column;

        gap: 5px; /* Espace entre les liens */

    }



    .nav ul li a{

        font-size: 15px ;

    }



    .nav ul li a:hover{

        font-size: 18px;

        font-weight: bold;

    }



    .BIB{

        height: 55px;

    }

    .divvin{



        h1{

            font-size: 35px;

        }

    }



    .grid-vin {

        grid-template-columns: 1fr;

    }



    .grid-vin .vin {

        flex: 1 1 100%;

        max-width: 100%;

    }



    .vin {

        padding: 15px;

    }



    .vin h2 {

        font-size: 20px;

    }



    .vin p {

        font-size: 16px;

    }

}