@charset "utf-8";

/*******************/
/* menu horizontal */
/*******************/

#menu {
	max-width: 1920px;
	width: 100%;
	margin-top:80px;
	background: #EEEEEE;
	margin-left:auto;
	margin-right: auto;
	}

#menu ul {
	width: 95%;	
	list-style: none;	
	margin-left:auto;
	margin-right:auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 15px;
	padding-bottom: 15px;
	display: flex;
	}

#menu li {
	flex-grow: 1;
	text-align: center;
	font: normal normal 500 20px/25px Montserrat;
	letter-spacing: 0px;
	color: #525252;
	text-transform: uppercase;
}

#menu li a {
	display: block;
	color: #333;
	width: auto;
	line-height: 29px;
	position: relative;
	transition: color 0.2s ease;
	/* font-weight: bold; */
	}

/* Survol du 1er niveau : variante D (Thomas 05/10) dans site.css, fond encre + trait or
   1 px sous le MOT. L'ancien trait or animé sous la case (::after, 40 % de la case) est retiré. */

/* hover : or atténué, sans gras (pour distinguer de l'état actif) */
#menu li a:hover {
	color: var(--clr-or-text);
	}

/* page active : or + gras */
#menu li.selected a {
	color: var(--clr-or-text);
	font-weight: 700;
	}

/* =========================================================
   Menus déroulants de la barre (seul « La cave » en a un)
   ========================================================= */

#menu li.has-dropdown {
	position: relative;
	}

/* conteneur : masqué au repos, ouvert au survol de l'entrée */
#menu li.has-dropdown .menu-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	z-index: 1000;
	text-align: left;
	}

#menu li.has-dropdown:hover .menu-dropdown {
	display: block;
	}

/* Aucun lien du menu ne prend le trait des liens texte PAR L'ANCRE : le plancher
   :where(a:not([class])):hover (site.css, spec 2026-09-29) soulignait les entrées du haut.
   Les liens du panneau « La cave » portent leur trait sur le SPAN (.mega-lib, règle groupée
   de site.css, spec 2026-10-13) : cette remise à zéro de l'ancre ne les empêche pas. */
#menu a { text-decoration: none; }

#menu_mobile {
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto; 
	height: 50px;
	padding:0;
	background: #EEE;
	font: normal normal 500 18px/25px Montserrat
}

#menu_mobile ul {
	background: #EEE;
	padding: 0;
	height: 50px;
	margin-left:auto;
	margin-right: auto;
	margin-top:0;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	list-style: none;
}



#menu_mobile li {
	flex-grow: 1;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
	/* font-size: 14px; */
	text-transform: uppercase;
}

/***********************/
/* menu colonne droite */
/***********************/

#menu-droite {
	max-width: 360px;
	margin-left: 0%;
	margin-right: 5%;
}

/***********************/
/* menu colonne gauche */
/***********************/

#menu-gauche {
	max-width: 360px;
	margin-left: 25%;
	margin-right: 10%;
}

#menugauchecatalog, #menugaucherecherche, #menugauchenewsletter, #menugauchefaq {
	position:relative;
	margin-top: 70px;
}

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

	#menugauchecatalog {
		position: relative;
		margin-top: 50px;
	}

	#menugaucherecherche, #menugauchenewsletter, #menugauchefaq {
		position: relative;
		margin-top: 30px;
	}

}


#menu-gauche 
img.menugauchepicto {
	position:absolute;
	top: 0px;
	right: 0px;
	width: 35px;
	display: none;
}
#col-gauche .h2 {
	font: normal normal normal 60px/77px Montserrat;
	letter-spacing: 0px;
	color: #525252;
	opacity: 1;
	padding: 0;
	line-height: 32px;
	margin-top: 40px; 
	margin-bottom: 40px; 
	}

#col-gauche img {
	vertical-align: middle;
	}

#col-gauche ul {
	font: normal normal 600 22px/30px Montserrat;
	letter-spacing: 0px;
	color: #525252;
	opacity: 1;
	list-style-type: none;
	text-align: left;
	padding: 0;
	margin-top: 0;
	}

	
/* jusqu'à 1680px */
@media only screen and (max-width: 1680px) {
	#menu-gauche {
		margin-left: 20%;
	}		
	#col-gauche ul {
		font: normal normal 600 19px/30px Montserrat;
	}

	#col-gauche .h2 {
		font: normal normal normal 50px/50px Montserrat;
	}

	#col-centre h2.liste-vins {
		font: normal normal normal 50px/50px Montserrat;
	}

}


/* jusqu'à 1280px */
@media only screen and (max-width: 1280px) {
	#menu-gauche {
		margin-left: 15%;
	}		
	#col-gauche ul {
		font: normal normal 600 16px/30px Montserrat;
	}

	#col-gauche .h2 {
		font: normal normal normal 50px/50px Montserrat;
	}

	#col-centre h2.liste-vins {
		font: normal normal normal 50px/50px Montserrat;
	}

}


#col-gauche ul li a {
	color: #525252;
	display: inline-block;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

/* hover menu gauche : or atténué + léger décalage */
#col-gauche ul li a:hover {
	color: var(--clr-or-text);
	padding-left: 4px;
}

/* rubrique active : or + gras (état persistant) */
#col-gauche ul li.selected > a,
#col-gauche div.selected > a {
	color: var(--clr-or-text);
	font-weight: 700;
}

#col-gauche div.selected .h2 {
	color: var(--clr-or-text);
	font-weight: 700;
}

body#page-inscription-newsletter #menugauchenewsletter .h2,
body#page-recherche-vins #menugaucherecherche .h2,
body#page-faq #menugauchefaq .h2 {
	color: var(--clr-or-text);
	font-weight: 700;
}

