/* Réinitialisation des marges et des rembourrages pour le corps du document */
body {
    margin: 0;
    padding: 0;
    font-size: 24px;
}


/* Styles pour l'en-tête */
header {
    width: 100%;
    height: 80px;
    position: fixed; /* Pour rester fixe en haut de la page */
    top: 0;
    background-color: #464648; /* Couleur de fond de l'en-tête */
    display: flex;
    align-items: center; /* Aligner les éléments verticalement au centre */
    justify-content: space-between; /* Espace uniformément les éléments à l'intérieur */
    border-bottom:solid 1px #992E33;
}

/* Style du logo */
.logo {
    width: 78px;
    height: 78px;
    float: left; /* Pour flotter à gauche */
    margin-right: 20px; /* Marge pour séparer le logo du menu principal */
    margin-top: -2px;
}

/* Style du menu principal */
.menu-principal {
    position: absolute;
    top: 25px; /* Déplace le menu à 40px du haut du logo */
    left: 160px; /* Déplace le menu à 40px de la gauche du logo */

}

.menu-principal ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-principal ul li {
    display: inline;
    margin-right: 20px;
    position: relative; /* Ajout de cette ligne */
}


.menu-principal a {
    text-decoration: none;
    color: white;
}
.menu-principal a:hover {
    color: #992E33;
}

/* Style de l'icône de menu */
#menu-icon {
    font-size: 24px; /* Ajustez la taille de l'icône selon vos besoins */
    color: white;
    cursor: pointer;
}
/* Style du menu mobile */
.menu-mobile {
    display: none; /* Masquer le menu mobile par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(70, 70, 70, 0.95); /* Fond semi-transparent pour le menu mobile */
    z-index: 1000; /* Assurez-vous que le menu mobile s'affiche au-dessus du contenu */
}
.menu-mobile a:hover {
    color: #992E33;
}
.menu-mobile ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center; /* Centrez le texte du menu mobile */
    padding-top: 20%; /* Ajustez la position verticale du menu mobile */
}

.menu-mobile ul li {
    margin: 20px;
}

.menu-mobile a {
    text-decoration: none;
    color: white;
    font-size: 24px; /* Ajustez la taille de la police du menu mobile */
}
/* Style du sous-menu */
.sous-menu {
    display: none; /* Cacher initialement tous les sous-menus */
    position: absolute; /* Position absolue pour les sous-menus */
    top: 100%; /* Placer les sous-menus sous les éléments du menu principal */
    left: 0;
    background-color: #464648; /* Couleur de fond des sous-menus */
    width: 260px; /* Largeur du sous-menu */
    padding: 40px 0;
	font-size: 22px;
}

.sous-menu ul {
    list-style-type: none; /* Supprime les puces de la liste */
    padding: 0;
    margin: 0;
}

.sous-menu ul li {
    display: block; /* Afficher les éléments de la liste en bloc (un sous l'autre) */
    margin-bottom: 10px; /* Espacement entre les éléments du sous-menu */
}

.sous-menu a {
    text-decoration: none; /* Supprimer les soulignements des liens */
    color: white; /* Couleur du texte du sous-menu */
}
/* Style du logo de type menu pour les écrans de smartphone */
.menu-logo {
    display: none; /* Masquer le logo de type menu par défaut */
}
/* Style du logo et des sous-menus pour le menu mobile */
.menu-mobile {
    /* ... Autres styles du menu mobile ... */
    background-color: #464648;
    padding-top: 0px; /* Ajustez la marge en haut pour séparer le logo du menu */
}

.logo img {
    width: 100px;
    height: 100px;
    margin-bottom: 20px; /* Ajustez la marge entre le logo et les éléments du menu */
}

.sous-menu {
    display: none;
    /* ... Autres styles des sous-menus ... */
}

.sous-menu.active {
    display: block;
}

.content{
    padding-top: 60px;
    background-color: transparent;
    background-image: url("Include/img/Base/Cover03.png"); /* Remplace le chemin par le chemin correct vers ton image */
    background-repeat: repeat-y; /* Répète l'image verticalement */
    background-size: 100%; /* Ajuste la taille de l'image pour couvrir la fenêtre */
}

