/*
 * CMG Header — habillage Héritage de l'entête
 * Updated: 2026-08-08 15:55 (Europe/Zurich)
 *
 * Chargé sur tout le site par cmg-header.php. Retouches en CSS pur, sans toucher
 * au thème gk-portfolio :
 *   1. Menu principal en Cormorant Garamond (assorti aux titres), 21px.
 *   2. Filet fin sous le menu, ton du design (#e3dccb).
 *   3. Sélecteur de langue WPGlobus épuré : sans drapeau, doré, en majuscules.
 *   4. Menu mobile (hamburger) rhabillé : bouton doré, panneau ivoire à filets.
 *
 * Cormorant Garamond est chargée par cmg-fonts.php. Couleurs issues du handoff
 * « Home Héritage » : or #a4884f, filet #e3dccb, ivoire #faf8f3.
 *
 * Note : la spec du handoff prévoyait le menu en Open Sans majuscule ; le menu
 * en serif est un choix client assumé. Pour revenir à la spec, retirer la règle
 * .nav-menu li a ci-dessous.
 */

/* ------------------------------------------------------------------- logo
   Dimensionnement du logo, rapatrié depuis « Apparence > CSS additionnel » pour
   sortir cette règle de la base et la mettre en fichier. Une fois ce fichier
   déployé, le bloc « .home-link > img » peut être retiré de l'Additional CSS.
   Amélioration : max-width 100% pour qu'il rétrécisse sur petit écran au lieu
   d'être figé à 400px. */

.home-link > img {
	display: block;
	width: 400px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ------------------------------------------------------------- menu en serif
   Le sélecteur reprend #site-navigation ul.nav-menu li a pour battre la taille
   17px posée par le thème dans « Apparence > CSS additionnel », sans !important. */

#site-navigation ul.nav-menu li a {
	position: relative;
	padding: 6px 7px; /* espacement horizontal resserré (thème : 10px) */
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 21px;
	color: #3a352f; /* plus contrasté que le #777 du thème */
}

#site-navigation ul.nav-menu li a:hover,
#site-navigation ul.nav-menu li a:focus {
	color: #a4884f; /* survol or, sur charte */
}

/* Soulignement or qui grandit au survol. Menu horizontal uniquement : sous
   720px les items sont empilés en pleine largeur, l'effet n'a pas de sens. */
@media (min-width: 721px) {

	#site-navigation ul.nav-menu li a::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 0;
		height: 1px;
		background: #a4884f;
		transition: width 0.25s ease;
	}

	#site-navigation ul.nav-menu li a:hover::after,
	#site-navigation ul.nav-menu li a:focus::after {
		width: calc(100% - 14px);
	}
}

/* -------------------------------------------------------- filet sous le menu */

#site-navigation {
	border-bottom: 1px solid #e3dccb;
}

/* -------------------------------------------- espace logo / menu (desktop)
   Le thème pose #page { padding-top:60px }, ce qui éloigne le menu du logo. On
   le resserre sur desktop. Sélecteur #main #page pour battre la règle du thème
   sans !important. Mobile inchangé. */
@media (min-width: 721px) {

	#main #page {
		padding-top: 24px;
	}
}

/* ------------------------------------------------ sélecteur de langue WPGlobus
   Les drapeaux sont des images de fond posées par WPGlobus (chargé après le
   thème), d'où le !important ciblé pour les neutraliser. Le reste passe par la
   spécificité .nav-menu li.menu_item… qui bat la règle générique du thème. */

.wpglobus_flag {
	background-image: none !important;
	padding-left: 0 !important;
}

.nav-menu li.menu_item_wpglobus_menu_switch > a,
.nav-menu li.sub_menu_item_wpglobus_menu_switch > a {
	color: #a4884f;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.nav-menu li.menu_item_wpglobus_menu_switch > a:hover,
.nav-menu li.menu_item_wpglobus_menu_switch > a:focus,
.nav-menu li.sub_menu_item_wpglobus_menu_switch > a:hover,
.nav-menu li.sub_menu_item_wpglobus_menu_switch > a:focus {
	color: #8a6d3b;
}

/* Menu déroulant des langues, propre et sur charte. */
.nav-menu .menu_item_wpglobus_menu_switch .sub-menu {
	background: #faf8f3;
	border: 1px solid #e3dccb;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------ menu mobile (hamburger)
   Le thème affiche sous 720px un bouton « ≡ Menu » (Arial gras, bordure grise)
   via .main-navigation:before, et ouvre une boîte blanche de 300px. On rhabille
   les deux sur charte : bouton doré assorti aux « Plus d'infos », panneau ivoire
   à filets, cibles tactiles confortables. Le mécanisme JS du thème est conservé
   (classe .opened basculée au clic). */

@media (max-width: 720px) {

	.main-navigation:before {
		content: "\2630  Menu"; /* ☰ + libellé */
		display: inline-block;
		border: 1px solid #a4884f;
		border-radius: 0;
		background: transparent;
		color: #a4884f;
		font-family: "Open Sans", sans-serif;
		font-size: 13px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		padding: 13px 24px;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	/* État ouvert : le bouton se remplit d'or. */
	.main-navigation.opened:before {
		background: #a4884f;
		color: #faf8f3;
	}

	/* Panneau ouvert : ivoire, filets sur charte, ombre douce. */
	.main-navigation.opened .nav-menu {
		width: 100%;
		max-width: 340px;
		margin: 18px auto 0;
		background: #faf8f3;
		border: 1px solid #e3dccb;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	}

	.main-navigation .nav-menu li {
		border-top: 1px solid #e3dccb;
	}

	/* Cibles tactiles confortables, taille de menu adaptée au mobile. */
	#site-navigation ul.nav-menu li a {
		padding: 15px 18px;
		font-size: 20px;
	}
}