@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; */
	}

/* soulignement animé au survol */
#menu li a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--clr-or);
	transition: width 0.25s ease, left 0.25s ease;
	}

#menu li a:hover::after {
	width: 40%;
	left: 30%;
	}

/* 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;
	}

/* =========================================================
   dropdown Rhône Nord / Rhône Sud — Option A (méga 2 colonnes)
   ========================================================= */

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

/* conteneur du méga-menu (div, pas ul : il englobe en-tête + liste + pied) */
#menu li.has-dropdown .menu-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid var(--clr-border, #C5C5C5);
	border-top: none;
	box-shadow: 0 8px 28px rgba(0,0,0,0.14);
	border-radius: 0 0 var(--radius-m) var(--radius-m);
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 420px;
	z-index: 1000;
	overflow: hidden;
	text-align: left;
	}

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

/* en-tête : nom de la région + compteur total de vins */
#menu .menu-dropdown--mega .mm-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 16px;
	background: var(--clr-bg-light, #F9F5EA);
	border-bottom: 1px solid var(--c-border-struct);
	font: normal normal 700 11px/1.4 Montserrat;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--clr-text-dark, #333);
	}
#menu .menu-dropdown--mega .mm-head-count { color: var(--clr-or-text); }

/* liste des appellations en grille 2 colonnes */
#menu .menu-dropdown--mega .mm-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	}
#menu .menu-dropdown--mega .mm-list li {
	flex-grow: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	text-align: left;
	text-transform: none;
	border-bottom: 1px solid #f5f5f5;
	border-left: 3px solid transparent;
	}
#menu .menu-dropdown--mega .mm-list li:nth-child(odd) { border-right: 1px solid #efefef; }

#menu .menu-dropdown--mega .mm-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 14px;
	color: var(--clr-text, #525252);
	font: normal normal 500 13.5px/1.3 Montserrat;
	transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
	}
/* annule le soulignement animé hérité du menu principal */
#menu .menu-dropdown--mega .mm-list li a::after { display: none; }

#menu .menu-dropdown--mega .mm-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
#menu .menu-dropdown--mega .mm-count {
	flex-shrink: 0;
	min-width: 34px;
	text-align: center;
	padding: 1px 7px;
	background: #eee;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	color: #888;
	}

#menu .menu-dropdown--mega .mm-list li a:hover {
	background: var(--clr-bg-light, #F9F5EA);
	color: var(--clr-text-dark, #333);
	padding-left: 17px;
	}

/* appellation courante (filtre actif) : liseré or + fond clair */
#menu .menu-dropdown--mega .mm-list li.current { background: color-mix(in srgb, var(--clr-or) 5%, #fff); border-left-color: var(--clr-or); }
#menu .menu-dropdown--mega .mm-list li.current a { color: var(--clr-or-text); font-weight: 700; }
#menu .menu-dropdown--mega .mm-list li.current .mm-count { background: color-mix(in srgb, var(--clr-or) 10%, #fff); color: var(--clr-or-text); }

/* pied : lien "voir tous les vins de la région" */
#menu .menu-dropdown--mega .mm-foot {
	padding: 10px 16px;
	background: var(--clr-bg-grey, #EEEEEE);
	text-align: center;
	}
#menu .menu-dropdown--mega .mm-foot a {
	font: normal normal 700 12.5px/1.3 Montserrat;
	color: var(--clr-or-text);
	text-transform: none;
	}
#menu .menu-dropdown--mega .mm-foot a::after { display: 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 » (Option B) — entrée parente regroupant
   collections + Rhône Nord + Rhône Sud. Réutilise les classes .mm-*.
   =================================================================== */
#menu li.has-mega-cave .menu-dropdown--cave {
	left: 0;
	transform: none;          /* aligné à gauche sous l'entrée, pas centré */
	min-width: 780px;
	padding: 0;
	}
/* affiché UNIQUEMENT au survol ; même spécificité que la règle générique
   #menu li.has-dropdown:hover .menu-dropdown {display:block} mais placée
   après → flex gagne par ordre source et bat le block (sinon colonnes
   empilées à la verticale). Au repos : display:none hérité (l.85). */
#menu li.has-mega-cave:hover .menu-dropdown--cave {
	display: flex;
	}