#col-gauche p {
	padding-left: 10px;
	font-size: 14px;
}
	

li.menugauchelissrub {
	margin-left: 8px;
	white-space: nowrap;
}

/* ===================================================================
   MÉGA-MENU « La cave », variante C (spec 2026-10-13, Thomas 13/10).
   Bandeau pleine largeur sous la barre : le panneau se positionne par
   rapport à #menu (et non plus à l'entrée), son contenu se cale sur la
   géométrie de .container. Vocabulaire des liens texte : sur-titres dorés,
   filets fins, aucun picto, aucun compteur par appellation, aucun fond au
   survol (le trait 1 px est posé par la règle groupée de site.css).
   =================================================================== */
#menu { position: relative; }
#menu li.has-mega-cave { position: static; }
#menu li.has-mega-cave .menu-dropdown--cave {
	left: 0;
	right: 0;
	/* #menu li (menus.css, en tête) met l'entrée en capitales : le panneau, son enfant, en
	   héritait (« VOIR TOUS LES VINS DE… », recette locale du 13/10). Seuls les sur-titres
	   .mega-kick sont en capitales, par leur propre règle. */
	text-transform: none;
	letter-spacing: 0;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	box-shadow: 0 14px 20px -12px rgba(0,0,0,.12);
	}
#menu li.has-mega-cave:hover .menu-dropdown--cave {
	display: block;
	}

/* R12 — après une greffe pjax (navigation catalogue sans rechargement), le
   curseur reste sur le menu et le :hover laisserait le dropdown OUVERT. JS pose
   #menu.cc-menu-dismiss (catalogue-nav.js) pour le forcer fermé jusqu'à ce que le
   pointeur quitte la barre. La classe en plus l'emporte en spécificité sur les
   deux règles :hover ci-dessus, quel que soit l'ordre source. */
#menu.cc-menu-dismiss li.has-dropdown:hover .menu-dropdown,
#menu.cc-menu-dismiss li.has-mega-cave:hover .menu-dropdown--cave {
	display: none;
	}

/* #3 (retour Thomas 21/06) — recherche prioritaire : tant que le panneau
   d'autocomplétion est déroulé (body.cc-ac-open, posé par js/v4/autocompletion.js),
   les méga-menus de la nav ne s'ouvrent pas au survol. Même schéma que R12. */
body.cc-ac-open #menu li.has-dropdown:hover .menu-dropdown,
body.cc-ac-open #menu li.has-mega-cave:hover .menu-dropdown--cave {
	display: none;
	}

/* #10/#11 (retour Thomas 22/06) — pendant l'autocomplétion, les liens du menu sont
   neutralisés (visibility, aucun reflow) : l'entrée « blog » dépassait à droite du panneau. */
body.cc-ac-open #menu li a {
	visibility: hidden;
	}

#menu .mega-cadre {
	display: flex;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 26px 24px 24px;
	box-sizing: border-box;
	}
#menu .mega-col { display: flex; flex-direction: column; min-width: 0; padding: 0 22px; }
#menu .mega-col:first-child { padding-left: 0; }
#menu .mega-col:last-child { padding-right: 0; }
#menu .mega-col + .mega-col { border-left: 1px solid var(--c-line); }
#menu .mega-col--collections { flex: none; }
#menu .mega-col--region { flex: 1; }

#menu .mega-kick {
	display: block;
	margin: 0 0 12px;
	font: 700 11px/1.2 var(--ff-body);
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: var(--clr-or-text);
	white-space: nowrap;
	}
#menu .mega-nb { margin-left: 6px; color: #8a8a8a; font-weight: 600; letter-spacing: 1px; }

/* Remise à zéro des règles du 1er niveau qui retombent sur les listes du panneau :
   #menu ul (flex, 95 %, padding 15 px), #menu li (20 px, capitales, centré). */
#menu .menu-dropdown--cave ul { display: block; width: auto; margin: 0; padding: 0; list-style: none; }
#menu .menu-dropdown--cave li { flex-grow: 0; margin: 0; padding: 0; min-width: 0; text-align: left; text-transform: none; letter-spacing: 0; font: inherit; color: inherit; }

/* 🔑 Spécificité : #menu li.selected a (1,1,2) dore et graisse TOUS les liens descendants
   sur les pages catalogue, et #menu li a:hover (1,1,2) les dore au survol. Les sélecteurs
   ci-dessous (1,2,2) gagnent sans !important : couleur et graisse restent fixes. */
#menu .menu-dropdown--cave .mega-liens li a {
	display: block;
	padding: 6px 0;
	font: 600 15px/1.35 var(--ff-body);
	color: var(--clr-text-dark);
	white-space: nowrap;
	}
#menu .menu-dropdown--cave .mega-liens li.mega-premier a { color: var(--clr-or-text); }   /* arbitrage 21/08 : un seul libellé doré */
#menu .mega-app { columns: 2; column-gap: 20px; }
#menu .mega-app li { break-inside: avoid; }
#menu .menu-dropdown--cave .mega-app li a {
	display: block;
	padding: 5px 0;
	font: 500 14px/1.35 var(--ff-body);
	color: var(--clr-text-dark);
	}
#menu .menu-dropdown--cave .mega-app li.current a { color: var(--clr-or-text); font-weight: 700; }   /* l'or dit l'état */
#menu .mega-pied { margin-top: auto; padding-top: 14px; }
#menu .menu-dropdown--cave .mega-pied a { display: inline; font: 600 13px/1.3 var(--ff-body); color: var(--clr-text-dark); }
/* Décalage du trait posé AU REPOS, jamais au survol (spec 2026-09-29 §9). */
#menu .mega-lib { text-underline-offset: var(--lien-trait-survol-offset); }