/* =========================================================================
   Menu d'en-tête « Nos Ressources » — balisage : inc/kg-menu-ressources.php
   Préfixe .kgm-* ; couleurs et polices alignées sur l'accueil (kg-accueil.css).
   ========================================================================= */

.kgm-drop {
	--kgm-ink: #0f172a;
	--kgm-text: #64748b;
	--kgm-line: #e2e8f0;
	--kgm-soft: #f6f7fc;
	--kgm-title: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--kgm-body: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.kgm-c-indigo { --c: #6366f1; }
.kgm-c-sky    { --c: #0ea5e9; }
.kgm-c-pink   { --c: #ec4899; }
.kgm-c-amber  { --c: #f59e0b; }

/* ---------- Carte déroulante (en-tête ordinateur) ---------- */
.wd-header-main-nav .kgm-drop > .wd-dropdown-menu.wd-design-default {
	--wd-dropdown-width: 380px;
	padding: 10px;
	border: 1px solid var(--kgm-line);
	border-radius: 20px;
	box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 48px -16px rgba(15, 23, 42, .28);
}
.wd-header-main-nav .kgm-drop .wd-sub-menu { padding: 0; }
.wd-header-main-nav .kgm-drop .wd-sub-menu > li { margin: 0; }
.wd-header-main-nav .kgm-drop .wd-sub-menu > li.kgm-sep {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--kgm-line);
}

.wd-header-main-nav .kgm-drop .wd-sub-menu > li > a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border-radius: 14px;
	color: var(--kgm-ink);
	line-height: 1.25;
	text-transform: none;
	transition: background-color .18s ease;
}
.wd-header-main-nav .kgm-drop .wd-sub-menu > li > a:hover,
.wd-header-main-nav .kgm-drop .wd-sub-menu > li > a:focus-visible,
.wd-header-main-nav .kgm-drop .wd-sub-menu > li.current-menu-item > a {
	background: var(--kgm-soft);
}

.kgm-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 12%, #fff);
	transition: transform .18s ease;
}
.kgm-ico .kg-ico { width: 22px; height: 22px; }

.kgm-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kgm-title {
	font-family: var(--kgm-title);
	font-weight: 600;
	font-size: 15px;
	color: var(--kgm-ink);
	transition: color .18s ease;
}
.kgm-desc {
	font-family: var(--kgm-body);
	font-size: 13px;
	color: var(--kgm-text);
}

.kgm-arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-left: auto;
	color: var(--c, var(--kgm-text));
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .18s ease, transform .18s ease;
}
.kgm-drop a:hover .kgm-arrow,
.kgm-drop a:focus-visible .kgm-arrow { opacity: 1; transform: none; }
.kgm-drop a:hover .kgm-ico { transform: scale(1.06); }
.kgm-drop a:hover .kgm-title { color: var(--c); }
/* La flèche prend la couleur de l'entrée : la variable vient de la pastille, on la remonte au lien. */
.kgm-drop a:has(.kgm-c-indigo) { --c: #6366f1; }
.kgm-drop a:has(.kgm-c-sky)    { --c: #0ea5e9; }
.kgm-drop a:has(.kgm-c-pink)   { --c: #ec4899; }
.kgm-drop a:has(.kgm-c-amber)  { --c: #f59e0b; }

/* ---------- Menu mobile (tiroir WoodMart) : pastille réduite, sans description ---------- */
.wd-nav-mobile .kgm-drop .kgm-desc,
.wd-nav-mobile .kgm-drop .kgm-arrow { display: none; }
.wd-nav-mobile .kgm-drop .wd-sub-menu a { display: flex; align-items: center; gap: 12px; }
.wd-nav-mobile .kgm-drop .kgm-ico { width: 32px; height: 32px; border-radius: 10px; }
.wd-nav-mobile .kgm-drop .kgm-ico .kg-ico { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
	.kgm-ico, .kgm-arrow, .kgm-title { transition: none; }
}