.content section{
	padding-top: 100px;
    padding-bottom: 10px;
}
.content li{
	text-decoration: none;
	list-style: none;
}
/* Styles communs pour les sections */
.Titre_N{
	font-size: 28px;
}
.Titre_B{
	font-size: 28px;
	color: white;
}
.Accueil, .Claire{
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    text-decoration: none;
}
.Accueil{
	margin-top: 0px;
}

.Nos_vins{
    background-image: url("../../Images/Font/FDP_Vins.png");
    background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	   border:solid 1px #992E33;
    border-left: none;
    border-right: none;
}
.Nos_vins img{
	width: 50%;
	height: auto;
}
.Nos_vins a{
	text-decoration: none;
	list-style: none;
	color: black;
}
#td-G{
	padding: 10px;
	width: 55%;
	align-content: center;
	text-align: right;
}
#td-D{
	padding: 10px;
	width: 45%;
	text-align: left;
}


.pdf-container {
    width: 35%; /* La largeur désirée */
    height: 60vh; /* La hauteur désirée */
    margin: 0 auto; /* Centrer le conteneur horizontalement */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc; /* Optionnel, pour voir le conteneur */
}
embed {
    width: 580px; /* Ajuster l'embed à la largeur du conteneur */
    height: 770px; /* Ajuster l'embed à la hauteur du conteneur */
    border: none;
}



.Nos_vins_mobile{
    display: none !important;
}
.Foncer{
    background-color: #464648;
    border:solid 1px #992E33;
    border-left: none;
    border-right: none;
    color: white;
	align-content: center;
    text-align: center;
    width: 100%;
	height: auto;
    text-decoration: none;
}
.Foncer img{
	weight: 200px;
	height: 200px;
}
.Claire img{
	weight: 200px;
	height: 200px;
}
.Claire a{
	text-decoration: none;
	list-style: none;
	color: black;
}
.Contacts{
	padding-top: -40px;
	margin-bottom: 100px;
	padding-bottom: 100px;
	border:solid 1px #992E33;
    border-left: none;
    border-right: none;
}
.Contacts-Foncer{
	background-color: #464648;
	padding-top: -80px;
	margin-bottom: 120px;
	padding-bottom: 120px;
	color: white;
}
.Contacts_fon{
	padding-top: -80px;
	margin-bottom: 120px;
	padding-bottom: 120px;
	color: black;
    text-decoration: none;
}
.Contacts_T_F{
	padding-top: -40px;
	margin-bottom: 100px;
	padding-bottom: 100px;
	border:solid 1px #992E33;
    border-left: none;
    border-right: none;
    color: black;
}
.art{
	padding: 10px;
	width: 48%;
	float: left;
	align-content: center;
	text-align: center;
}
.art_text{
	padding: 10px;
	width: 48%;
	float: left;
	align-content: center;
	text-align: left;
    text-decoration: none !important;
}
.art_text_foncer{
	padding: 10px;
	width: 48%;
	float: left;
	align-content: center;
	text-align: left;
    color: black;
}
/*
.art_text_cont{
    text-align: left;
}*/


.gallery-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.gallery-row {
    width: 100%;
    margin: 0;
    padding: 5px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.gallery-image {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 5px;
    overflow: hidden;
}

.gallery-image-thumbnail {
    width: 311px;
    height: auto;
    display: block;
    position:inherit;
    cursor: pointer;
}

#image-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    z-index: 9999;
}

.image-overlay-inner {
    width: 90%;
    height: 90%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.image-overlay-controls {
    position: absolute;
    top: 20px;
    right: 20px;
}
.image-overlay-image{
    max-width: 100%;
    max-height: 100%;
}
.age {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    opacity: 0;
    z-index: -1;
    transition: all 0.5s ease;
}

#image-overlay.active {
    display: block;
}

#image-overlay.active .image-overlay-image {
    opacity: 2;
}