/* 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 — sinon les deux panneaux
   s'affichent en même temps et se chevauchent. Fermer la recherche (Échap, clic
   dehors, champ vidé) réactive le survol. Même schéma que .cc-menu-dismiss (R12) ;
   la classe sur <body> ajoute une classe → l'emporte en spécificité sur les deux
   règles :hover, quel que soit l'ordre source. */
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) — complément du fix #3 (10411656). Pendant
   l'autocomplétion, le panneau .cc-ac-panel s'aligne sur la barre de recherche
   (~170→1149px) mais la barre de menu est pleine largeur : l'entrée la plus à
   droite (« blog ») dépassait à DROITE du panneau et restait visible à côté de
   lui, donnant l'impression d'un chevauchement (capture Thomas image12). On
   neutralise les liens du menu tant que la recherche est ouverte ; le panneau
   garde le dessus, la bande #menu reste (quasi-blanche) sans texte qui dépasse.
   visibility (pas display) → aucun reflow. Le dropdown reste géré par la règle
   ci-dessus. */
body.cc-ac-open #menu li a {
	visibility: hidden;
	}

/* colonnes : largeur fixe, séparateur fin */
#menu .menu-dropdown--cave .mega-col { width: 252px; }
#menu .menu-dropdown--cave .mega-col--region {
	display: flex;
	flex-direction: column;
	border-left: 1px solid #efefef;
	}

/* dans le contexte mega, la liste appellations passe en 1 colonne */
#menu .menu-dropdown--cave .mm-list { grid-template-columns: 1fr; }
#menu .menu-dropdown--cave .mm-list li:nth-child(odd) { border-right: none; }

/* #7 (retour Thomas 20260715) — garde-fou débordement. Aujourd'hui chaque région
   tient à l'écran (Nord ~12, Sud ~13 appellations), mais le panneau n'avait NI plafond
   de hauteur NI défilement : si une région venait à compter assez d'appellations pour
   dépasser la hauteur de l'écran, les dernières lignes ET le pied « Voir tous les vins »
   passeraient sous le pli, hors d'atteinte (panneau ouvert au survol, overflow:hidden).
   On plafonne la LISTE et on la fait défiler à l'intérieur ; en-tête (.mm-head) et pied
   (.mm-foot), frères dans la colonne flex, restent toujours visibles. */
#menu .menu-dropdown--cave .mega-col--region .mm-list { max-height: 60vh; overflow-y: auto; }

/* Les colonnes région s'étirent à la hauteur de la plus haute (flex container).
   Quand deux régions n'ont pas le même nombre d'appellations (ex. Rhône Nord 12
   vs Rhône Sud 10), on pousse le pied « Voir tous les vins » en bas de chaque
   colonne pour que les deux liens restent alignés. */
#menu .menu-dropdown--cave .mega-col--region .mm-foot { margin-top: auto; }

/* colonne « collections » (rail gauche crème) */
#menu .menu-dropdown--cave .mega-col--collections {
	background: linear-gradient(180deg, #fcf9f1, #f7f1e3);
	border-right: 1px solid #ece3cc;
	padding: 6px 0 10px;
	}
#menu .menu-dropdown--cave .mc-head {
	font: 700 11px/1.4 'Montserrat', Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--clr-text-dark, #333);
	padding: 14px 18px 8px;
	}
#menu .menu-dropdown--cave .mc-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px;
	border-left: 3px solid transparent;
	transition: background .12s ease, border-color .12s ease, padding-left .12s ease;
	}
#menu .menu-dropdown--cave .mc-link::after { display: none; } /* annule soulignement hérité */
#menu .menu-dropdown--cave .mc-link:hover {
	background: #fff;
	border-left-color: var(--clr-or);
	padding-left: 21px;
	}
#menu .menu-dropdown--cave .mc-ico {
	width: 30px; height: 30px; flex-shrink: 0;
	border-radius: var(--radius-s);
	background: #fff;
	border: 1px solid #ece3cc;
	display: flex; align-items: center; justify-content: center;
	}