#PiedDePage {
    color: #FFFFFF;
    position: fixed;
    border:solid 1px #992E33;
    border-left: none;
    border-right: none;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #464648;
    height: 80px; /* Hauteur de la barre de pied de page */
    display: flex;
    align-items:flex-end;
    justify-content: center;
	font-size: 20px;
}
#PiedDePage img{
	width: 60px;
	height: auto;
}

.footer-content {
    display: flex;
    justify-content: center; /* Ajustement ici pour centrer horizontalement */
    align-items: center;
    width: 100%;
    padding: 0 20px;
}

.footer-content a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}





/* Média CSS pour les écrans de smartphone (max-width: 768px) */
@media (max-width: 768px) {
    /* Masquer le logo principal sur les écrans de smartphone */
    .logo {

    }

    /* Afficher le logo de type menu sur les écrans de smartphone */
    .menu-logo {
        display: block;
        width: 30px; /* Ajustez la taille du logo de type menu selon vos besoins */
        height: 30px;
        margin-left: 20px; /* Ajoutez une marge à gauche pour séparer le menu du logo de type menu */
    }

    .menu-mobile {
    /* ... autres styles ... */
    height: 90%; /* Ajustez la hauteur pour s'adapter au contenu */
        z-index: 1000;
}
    .menu-mobile ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
   
    overflow-y: auto; /* Ajoutez cette ligne */
}
    /* Masquer le menu principal sur les écrans de smartphone */
    .menu-principal {
        display: none;
    }

    /* Afficher le menu mobile sur les écrans de smartphone */
    .menu-mobile.active {
        display: block;
    }
    .sous-menu {
    display: none;
    position: absolute;
    top: 0; /* Placer les sous-menus au-dessus des éléments du menu principal */
    left: 0;
    background-color: #464648;
    width: 100%; /* Ajustez la largeur du sous-menu pour qu'elle soit égale à la largeur de l'écran */
}

  .menu-mobile .menu-principal-item .sous-menu {
        display: none;
        position: relative;
        top: 0;
        left: 0;
        background-color: #464648;
        width: 100%; /* Ajustez la largeur du sous-menu pour qu'elle soit égale à la largeur de l'écran */
        padding: 20px 0;
    }

    .menu-mobile .menu-principal-item:hover .sous-menu {
        display: block;
    }
    
    .content{
        display: contents;
        width: 100%;
    }
    
    .Nos_vins table{
        width: 100%;
        align-content: center;
    }
    .Nos_vins td{
        width: 49%;
        height: auto;
    }
    .Nos_vins img{
        display: none;
    }
    #td-G{
        width: 100%;
        height: auto;
        float: left;
        text-align: left;
    }
#td-D{
	width: 100%;
    height: auto;
    float: left;
    text-align: left;
}
    #td-D img{
        align-content: center;
        text-align: center;
    }
    
    .Nos_vins{
    display: none;
}
    .Nos_vins_mobile{
    display: block !important;
    background-image: url("../../Images/Font/FDP_Vins.png");
    background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
    border:solid 1px #992E33;
    border-left: none;
    border-right: none;
}
    .Nos_vins_mobile img{
	width: 90%;
	height: auto;
}
    .Nos_vins_mobile a{
	text-decoration: none;
	list-style: none;
	color: black;
}
    
	
	
	table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    th, td {
        padding: 8px;
    }
}
	
	
	
	
    .art{
	padding: 10px;
	width: 100%;
	float: center;
	align-content: center;
	text-align: center;
}
.art_text{
	padding: 10px;
	width: 100%;
	float: center;
	align-content: center;
	text-align: left;
}
    .art_text_fon{
	padding: 10px;
	width: 100%;
	float: center;
	align-content: center;
	text-align: left;
	color: black;
    text-decoration: none;
}
    .Contacts_T_F{
        border-bottom: none;
        padding-top: -50px;
        margin-bottom: -50px;
    }
    
    #PiedDePage {
        position: relative;
        height: auto;
    }
}