/* pt5b (retour Thomas 28/07) — « les pictos du dropdown ne sont pas ceux du
   catalogue ». Les GLYPHES sont pourtant identiques (mêmes noms cc_icon, mêmes
   tracés que scripts/filtres.js SPECIAL_ICONS) : c'est la COULEUR qui divergeait.
   Le contrat de cc_icon() (inc/icones.inc.php l.12-18) veut l'encre en
   stroke:currentColor et l'accent or #b88a3e « cuit » en attribut de présentation
   sur le tracé. Un `stroke: var(--clr-or)` posé ici gagnait sur l'héritage de
   .cc-i → tous les tracés d'ENCRE repeints en or (les accents survivaient, étant
   portés par un attribut de l'élément), soit un picto monochrome or dans le
   dropdown contre bicolore encre+or sur le catalogue. Même diagnostic et même
   correctif que .tb-ico (site.css, « ---- Bandeau de confiance ---- »).
   → on ne redéclare plus le stroke : .cc-i (site.css) reprend la main. */
#menu .menu-dropdown--cave .mc-ico svg {
	width: 17px; height: 17px;
	fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
	}
#menu .menu-dropdown--cave .mc-tx { display: flex; flex-direction: column; line-height: 1.2; }
#menu .menu-dropdown--cave .mc-t {
	font: 600 13.5px/1.2 'Montserrat', Arial, sans-serif;
	color: var(--clr-text-dark, #333);
	}
#menu .menu-dropdown--cave .mc-s { font-size: 11.5px; color: #8a8a8a; }
/* pt5a (arbitrage Thomas 28/07) — le médaillon de « Tous les vins » était le seul
   sur fond encre, les quatre autres sur fond crème. Ce n'était PAS un marqueur
   d'état : la classe .mc-link--primary est écrite en dur dans
   inc/templates/menu.inc.php (l.69), sans condition — le seul marqueur de page
   courante de ce menu est li.current / li.selected. Décision : aligner le picto
   sur les autres (les deux règles de médaillon sont retirées). Le libellé, lui,
   garde son or : la hiérarchie « accès au catalogue complet » reste lisible sans
   rompre l'unité des pictos. La classe reste posée côté PHP (point d'accroche). */
#menu .menu-dropdown--cave .mc-link--primary .mc-t { color: var(--clr-or-text); }

/* coup de cœur du caviste (carte signature) — activable back-office via
   menu_feature_enabled + menu_feature_wine_id. Repris du mockup-menu-la-cave. */
#menu .menu-dropdown--cave .mc-sep {
	height: 1px;
	background: #ece3cc;
	margin: 8px 18px;
	}
#menu .menu-dropdown--cave .mc-feat {
	display: block;
	margin: 8px 14px 10px;
	border-radius: var(--radius-m);
	overflow: hidden;
	border: 1px solid #ece3cc;
	background: #fff;
	transition: border-color .12s ease, box-shadow .12s ease;
	}
#menu .menu-dropdown--cave .mc-feat::after { display: none; } /* annule soulignement hérité */
#menu .menu-dropdown--cave .mc-feat:hover {
	border-color: var(--clr-or);
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	}
#menu .menu-dropdown--cave .mc-feat .ph {
	display: block;
	height: 74px;
	background: linear-gradient(150deg, #1a0f08, #5a3417 55%, #b07b3c);
	position: relative;
	}
#menu .menu-dropdown--cave .mc-feat .ribbon {
	position: absolute;
	left: 10px; top: 10px;
	background: var(--clr-ink);
	color: #fff;
	font: 700 9px/1.4 'Montserrat', Arial, sans-serif;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--radius-s);
	}
#menu .menu-dropdown--cave .mc-feat .bd { display: block; padding: 9px 11px 11px; }
#menu .menu-dropdown--cave .mc-feat .script {
	display: block;
	font: 700 16px/1 'Montserrat', cursive;
	color: var(--clr-or-text);
	}
#menu .menu-dropdown--cave .mc-feat .nm {
	display: block;
	font: 600 12.5px/1.2 'Montserrat', Arial, sans-serif;
	color: var(--clr-text-dark, #333);
	margin-top: 3px;
	}
#menu .menu-dropdown--cave .mc-feat .pr {
	display: block;
	font: 700 13px/1.2 'Montserrat', Arial, sans-serif;
	color: var(--clr-or-text);
	margin-top: 4px;
	}